发现链接预览损坏的最糟糕时间是在发布推文之后。您在一个页面上花费一周时间,写下公告,击中发送 - 并且出现的卡片是一个灰色矩形,标题被截断,没有图像,因为 og:image 指向 /images/og.png 代替 https://yoursite.com/images/og.png、帖子已经出去了,卡已经缓存了,你去修好,然后让大家重新分享。
安静 打开图表 preview 解决了,通过提前移动支票,而不是发布和希望,而是看看标签仍然可编辑时卡片会是什么,那就是整个前提 打开图预览 工具:输入您的标签,或粘贴您已有的标签,并查看并排呈现的大致 Facebook、X、LinkedIn、Slack 和 Discord 卡,每个字段都有通过/警告/失败的判决。
单次预览是不够的原因是每个平台读取相同的标签并呈现不同的方式。X 将描述截断为大约 110 个字符;Facebook 显示更接近 155。LinkedIn 经常完全删除描述,仅显示图像、标题和域名。Slack 将整个内容折叠成带有彩色导轨的紧凑附件。Discord 将描述突出嵌入,但会缩小图像。一个非常适合 Facebook 卡的标题可以在 X 的单词中剪切,除非您同时查看,否则您永远不会注意到。
我建造 Toolz.dev and ship pages butenly,而且我厌倦了发布-检查-修复循环,该工具完全在浏览器中运行,根本不进行任何网络调用 - 它永远不会获取您的URL - 这意味着它也适用于尚未部署的页面,坐在登录后面,或者生活在官方平台调试器无法到达的暂存域上。
TL;博士: Open Graph标签控制你的链接在共享时的样子,每个平台读取的都是相同的
og:tags,但截断和布局不同,所以预览一个平台不会告诉你其他的。the 打开图预览 工具从一组标签中渲染五张平台卡,根据当前平台限制验证每个字段,如果您已经拥有现有标签块,则解析现有标签块,并向您提交副本就绪<meta>block - 所有客户端,没有刮取,也没有上传。
主要特点
一组标签的五个平台预览
该工具为 Facebook 渲染了近似卡片,两者都为 X 渲染 summary_large_image 並 summary styles、linkedin、slack、discord。都从同一个字段中读取,所以当你修剪标题时,你会看到它一次到处更新。重点不是像素完美保真- 平台无预警地重新设计他们的卡片- 而是相对保真:正确的比例,正确的截断点,正确的字段排序,所以你可以看到哪个平台是断裂的。
粘贴并解析您已有的标签
如果页面存在,您很少想重新键入九个字段。粘贴原始 HTML - 整个 <head>、视图源转储或松散块 <meta> 行 - 进入解析框,内置解析器会提取每个 og: 並 twitter: tag它识别并加载到表单中,解析器是基于正则表达式而不是基于dom的,这使得相同的代码可以在浏览器中运行,在node中,在桌面构建中不加更改。
具有实际限制的每个字段验证
每个字段都会获得通过、警告或失败状态。超过约 60 个字符的标题会失败。110 到 155 个字符之间的描述会发出警告,因为它在 Facebook 和 LinkedIn 上读取完整,但在 X 上被剪掉。亲戚 og:image 路径彻底失败 - 刮刀无法解决它们。安 og:image 供应平原 http warns,因为有几个平台拒绝渲染非https的图片, A twitter:site value that is not a valid handle fails。 the vericions are specific enough to act on rather than a generic "looks fine"。
您实际上可以遵循的图像规则
每个主要平台上的大图像卡都呈现 1.91:1 的图像; 1200x630 像素是一次满足所有像素的大小。该工具明确指出目标,标记使图像默默消失的故障模式,并且 - 因为图像损坏的卡是最常见的 Open Graph 错误 - 呈现您的实际情况 og:image URL 在每个预览中,如果图像无法加载,则回落到清晰的占位符。
准备好的、正确转义的元块
生成的输出是一个完整的标签块,而不是一个片段,它包括 og:image:width 並 og:image:height的,这比大多数人意识到的更重要:没有它们,一些刮刀在第一次获取时会渲染一张纯文本卡片,并且只有在下载并测量图像后才会显示图像,这可能是几个小时后的值 HTML 转义的,因此您的描述中的一个扩音器或引号无法突破属性并损坏您的标记。
100%客户端,没有刮擦
该工具从不请求您的 URL 这是故意的,值得理解的原因:浏览器由于同源策略而无法获取任意第三方页面,而服务器端获取器将意味着将您未发布的 URL 运送给其他人's 日志。从您提供的标签中工作会回避问题并解锁官方调试器无法提供的情况 - 验证尚未运行的页面。看到 在线工具中的数据隐私 为更广泛的推理。
如何使用打开的图表预览工具
1步:加载你的标签
You 有两条路径, 如果是从零开始写元数据, 填表: og:title、 og:description、 og:image、 og:url、 og:site_name然后选择一个 og:type 和一个 twitter:card 样式并添加您的 twitter:site 並 twitter:creator 手柄。
如果页面已经有标签,请粘贴它们。打开页面,查看源代码(而不是浏览器检查器 - 更多关于下面的区别),复制 <head>(parse)框中, 然后将其丢入。单击解析标签, 识别的所有内容都加载到表单中。解析器也了解别名: og:image:secure_url 並 og:image:url 两者都提供图像字段,并且 twitter:title、 twitter:description、和 twitter:image 当它们被用作后备 og: 缺乏等效项 - 这反映了平台本身如何解析标签。
2步:阅读验证面板
验证列表按照字段重要的方式排序。首先修复失败:缺失 og:image、相对的图像路径、超过限制的20个字符的标题。然后看看警告,这些警告大多是关于平台之间的差距的- 对Facebook来说没问题但对X来说很长的描述,缺失 og:site_name 这意味着您的卡显示的是裸主机名而不是您的品牌。
Panel顶部的计数器,让你快速阅读,零失败,几个警告是完美的发货状态;警告是权衡,而不是错误。
3步:比较卡片
这是人们跳过的步骤,也是抓住真正问题的步骤扫描所有六个预览 X 摘要卡上的标题是否被剪掉?描述是否在 LinkedIn 上消失(通常会消失 - 这是预期的)?图像看起来是否正确为 1.91:1,或者您的徽标是否被裁剪,因为您设计了一个方形图形并且卡片使其变宽?
Trim,重新检查,直到每张卡片读取干净,一个有用的纪律:写到最严格的约束,如果你的描述在110个字符完全读取,它到处都完全读取,如果你的标题在55,它能在每张卡片和每种移动布局中生存。
4步:复制元块并运送它
将生成的块复制到您的页面's <head>。在一个框架中 - Next。js、Nuxt、SvelteKit、Astro - 您不会将原始粘贴 <meta> tags,但块仍然是您准确填充框架中哪些字段的真值来源's元数据api。
然后执行每个人都忘记的步骤:重新刮取每个平台中的 URL's 调试器。运送修复程序不会清除缓存的卡。 元标记生成器 如果您还需要与社交标签一起生活的标准 SEO 标签(标题、描述、规范、机器人),那么这里是配套工具。
开放图协议的实际工作原理
Open Graph始于2010年的Facebook,作为一种将网页变成社交图中节点的方式,野心逐渐消退;标签词汇卡住了,现在它已经是Facebook、LinkedIn、Slack、Discord、WhatsApp、Pinterest、iMessage、Signal和大多数其他链接展开软件阅读的事实上的标准。
机制简单,当一个链接被共享时,平台会向你的URL发送一个机器人- facebookexternalhit、 LinkedInBot、 Slackbot-LinkExpanding、 Discordbot、 Twitterbot。那个机器人请求原始的HTML,读取 <head>,提取 og: 並 twitter: meta标签,并构建了一张卡,它是一个单一的http GET和一个解析,机器人不是浏览器:这些爬虫大多数不执行JavaScript,这是造成整个类型错误的根本原因。
标签本身
4个标签按照协议要求描述: og:title、 og:type、 og:image、和 og:url.在实践中 og:description 並 og:site_name 是同样承重,因为没有它们,卡片要么是裸露的,要么是回落到刮刀在页面上能找到的任何文本上。标签使用 property 属性,不是 name- <meta property="og:title" content="..." />- 这会让人们绊倒,因为 Twitter 标签的作用相反并使用 name。大多数解析器都原谅了这一点,但平台'自己的验证器并不总是如此,所以值得正确对待。
og:与推特:优先
X先读取Twitter卡标签,当它们缺席时又回落到打开图形,那就意味着一个页面只有 og:title、 og:description、和 og:image 仍然生产工作 X 卡 - 后备功能是设计好的。
那么实际上需要什么呢 twitter: 标签?三件事。 twitter:card 决定布局,并且没有 Open Graph 等效项:如果没有它,X 将根据找到的内容选择卡片样式,这不是您想要委托的决定。 twitter:site 将卡归因于品牌帐户。 twitter:creator credits作者。其他一切都可以安全地来自开放图。
实际规则:编写完整的 Open Graph 标签,然后准确添加这三个标签 twitter: 标签。重复 twitter:title 並 twitter:description 是无害的,但毫无意义,除非你真的想要在X上与其他地方不同的副本 - 这有时是一个合法的选择,因为X'更紧密的截断有时证明更短,更有力的描述是合理的。
图像尺寸、比例和裁剪问题
1.91:1的宽高比是要内化的数字,1200x630像素击中它,足够大,可以用于视网膜显示,并且是Facebook,LinkedIn和X都渲染的,而不会对大图像卡造成失真。
故障模式很微妙:平台通常不会拒绝偏离比例的图像,他们会裁剪它。上传方形 1000x1000 图形,Facebook 会将其中心裁剪为 1.91:1,大约从顶部和底部切掉三分之一。如果您的标题文本垂直居中,它会保留下来;如果您在顶部放置徽标,则不会将有意义的内容保留在安全区域内并远离边缘,因为不同的表面裁剪量略有不同。
紧凑型 X summary card 就是例外,它想要一个正方形的图像,最小 144x144,它会居中- 将一个 1.91:1 的横幅裁剪成一个正方形- 通常会破坏它,如果你故意使用 summary,提供正方形图像;如果提供横幅,则使用 summary_large_image。
将文件大小保持在 5 MB 左右(Facebook's 记录的上限;其他平台在实践中更为严格),充当 PNG、JPEG 或 网络P并且始终使用绝对 HTTPS URL。相对路径和协议-相对 // URL 是图像默默无法出现的两种最常见方式。
为什么抓取程序缓存,以及如何破解缓存
每个平台都会缓存抓取页面的结果 - 通常持续大约 7 天,有时甚至更长。这不是固执:流行的链接每小时可以共享数千次,并且为每个共享重新获取您的页面将是平台进行的拒绝服务攻击。因此他们抓取一次并重复使用。
果修复你的标签并不能修复卡, 旧的预览坚持为每个现有份额和新份额直到缓存到期。以强制刷新:
- 脸书: 的共享调试器,使用"再次抓取"按钮。这也清除了instagram和whatsapp使用的缓存。
- 链接: 的邮政检查员。输入网址会引发新鲜的刮擦。
- X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X:X: card验证器已经弃用,访问不一致,在实践中,发布链接是唯一可靠的刷新。
- 懈: unfurl缓存自行过期;添加无害的查询参数会立即产生新的unfurl。
- 不和谐: 类似 - 更改的查询字符串是实际的解决方法。
那个查询字符串技巧是通用的逃生舱口: https://example.com/page?v=2 is,对刮刀来说,一个没有缓存条目的不同url。用它来测试,而不是你实际发布的规范链接,并保留 og:url 指向干净的规范地址,以便参数化变体的份额正确整合。 URL编码器/解码器 当这些参数变得复杂时很方便。
Tags丢失时会发生什么
刮刀会倒退,而且倒退比您希望的要糟糕。
否 og:title 他们使用 <title> tag - 通常为搜索结果而编写,通常以管道和您的品牌名称结尾,尴尬地读作卡片标题。不 og:description 他们使用元描述或刮擦正文,可以拉入 cookie 横幅或导航标签。不 og:image 大多数平台都显示纯文本卡,尽管有些平台会寻找页面中的任何图像,并可能找到徽标、头像或跟踪像素。不 og:url 共享地址按原样使用,所以 ?utm_source=twitter 变体被视为不同的页面,您的共享计数片段。
1个故障类多一个值得命名, 因为在正常调试中是看不见的: 由客户端 JavaScript 注入的标签。如果您的元标签是在水合后由 React 设置的,浏览器检查器会完美地显示它们,而刮刀什么也看不到,因为刮刀从未运行过您的 JavaScript。总是使用 view-source 或进行验证 curl的,它显示了服务器实际返回的原始HTML - 而不是您的应用程序启动后的DOM。这同样适用于将401、登录重定向或机器人阻止403返回到未经身份验证的请求的页面:刮刀获取错误页面,而不是您的内容。
常见用例
启动前验证
Core case。net 页面上线前,粘贴你打算发货的标签,确认每一张卡渲染图,这是官方平台调试人员不能做的一件事,因为他们必须获取一个实时网址,一个预启动检查需要三十秒,节省了启动日的重共享。
调试坏卡
A链接展开错误,需要知道原因,粘贴页面's当前标签,读取验证面板,原因通常是立竿见影的:一个相对的图像路径,一个 http 图像,描述是限制的两倍,缺失 twitter:card。修复,在平台调试器中重新刮擦,完成。
大规模审计站点's元数据
逐页浏览网站,粘贴每个网站 <head> 阅读判决书,就会发现任何多贡献者项目中积累的漂移:一个页面有 Twitter 标签,另一个页面没有,一个描述是 300 个字符,三个页面共享相同的通用 og:image。工具变成快速一致性检查,而不是每页猜测。
设计共享图像
当您选择或委托时 og:image、预览向您展示作物在宽卡与正方形卡中实际对它做了什么设计师通常会交出一个美丽的正方形图形,该图形会被 1.91:1 的作物屠杀;看到它出货之前比看到它之后更便宜。
将副本写入最严格的限制
Facebook's旁的因为预览显示X's截断,他们把一个抽象字符限制变成了可见的东西,写一个110个字符完全读取的描述,是当你能看到省略号出现时,当你输入时,一个纪律要容易得多 蛞蝓发生器 涵盖了生成干净 URL 的邻近工作 og:url 应指向。
处理登录的暂存或后面
NDA 下的内部工具、客户端工作以及 auth wall 后面的页面都是平台调试器无法访问的,因为该工具的工作原理是标签而不是取件,所以它处理它们的方式与公共页面相同。
平台比较
Current 最知名的指导。平台改变这些数字而不公布,截断点以像素而不是字符来衡量- 一个充满宽字母剪辑的标题比一个充满窄字母剪辑的标题更早。将这些视为安全目标,而不是规格。
| 平台 | 推荐图像 | 比率 | 显示标题 | 描述显示 | 注释 |
|---|---|---|---|---|---|
| 脸书 | 1200x630 | 1.91:1 | ~60 字符 | ~155 字符 | 最小 200x200;中心裁剪离比图像 |
| X/推特(大) | 1200x628 | ~1.91:1 | ~60 字符 | ~110 个字符 | 要求 twitter:card=summary_large_image |
| X/推特(摘要) | 800x800 | 1:1 | ~50 个字符 | ~90 字符 | 最少 144x144;需要方形图像 |
| 链接In | 1200x627 | ~1.91:1 | ~100 字符 | 常隐藏 | 描述经常从卡片上掉落 |
| 松弛 | 1200x630 | 1.91:1 | ~60 字符 | ~140 字符 | 紧凑的附件;展开缓存自行过期 |
| 不和谐 | 1200x630 | 1.91:1 | ~60 字符 | ~160 字符 | 渲染描述突出,图像更小 |
表格中的外卖是设计目标:1200x630 图像、55-60 个字符或以下的标题以及 110 以下的描述,为您提供一张卡片,可以在任何地方正确渲染,而无需按平台调整。
常问问题
正确的开放图形图像大小是多少？
1200x630像素- 一个1.91:1的比例。这同时满足Facebook,LinkedIn,X,Slack和Discord的大图像卡,并且足够大,可以在高密度显示屏上保持清晰。将文件保持在5 MB左右,通过HTTPS以绝对URL提供,并保持重要的文本远离边缘,因为表面裁剪的量略有不同。对于紧凑的X汇总卡,提供至少144x144的方形图像代替。
为什么我的链接预览在修复标签后仍然显示旧图像?
为平台缓存了它较早的scrape的结果,通常大约一周更新标签不会使该缓存无效强制通过平台重新获取's调试器- Facebook共享调试器's再次抓取按钮,或者LinkedIn邮政检查器对于Slack和Discord,在URL中添加查询参数会立即产生未缓存的预览,这是验证修复的最快方法。
我需要 og: 和 twitter: 标签吗？
当 Twitter 等效项缺失时,X 回落到 Open Graph,因此页面已完成 og: tags 产生一个工作 X 卡,Open Graph 无法表达的是卡片布局,所以还是应该添加 twitter:card 在大横幅和紧凑摘要之间进行选择,再加上 twitter:site 並 twitter:creator to 属性卡片。那三个加上完整的开放图标记就是高效组合。
og:标题和og:描述应该持续多久?
保持 og:title at 或 60 字符以下。对于 og:description 平台存在分歧:x 显示大约 110 个字符,Facebook 和 LinkedIn 显示接近 155 到 200。写入更严格的 X 限制意味着描述到处都读得很完整。超过限制的文本不会丢失,只是隐藏在省略号后面,因此前面加载重要的单词。
为什么我的预览空白或仅显示 URL?
通常的原因,按频率的粗略顺序排列: og:image 是相对路径而不是绝对URL;图像以普通方式提供 http;标签在外面 <head>;标签由客户端 JavaScript 注入,刮刀从未执行过;或者页面返回非 200 状态或登录重定向到机器人。使用视图源或查看原始 HTML curl 而不是浏览器检查器 - 检查器在 JavaScript 运行后显示 DOM,这不是刮刀看到的。
该工具是否获取我的 URL 来读取标签?
No。它根本不提出网络请求。它从您键入或粘贴的标签中工作,并且所有内容都在浏览器中解析和渲染。浏览器无法因为CORS而获取任意第三方页面,而服务器端的获取器将意味着将您未发布的URL发送到其他地方。权衡是您提供标签 - 好处是localhost上,在staging上或登录后面的页面与公共页面完全相同。
我可以预览尚未发布的页面吗?
是的,使用这个而不是平台调试器是主要原因。官方调试器必须获取实时 URL,因此在部署之前它们毫无用处。在这里,您粘贴打算发送的标签 - 来自您的模板、框架元数据对象或本地构建 - 并且预览会立即呈现。
Open Graph 标签是否有助于我的搜索排名?
Not directly。它们被社交和聊天平台读取,而不是被搜索引擎用作排名因素。它们影响的是你的链接的每一份的点击率,它驱动流量,间接地,信号确实很重要。将它们视为共享链接的转换优化,而不是作为SEO杠杆。对于确实影响你的搜索片段的标签,使用 元标记生成器。
