如今，几乎每个网站都鼓励访客在社交媒体上分享其页面。我们都见过无处不在的 Facebook 和 Twitter 图标，以及其他一些图标，它们都在恳求被点击。这并不奇怪，因为通过社交媒体分享（互联网版的口碑传播）是企业和个人提高知名度的最有效方法之一。
当用户选择分享这些链接时，网页开发人员的任务是确保关联的网页已做好充分准备，这就是我们现在要研究的内容。Facebook 和 Twitter 是迄今为止最受欢迎的社交媒体平台，因此让我们专注于这两个平台。
在 Facebook 和 Twitter 上分享
Facebook 为开发者提供了多种选择，让他们可以根据网站内容在时间线上显示共享网页。除非另有说明，否则每个网站都默认为名为“网站”的类型，这也是我们将使用的示例。
假设有人分享了一个虚构旅游公司的首页 - Facebook 会像这样显示它
Twitter 也有多种方法来格式化出现在其 feed 中的共享网页，但我们将查看与上面 Facebook 示例非常相似的一种，Twitter 将其称为“带大型图片的摘要卡片”
我们可以看到，每个功能都包含共享网页的多个属性
- 醒目的图片和标题
- 描述
- 域名
专有 <meta> 标签
我们如何指定这些属性？使用 <meta> 标签。当链接被分享时，Facebook 和 Twitter 都会抓取关联的网页并读取其 <meta> 标签以显示相应的信息。
Facebook 使用 <meta> 标签利用 Open Graph 协议，这是一种用于网页的分类系统，它扩展了 HTML5 中已定义的 <meta> 标签。可以在 Open Graph 网站上找到可用 <meta> 标签的完整列表。可供选择的内容很多，这可能会让人有点不知所措，但实际上只需要四个
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />这篇文章的先前版本列出了这四个
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">所以我们要么错了，要么它发生了变化。
Twitter 有自己的 <meta> 标签，类似于 Open Graph 协议，但使用“twitter”前缀而不是“og”。与 Facebook 一样，也只需要几个。我们从 Twitter 请求的显示格式类型也会被指定
<meta name="twitter:title" content="European Travel Destinations ">
<meta name="twitter:description" content=" Offering tour packages for individuals or groups.">
<meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">Facebook 和 Twitter 都提供了关于如何使用上述 <meta> 标签的指南。它们彼此非常相似，尽管在解释上可能有些主观。请注意，就我们的目的而言，Facebook 在使用“对象”一词时指的是共享的网页
| 标题 | 对象的标题、标题或名称。 | 相关内容的简洁标题。[最多 70 个字符。] |
| 描述 | 对象的简短描述或摘要。[2 到 4 个句子。] | 简洁地概括内容的描述，适合在推文中呈现。您不应将标题重复用作描述，也不应使用此字段来描述网站提供的通用服务。[最多 200 个字符。] |
| 图片 | 您对象的图像的 URL。它应该至少为 600×315 像素，但建议使用 1200×630 或更大的尺寸（最多 5MB）。保持接近 1.91:1 的纵横比，以避免裁剪。 | 表示页面内容的唯一图像的 URL。您不应使用通用图像，例如您的网站徽标、作者照片或跨越多个页面的其他图像。此卡片的图像宽度应至少为 280 像素，高度应至少为 150 像素。图像大小必须小于 1MB。 |
| URL | 您页面的规范 URL。这应该是未修饰的 URL，不包含会话变量、用户识别参数或计数器。 |
由于这些专有 <meta> 标签最终指的是相同的元素，因此如果有一种方法可以协调这两个标签，那将是理想的。幸运的是，确实有。
协调
拥有多个看起来冗余的 <meta> 标签不会造成任何损害。过多的信息永远不会伤害任何人，除非它会向 HTML 文件中添加一些额外的字节。
但就我们的目的而言，为了简洁起见，我们可以利用 Twitter 允许我们用自己的标签替换 Open Graph <meta> 标签这一事实。最终，除了需要指定显示格式外，不需要任何自定义的 Twitter <meta> 标签。这给了我们以下内容，这可以被认为是使网页适合在社交媒体上分享所需的 <meta> 标签的最低限度
<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="article" />
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">协调图像指南很简单：遵循 Facebook 的建议，将最小尺寸设置为 1200×630 像素，并将纵横比设置为 1.91:1，但遵守 Twitter 的文件大小要求，即小于 1MB。
验证 <meta> 标签
如果对减少到这五个标签的合理性有任何疑问，我们可以使用有帮助的 Facebook 分享调试器 和 Twitter 卡片验证器。这两个工具都会抓取公共服务器上托管的任何网页以查找相关的 <meta> 标签，并显示其在共享时的外观。它还会列出任何错误并提供建议。那么，我们在这个特定示例中做得如何呢？Twitter 似乎对这些内容没问题，但另一方面，Facebook 将一项内容列为警告
这为我们接下来要讨论的内容提供了一个完美的过渡……
社交媒体分析
Facebook 指出的是，如果您要使用他们的分析工具（他们称之为 域名洞察），则必须提供与您的帐户关联的唯一 ID 号码。然后 标签将如下所示
<meta property="fb:app_id" content="your_app_id" />Twitter 有类似的功能，他们称之为 Twitter 卡片分析。为了充分利用此工具，Twitter 建议使用以下 标签，其中包含您希望与共享网页关联的 Twitter 用户名
<meta name="twitter:site" content="@website-username">
但是请记住，如果您对使用这些分析工具没有特别的兴趣，那么省略上述两个 <meta> 标签不会影响共享网页在 Facebook 时间线或 Twitter feed 中的显示方式。
其他内容？
Facebook 文档建议使用一个额外的 <meta> 标签，尽管它不是必需的。一个表示共享页面所在的网站名称的标签
<meta property="og:site_name" content="European Travel, Inc.">Twitter 也建议使用另一个 标签，该标签是推荐的，但不是必需的
<meta name="twitter:image:alt" content="Alt text for image">这为视力障碍者提供了替代的图像描述。
最终标记
应该就是这样。重申一下，当您查看 Facebook 和 Twitter 关于共享网页的文档时，还有许多其他可用的 标签可用于指定不同类型的内容。但是，一般来说，以下内容就足够了
<!-- Essential META Tags -->
<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="article" />
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">
这太有帮助了，谢谢！
一些验证器缺少一个微小的细节
除非类型与“网站”不同，否则它是冗余的。我们不应该仅仅为了让随机的SEO验证器满意而包含代码。至少只要我们能避免它。
这是一个非常重要的元标签。根据共享调试器（https://developers.facebook.com/tools/debug/sharing/），Facebook 要求使用 og:type 属性。
顺便说一句，非常棒的文章，非常有用！
有趣的是，只需要5个元标签！我以前不知道。
实际上，虽然FB告诉你需要 og:title 和 og:description，但我上次检查时发现它们并不是必需的，而且确实不应该。
HTML 已经有一个合适的 title 和 meta:description 标签，FB 可以完美地使用它们（尽管它们的抓取工具本身存在缺陷）。因此，专有标签完全是冗余的，除非你想在FB中使用不同的标题/描述。我怀疑警告的唯一目的是夸大其专有“系统”的重要性。
og:url 同样是冗余的，因为它通常与你的规范 URL 相同（我认为现在或多或少是标准的），FB 实际上可以很好地识别这一点。如果你没有它，FB 应该并且将会使用共享的 URL（至少在我上次检查时是这样）。
唯一有用的一个是 og:image——它实际上非常重要，因为FB在自行查找合适的图片方面做得非常糟糕。
我没有检查，但如果 Twitter 也是一样（因为它们甚至使用 og 标签），我会感到非常惊讶。
如果你喜欢干净的代码，我绝对建议不要使用冗余的代码/内容和没有明确且“可衡量”目的的元标签。它们毫无用处，确实有害（即使只是一点点）。最糟糕的是：如果你停止保持警惕并开始使用“仅仅几个”（没有认真斗争），大多数代理机构/客户对越来越模糊的“SEO-”元标签的需求将会上升，你的地位将会下降，你的代码最终将充斥着无用的垃圾。
这个网页的标题是
The Essential Meta Tags for Social Media | CSS-Tricks，但在共享时，你希望显示一个简洁的标题，例如The Essential Meta Tags for Social Media，而底部将显示css-tricks.com作为网站。这仅仅是为什么你想要使用正确的 Open Graph 标题的一个例子。更不用说 OG 元标签也被一些其他网站或应用程序（例如 Telegram 或 WhatsApp）识别，这些网站或应用程序可能无法像 Facebook 那样“很好地”抓取代码（无论“很好地”是什么意思）。 :)
这并非专门针对社交元标签，但可能会有用。它基本上是一个文档，显示了
<head>中可以/应该包含的所有内容，还包括可用的社交元标签。https://github.com/joshbuchea/HEAD
伙计！！！@Todd，那个链接太棒了。
此外，@Chris 和 @Adam，感谢这篇文章！！！我正试图弄清楚差异以及在不冗余的情况下需要什么，然后谷歌决定向我展示这篇文章的链接。非常有帮助。
不错的文章！我不知道 Twitter 在其专有格式缺失时实际上会回退到 Open Graph。
我希望此页面上有一个 Twitter 分享按钮。
好文章，不知道FB和Twitter有这些工具。我发现 WordPress 中的 Yoast SEO 可以很好地处理 Twitter、Facebook、Pinterest 甚至 Google+ 的这些标签。它无需在每个页面/帖子的多个位置输入标题和描述，这一点很有帮助。但是，我确实使用了mu-插件来隐藏每次更新后的 Yoast 的提示。
我不知道 Twitter 使用 OG 作为后备，但这很有道理，如果他们想要分享有吸引力的内容。
你是否看过 Jeremy Keith 关于如何使之更加精简的文章？https://adactio.com/journal/9881
总的来说，Twitter 在元元素上使用 name 属性，而 Facebook (OG) 使用 property 属性，这意味着你可以在同一个项目上同时使用它们并涵盖所有方面。
我认为这种情况不会发生，但如果 Twitter 决定放弃对 OG 的支持，只需混合使用标签名称即可。例如
其他人能插一句吗？这两件事结合在一起是否合法，或者会有什么后果？
我认为 Twitter 员工不会来追你:)，但我找到了这个链接，它可能对你的问题很有趣：http://stackoverflow.com/a/28319985/1101509
不错的概述！你在不同的 OpenGraph 标签中有时使用
meta property=""，有时使用meta name=""。这些是可以互换的，还是它们之间有什么区别？在最终标记中：斜线（接近末尾）是必需的吗？
在 HTML 中不是（可选），但在 XHTML 中以前需要尾部斜线。在 JSX 中也是必需的。
我建议添加
og:image:width和og:image:height，因为两者都有助于 Facebook 在第一次共享链接时获取 og:image 的大小。如果这两个值都足够大，即使 Facebook 用户在图像能够获取之前就共享了链接，Facebook 也会为大型预览图像预留空间。
如果这两个值都没有设置，Facebook 会在这种情况下回退到较小的 og:image。
一封匿名邮件说
我刚尝试在我的网站上实现它，发现除非包含以下内容，否则 Twitter 不会显示大型摘要图像
我没有确认 Twitter 确实无法在没有这些内容的情况下显示图像（这似乎不太可能），我确实确认了这些内容是真实的，并且文档中写道