OG 分享卡片生成

📖 工具介紹

網頁被分享到微信、微博、Facebook、Twitter 等平臺時，展示的標題、描述與縮圖由 head 中的 Open Graph 與 Twitter Card 標籤決定。本工具把這兩套標籤集中到一個表單：填寫分享標題、描述、頁面地址與圖片地址，選擇內容型別、站點名稱與地區語言，即可生成完整程式碼。右側會按填入的資訊實時模擬卡片展示效果，包括圖片區域、域名、標題與描述，方便在釋出前確認有沒有截斷或留白。圖片寬高建議填 1200×630，這是多數平臺推薦的分享圖比例。Twitter 標籤可複用 Open Graph 的文案，不必重複填寫。全部處理在本地完成。常見使用場景包括：文章釋出前配置分享卡片、活動頁統一分享文案、檢查舊頁面的 og:image 是否缺失、以及為多個頁面批次準備分享標籤模板。分享圖片的載入失敗是最常見的分享事故，多數平臺要求圖片為公開可訪問地址且走 HTTPS，防盜鏈與登入鑑權都會導致抓取失敗，因此建議把分享圖放在不帶鑑權的靜態路徑上。og:type 需要與頁面內容匹配，文章頁誤用 website 會讓部分平臺無法解析釋出時間與作者。Twitter Card 的 summary_large_image 適合帶大圖的頁面，純文字公告用 summary 更協調。需要注意 og:image 的地址必須是絕對路徑，相對路徑在多數平臺上無法抓取。若站點啟用了內容分發網路，請確保圖片地址可被外部訪問且返回正確的圖片型別。修改分享標籤後，各平臺通常有快取，可透過平臺提供的除錯工具主動重新整理。

✨ 功能特點

• 兩套標籤一次生成：同時輸出 Open Graph 與 Twitter Card，自動區分 property 與 name 屬性
• 實時卡片預覽：右側模擬圖片、域名、標題與描述的分享效果，釋出前即可確認
• 圖片引數完整：支援 og:image 寬高與 alt，符合平臺推薦尺寸校驗
• 文案可複用：Twitter 標籤可一鍵複用 Open Graph 標題描述，省去重複填寫
• 域名自動提取：預覽卡片的域名行由填寫的頁面地址自動解析

🚀 使用方法

1. 填寫分享標題與描述；
2. 填入頁面地址與圖片地址；
3. 點選「生成標籤」；
4. 確認預覽效果後複製程式碼。