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">