Open Graph元标签是解决方案。
以下是我们在Facebook上使用Open Graph元标签分享的一篇文章：
这是它去掉后的样子：
在本指南中，您将学习：
什么是Open Graph元标签
为什么Open Graph标签很重要
使用哪个Open Graph标签
如何设置打开图形标签
如何测试和调试打开图形标签
如何审核打开的图形标签
什么是Open Graph元标签？
Open Graph元标签是控制url在社交媒体上分享时如何显示的代码片段。
它们是Facebook Open Graph协议的一部分，也被其他社交媒体网站使用，包括LinkedIn和Twitter（如果没有Twitter Cards的话）。
你可以在网页的部分找到它们。任何在属性名之前带有og：的标签都是Open Graph标签。
以下是我们的SEO专家指南中的一些例子：
这些标签在Facebook上是这样的：
为什么Open Graph标签很重要？
人们更有可能看到并点击带有优化OG标签的共享内容，这意味着你的网站会有更多的社交媒体流量。
这有三个原因：
它们使社交媒体动态中的内容更加引人注目。
他们一眼就能告诉人们内容是什么。
它们可以帮助Facebook了解内容的内容，这有助于通过搜索提高你的品牌知名度。
让我们进一步讨论最后一点，因为它容易被忽视。
以下是在Facebook上搜索“替代搜索引擎”的结果：
它会显示人们已经在Facebook上分享过的热门文章。每个标题和图像都来自Open Graph标签。
即使没有文章返回搜索，Facebook仍然会显示你关注的群组或页面或朋友分享的匹配内容。
旁注。当有人使用支持Open Graph协议的应用程序（当然是Facebook的Messenger和WhatsApp，还有iMessage和Slack）通过直接消息向你发送链接时，Open Graph标签还可以帮助创建一个片段。
应该使用哪个Open Graph标签？
Facebook在其官方文档中列出了17个OG标签，以及数十个对象类型。我们不打算讨论所有这些。要让Facebook理解你的页面的基本内容，只需要4个，有时还有其他几个会有所帮助。
让我们来看看这些。
og:标题
页面的标题。
语法
最佳实践
将其添加到所有“可共享”页面。
专注于准确性、价值和可点击性。
保持简短以防止溢出。目前还没有官方的指导，但是手机版的40个字符，桌面版的60个字符大概是最合适的。
使用原始标题。不要包括品牌（例如，你的网站名称）。
og: url
内容的URL。
语法
最佳实践
使用规范URL。它有助于整合所有连接的数据，比如所有重复发布的url。
og:形象
社交片段的图片URL。
请注意，这可能是最重要的Open Graph标签，因为它占据了最多的社交feed空间。
语法
最佳实践
为“可共享”页面（例如，主页，文章等）使用自定义图像。
在剩下的页面上使用你的标志或任何其他品牌形象。
使用1.91:1比例的图像，建议最小尺寸为1200x630，以便在所有设备上获得最佳清晰度。
og:类型
你分享的对象类型。（如文章、网站等）
语法
最佳实践
用文章代替文章，剩下的页面用网站。
在适当的地方进一步描述对象类型（可选）。
og:描述
内容的简要描述。
语法
最佳实践
补充标题，使代码片段尽可能吸引人并值得点击。
如果有意义的话，复制你的元描述。
保持简短和甜蜜。Facebook推荐2-4句话，但通常会被删减。
og:语言环境
定义内容语言。
语法
最佳实践
仅用于非美式英语（en_US）编写的内容。Facebook假定没有这个标签的内容是用这种语言编写的。
如何设置打开图形标签
从下面的列表中选择您的网站平台，或者遵循这些手册说明。
WordPress
Shopify
款
Squarespace
在WordPress中设置打开图形标签
安装Yoast的SEO插件。转到文章或页面的编辑器，然后向下滚动。您应该看到一个Yoast SEO框。点击“社交”选项卡，然后是“Facebook”。
填写此内容以设置og:title、og:description和og:image标记。
不需要手动设置og:url。这是Yoast为你做的。它还添加了其他有用的OG标签，如图像尺寸。
旁注。如果你没有设置OG图片，而文章有特色图片，Yoast将默认使用。它还将添加其他Open Graph和Twitter Card标签，这将只是浪费时间设置手动站点名称，图像尺寸等。
设置一个站点范围的og:image标签也是最佳实践。当没有为共享URL设置自定义标记时，会显示这一点。
您将在Yoast的设置中找到这样做的选项。
Yoast b>社交b> Facebook
确保开关设置为“Enabled”，然后上传适当的图像。品牌形象在这里最有效。
在Shopify中设置打开图形标签
大多数Shopify主题从变量中提取OG标签，例如OG:title的标题标签和OG:image的特色图像。
你可以通过Shopify的UI自定义的唯一标签是一个全站的og:image。
进入网上商店>主题>自定义>主题设置>自定义>社交媒体>选择合适的图片。
如果你想看看它是如何设置的，去在线商店>主题>动作>编辑代码>片段>社会元标签。滚动条中的液体。如果需要，您可以编辑代码。
在Wix中设置打开图形标记
Wix从其他变量（如页面的元标题和描述）中提取常见的OG标记。
您可以在“社交分享”设置中为每个页面定制OG的标题、描述和图像。
您也可以设置自定义的全站OG图像。转到主菜单上的Settings > Social Share。
总的来说，Wix使添加OG标记变得容易，因为不需要硬编码任何东西。
在Squarespace中设置打开图形标签
Squarespace使用og:title和og:description的页面标题和元描述。
您可以在逐页的基础上设置自定义og:image。
只要去页面设置>社交图片>上传。
如果需要添加其他OG标签或自定义默认设置，请进入“Page settings > Advanced > Page Header Code Injection”。阅读下面关于手动添加标记的部分，并在那里复制粘贴代码。
手动设置打开图形标签
如果你愿意深入研究网站代码，添加OG标签就像将它们粘贴到网页的部分一样简单。
考虑使用标记生成器工具，如Mega Tags或Web Code Tools，以帮助减少语法错误。
如何测试和调试打开图形标签
现在您已经部署了所有的标记，您需要确保它们按预期工作并准备好共享。
为此，使用以下工具：
Facebook共享调试器
推特卡验证器
LinkedIn Post Inspector
它们都是一样的。它们从页面中提取标签，并显示它在共享时的样子。
测试还有助于防止OG标签未正确显示或提取的问题。
提示
使用og:image:width和og:image:height标签来确保第一次有人分享它时，它是一个完美的片段。在WordPress中，Yoast会自动添加它们。这是它们的语法：
下面是FB共享调试器在操作中的样子：
最重要的是代码片段的外观。如果您错过或错误地设置了不太重要的标签，这不是什么大问题。您可以忽略对fb:app_id等不重要标签的警告
如果有些东西看起来有问题，你更新标签，使用“再次抓取”按钮来获取新的数据。如果在抓取之后没有看到更改，请使用Batch Invalidator清除缓存并重复。
使用Twitter Card Validator和LinkedIn Post Inspector重复此过程，以确保您的内容在所有网络中看起来都是预期的。
旁注。我发现只有Twitterbot遵循robots.txt指令。即使你不允许抓取，Facebook和LinkedIn的抓取工具也可以抓取并显示内容。这是令人惊讶的，但即使只是为了Twitter，也要确保您共享的所有url都可以被抓取。
如何审核打开的图形标签
如果你的网站已经有数百个页面，并且不确定哪些页面已经有Open Graph标签，你可以使用像SEO研究院的网站审计这样的工具来批量检查你的页面。
只需运行爬行程序，然后转到Social标签报告，查看与Open Graph和Twitter Card标签相关的所有问题。
单击标记的警告以查看有关如何修复它的解释和建议。
单击“查看受影响的URL”，您将看到影响每个URL的问题以及相关指标。其中一个指标是自然流量，您可以使用它对表进行排序，并优先考虑要修复的url。
请记住，获得大量流量的页面最有可能被共享。
最终的想法
OG标签对你的社交媒体形象很重要，但没有必要在它们上面花太多时间。
专注于基础知识。添加标签，检查社交媒体预览和调试。
我们错过什么了吗？请留下评论或在Twitter上联系我。