OGP 檢查與模擬器
從 URL 或 HTML 原始碼診斷 OGP 設定，並預覽頁面在社群網站分享時的呈現效果。
支援 X（原 Twitter）/ Facebook / LINE，也可從圖片檔案進行模擬。
- 安全
- 診斷結果不會被儲存或公開。
說明
用於驗證 OGP 標籤設定並模擬頁面在社群網站分享時呈現效果的工具。
適合製作 OGP 圖片與測試 HTML meta 標籤。
輸入來源
選擇以下三種方式之一。
| 網站 URL | 適用於可公開存取的網站。 |
|---|---|
| HTML 原始碼 | 適用於開發階段或有存取限制的網站。 |
| 圖片檔案 | 適用於製作 OGP 圖片時檢查效果。 |
診斷結果
分成三個等級評估。
| 等級 A | 符合所有建議項目。 |
|---|---|
| 等級 B | 符合必需項目，但仍有建議項目。 |
| 等級 C | 有些項目需要修正。 |
建議範例
以下設定可涵蓋主要平台。
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="頁面描述">
<meta property="og:url" content="頁面 URL">
<meta property="og:image" content="OGP 圖片 URL">
<meta property="og:type" content="頁面類型">
<meta property="og:site_name" content="網站名稱">
<meta name="twitter:card" content="Twitter Card 類型">標籤詳情
基礎 OGP 標籤
可在多個社群平台通用的標籤。建議設定以下全部內容。
使用 `property` 屬性。
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="頁面描述">
<meta property="og:url" content="頁面 URL">
<meta property="og:image" content="OGP 圖片 URL">
<meta property="og:type" content="頁面類型">
<meta property="og:site_name" content="網站名稱">og:title
設定頁面標題，通常與 `title` 標籤相同。
在 X（Twitter）若缺少，Twitter Card 可能會被停用，因此幾乎是必需項。
<meta property="og:title" content="頁面標題">範例
<meta property="og:title" content="OGP 檢查與模擬器">og:description
設定頁面描述，通常與 `description` 標籤相同。
在多數平台中省略時，可能會改用 `description` 作為替代。
<meta property="og:description" content="頁面描述">範例
<meta property="og:description" content="從 URL 或 HTML 原始碼診斷 OGP 設定，並預覽頁面在社群網站分享時的呈現效果。支援 X、Facebook、LINE，也可從圖片檔案進行模擬。">og:url
將目標頁面 URL 設為絕對 URL。
<meta property="og:url" content="頁面 URL">範例
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
將 OGP 圖片 URL 設為絕對 URL。推薦尺寸：`1200px`×`630px`。
由於可能以 1:1 顯示，請將重要資訊放在中心 `630px`×`630px` 區域內。
<meta property="og:image" content="OGP 圖片 URL">範例
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
指定頁面類型。
| website | 網站首頁 |
|---|---|
| article | 文章等非首頁頁面 |
| blog | 部落格首頁 |
| product | 產品/服務詳情頁 |
<meta property="og:type" content="頁面類型">範例
<meta property="og:type" content="article">og:site_name
指定網站名稱，通常所有頁面通用。
<meta property="og:site_name" content="網站名稱">範例
<meta property="og:site_name" content="develop.tools">X（Twitter）標籤
X（原 Twitter）優先使用的標籤。
若已設定基礎 OGP 標籤，可省略這些標籤而不影響。
只有在需要控制縮圖大小時才設定 `twitter:card`。
使用 `name` 屬性。
<meta name="twitter:card" content="Twitter Card 類型">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="頁面描述">
<meta name="twitter:image" content="縮圖 URL">
<meta name="twitter:site" content="網站的 X/Twitter 使用者名稱">
<meta name="twitter:creator" content="作者的 X/Twitter 使用者名稱">twitter:card
設定 Twitter Card 類型。需要大縮圖時請指定。
省略時預設為 `summary`。
| summary | 小縮圖（方形）+ 網站資訊並排 |
|---|---|
| summary_large_image | 大縮圖 + 網站資訊上下排列 |
<meta name="twitter:card" content="Twitter Card 類型">範例
<meta name="twitter:card" content="summary_large_image">Facebook 標籤
Facebook 使用的標籤。
若要使用 Facebook 專用分析功能，請指定這些標籤。
<meta property="fb:app_id" content="Facebook 應用程式 ID">