如何使用HTML将TwitterCard和OpenGraph社交元数据添加到您的网页

当您在社交媒体平台上共享链接时，它们通常会呈现丰富的图像和格式精美的标题、摘要和链接，而不是纯文本。例如，以下是 Twitter 显示本教程系列链接的方式：

您可以通过在 HTML 文档的 <head> 中包含某些 <meta> 标记来将这些富媒体社交共享功能添加到您的站点。有两个主要标准决定了如何格式化这个 元数据 ：Twitter Cards 和 Open Graph 协议。

在本教程中，您将学习如何将 Twitter Card 和 Open Graph 元数据添加到您的网页。

将 Twitter Card 元数据添加到网页

Twitter Cards 是 Twitter 使用的元数据规范，用于在服务上共享链接时显示富文本、图像和视频。

完整的 Twitter Card 标记规范有很多选项，但您可以从最基本的信息开始，然后从那里扩展。

要将基本的 Twitter Card 元数据添加到您的站点，请将以下 <meta> 标签放在现有的 <head> 和 </head> 标签之间：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@digitalocean" />
<meta name="twitter:title" content="Sammy the Shark" />
<meta name="twitter:description" content="Senior Selachimorpha at DigitalOcean" />
<meta name="twitter:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

请务必使用您自己的信息更新突出显示的部分。让我们来看看我们刚刚添加的每个标签：

twitter:card：此标签指定应显示的 Twitter 卡的类型。 summary_large_image 类型显示带有大图像预览的简短摘要。
twitter:site：您的 Twitter 用户名，或您的网站或公司的用户名。
twitter:title：你想在卡片中使用的标题。这可以匹配您在 <title> 标签中放入的内容，但并非必须如此。
twitter:description：将在标题下显示的页面的简要说明。这应该是最多 200 个字符，并且在显示时可能会被进一步截断。
twitter:image：要显示的图像。大多数标准图像格式（JPG、PNG、GIF）都可以接受，但大小必须小于 5MB。图像可能会自动裁剪以显示在不同大小的卡片中，因此最好将主要焦点放在中心。

此元数据应生成如下所示的 Twitter 卡片：

有关其他 Twitter Card 标签和选项的更多信息，请访问官方 Twitter Cards 文档。

将开放图元数据添加到网页

Open Graph 协议是元数据的开放标准，许多网站使用它向用户显示丰富的链接预览。 Facebook、LinkedIn 和 Pinterest 等网站使用 Open Graph 来显示链接。

Open Graph 的标记类似于 Twitter Cards：HTML 文档的 <head> 中的一些 <meta> 标签。一组最小的 Open Graph 标记如下所示：

<meta property="og:type" content="article" />
<meta property="og:title" content="Sammy the Shark" />
<meta property="og:description" content="Senior Selachimorpha at DigitalOcean" />
<meta property="og:url" content="https://html.sammy-codes.com/" />
<meta property="og:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

将这些标签放在 HTML 文档的 <head> 中，根据需要更新突出显示的部分。您需要的标签是：

og:type：被描述内容的“类型”。一些 type 示例是 article、book 和 profile。更多信息请参见官方 og:type 文档。
og:title：页面标题。这可以是您页面的 <title>，或者您可以专门为链接共享定制它。
og:description：页面的简短描述。没有指定的字符限制，但 Twitter 为此目的限制为 200 个字符是一个很好的指导方针。
og:url：页面的永久（canonical）URL。
og:image：与页面关联的图像。

有关 Open Graph 协议的更多信息，请访问官方 Open Graph 协议网站。

测试网页元数据

您可以使用一些工具来预览元标记在网站上的显示方式。 Open Graph Debugger 是一个非官方的模拟器，可以同时显示 Twitter Card 和 Open Graph 信息，并且不需要帐户即可使用。

以下官方验证器都要求您在使用前登录他们的服务：

许多其他网站也有类似的工具。如果网站或社区对您或您的企业很重要，请查找他们的开发人员文档，看看他们是否提供类似的服务来进行测试。

您现在知道如何设置最小的元数据集以在各种社交网站上显示丰富的链接格式。有关更多详细信息，请参阅 Twitter Cards 和 Open Graph 文档。