Open Graph 预览

Open Graph预览工具向您显示共享链接在发布之前会是什么样子,您输入您的 og:title、og:description、og:image、og:url 和 Twitter 卡字段 - 或粘贴您已有的元标签块 - 并且该工具会并排呈现 Facebook、X/Twitter、LinkedIn、Slack 和 Discord 的近似社交卡。您无需实时推送页面、共享页面并发现标题被切成两半或图像永远不会加载,而是在仍然可以修复它的同时看到问题。

Open Graph协议是几乎每个平台用来构建那些卡片的共享词汇,一个刮刀访问你的页面,读取<head>中的og:元标签,并从中组装一个预览,其中的捕获是每个平台对那些相同标签的渲染方式不同:X截断了大约110个字符的描述,而Facebook显示更接近155,LinkedIn将描述完全隐藏在某些表面上,Slack将所有内容折叠成一个紧凑的附件,一张卡片中看起来精细的字段可以在另一张卡片中损坏,这就是为什么一次预览所有这些是唯一可靠的检查。

这是一个带有实数的开放图形预览。将 og:title 设置为"我们如何在不重写的情况下将页面加载时间切成两半"(55 个字符,一张通行证),并给它一个 125 个字符的 og:description。验证通过标题并警告描述:Facebook 和 LinkedIn 罚款,但 X 截断了大约 110 个字符。X 大图像卡在"4.1 秒..."之后切割文本,而 Facebook 卡显示整句打开的图形图像预览将您的 og:image 加载到每张卡中,因此在任何人共享之前,损坏的链接会显示"图像未能加载"。

该工具运行客户端,从不获取或抓取您的页面。它从您给它的标签中工作,要么输入表单,要么粘贴为原始 HTML 并进行本地解析。这意味着您可以验证登录后面的页面、暂存域上的元数据,或者根本不部署。它向您的服务器发出的一个请求是加载 og:image URL,因此您的浏览器可以在卡片中显示图片。