进阶

Open Graph 进阶技巧

让社交预览更清晰、更可靠的实用技巧。

以下是手动编写或在 CMS 中编写 Open Graph 标记的通用最佳实践。OG Preview 本身是一个查看器:它渲染你的标签的显示效果,并在抓取 URL 模式下报告某个页面已经暴露了哪些标签。

为每种页面类型使用独立的标签

不同的页面值得拥有不同的预览。博客文章最好将 og:type 设置为 article,产品页面则受益于描述性的标题和图片,而首页应突出品牌形象。到处重复使用同一个通用预览会降低点击率。

优化图片以提升加载速度

避免使用数兆字节的 PNG。将其压缩到合理的大小,保持适用于各平台的 1200×630px(1.91:1)尺寸,并确保文件能被爬虫快速加载。

务必设置 og:site_name

这样即使标题被截断,你的品牌名称也能在预览中保持可见:

<meta property="og:site_name" content="YourBrand">

跨平台测试 —— 不要想当然

Facebook、LinkedIn 和 X (Twitter) 处理 meta 标签的方式各有细微差异。请先在这里预览,然后使用官方工具在真实平台上验证:

使用 og:type 呈现更丰富的内容

博客使用 article;产品使用 product。正确的类型可以在某些平台上解锁更丰富的呈现效果,例如作者姓名或发布日期。

设置绝对图片 URL

社交爬虫不会解析相对路径。请始终使用完整的 URL:https://yoursite.com/img/og.jpg,而不是 /img/og.jpg

为更新后的图片刷新缓存

当你替换 OG 图片时,平台可能仍会提供旧图片。请更改文件名(例如 og-v2.jpg)或追加版本查询参数,例如 ?v=2,然后重新运行平台调试工具以刷新缓存。

将 OG 标签与 JSON-LD 搭配使用

通过 <script type="application/ld+json"> 提供的结构化数据有助于搜索引擎,而 OG 标签负责社交分享。两者相辅相成 —— 请都保留。

← 返回工具