在 HTML 上添加 Twitter Card 和 Open Graph 社媒标签

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

您可以通过在 HTML 文档的 中包含某些 标记，将这些富媒体社交共享功能添加到您的站点。有两个主要标准决定如何格式化此元数据：Twitter Cards 和 Open Graph 协议。
在本教程中，您将学习如何将 Twitter Card 和 Open Graph 元数据添加到您的网页。

将 Twitter Card Metadata 添加到网页

Twitter Cards 是 Twitter 用于在服务上共享链接时显示丰富的文本、图像和视频的metadata 规范。
完整的 Twitter Card 标记规范有很多选项，但可以从最基本的信息开始，然后再扩展。
要将基本的 Twitter Card metadata 添加到站点，将以下 标记放在现有的 和 标记之间：

<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 Card 类型。summary_large_image 类型显示带有大图像预览的简短摘要。
• twitter:site：您的 Twitter 用户名，或您的网站或公司的用户名。
• twitter:title：您希望在卡片中使用的标题。这可以与您在
• twitter:description：将在标题下显示的页面的简短描述。这应该是最多 200 个字符，并且在显示时可能会被进一步截断。
• twitter:image: 要显示的图像。大多数标准图像格式（JPG、PNG、GIF）都可以接受，但大小必须小于 5MB。图像可能会自动裁剪以显示在不同大小的卡片中，因此最好将主要焦点放在中央。

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

将 Open Graph Metadata 添加到网页

Open Graph 协议是元数据的开放标准，许多网站使用它来向用户显示丰富的链接预览。 Facebook、LinkedIn 和 Pinterest 等网站使用 Open Graph 来显示链接。
Open Graph 的标记类似于 Twitter Card：HTML 文档 中的一些 标记。下面显示了一组最小的 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 文档的 中，根据需要更新突出显示的部分。您需要的标签是：

• og:type：被描述内容的“type”。一些 type 示例是 article、book 和 profile。
• og:title：页面的标题。这可以是您页面的
• og:description：页面的简短描述。没有特定的字符限制，但 Twitter 对此的 200 个字符限制是一个很好的指导方针。
• og:url：页面的永久（规范）URL。
• og:image：与页面关联的图像。

测试网页元数据

您可以使用一些工具来预览元标记在网站上的显示方式。 Open Graph Debugger 是一个非官方模拟器，可以同时显示 Twitter Card 和 Open Graph 信息，并且不需要帐户即可使用。
以下官方验证器都要求您在使用前登录他们的服务：

• Twitter Card validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector
• Pinterest Rich Pins Validator
  许多其他站点也有类似的工具。如果网站或社区对您或您的企业很重要，请查找他们的开发人员文档，看看他们是否提供类似的服务来进行测试。
  您现在知道如何设置最小的元数据集以在各种社交网站上显示丰富的链接格式。