检查和调试 Open Graph 标签

粘贴网址以读取其 Open Graph 标签,并预览生成的链接效果。在分享页面之前,找出缺失或冲突的 OG 标签并进行修复。

og:title

在预览卡片中显示的标题。请将其控制在 60 个字符左右,使其自身就通俗易懂,而无需完全依赖网站名称来解释。

标题

描述

framer.com

og:description

标题下方的简短摘要。字数通常在 110 到 160 个字符左右为宜。某些应用程序仅显示第一行,因此请先呈现核心要点。

标题

描述

framer.com

og:image

预览图像。请使用 1200 x 630 像素的 JPG 或 PNG 格式的绝对 HTTPS URL,并添加 og:image:width、og:image:height 和 og:image:alt。

og:url 和 og:type

og:url 应与规范(canonical)网址一致,以便分享次数能统一计入同一个地址。og:type 对于普通页面通常为 website,对于博客文章则通常为 article。

标题

描述

framer.com

Open Graph 标签实用指南

Open Graph 是大多数平台用于生成链接预览的协议。Open Graph 检查工具可以显示各大平台将从您的页面中读取的内容,并帮助您排查问题。

什么是 Open Graph 检查工具?

Open Graph 检查工具会抓取网页 URL,读取其 og meta 标签,并为 LinkedIn、Facebook、X、Slack 和 WhatsApp 等平台呈现预览卡片。它的作用类似于调试器,用于检查链接在分享时的显示效果。

哪些是必需的 Open Graph 标签?

四个基本标签是 og:title、og:type、og:image 和 og:url。添加 og:description 和 og:site_name 可以获得更完整的预览效果;如果您以多种语言发布内容,还可以添加 og:locale。

如何调试 Open Graph 标签

通过检查工具运行该 URL,查看是否存在缺失的标签、重复项或与页面不一致的值。请确保这些标签包含在服务端渲染的 HTML 中,因为许多爬虫不会运行 JavaScript。

Open Graph 与 Twitter 卡片

Twitter 卡片标签(如 twitter:card 和 twitter:image)是 X 专属的。缺少这些标签时,X 会回退使用 Open Graph 标签。建议将 twitter:card 设置为 summary_large_image,其余内容交由 Open Graph 处理即可。

为什么仍显示旧预览?

各大平台通常会缓存预览信息。更改标签后,请重新发布页面,并使用平台自带的工具(例如 LinkedIn Post Inspector)来抓取最新内容。

Open Graph 标签对 SEO 有帮助吗?

Open Graph 标签并不是直接的排名因素,但更精美的预览效果能带来更多点击和分享,从而为你的页面吸引更多访客并创造更多获取外链的机会。

Open Graph 快速检查清单

每页配置一个 og:title 和 og:description,使用包含绝对 URL 且尺寸为 1200 x 630 的 og:image,确保 og:url 与规范链接(canonical)一致,设置 twitter:card,并在每次更改后进行全新检查。