当你在社交媒体平台上分享链接时，它们通常会以丰富的图像和格式化的标题、摘要和链接呈现，而不是纯文本。例如，Twitter 将如何显示本教程系列的链接：
本系列教程的 Twitter 卡截图](assets/social-metadata/html-social-share.png)
您可以通过在 HTML 文档的"
"中包含特定的"<meta>"标记，将这些富媒体社交共享功能添加到您的网站中。有两个主要标准决定了如何格式化这些_metadata_：Twitter Cards和Open Graph protocol。在本教程中，您将学习如何在网页中添加 Twitter Card 和 Open Graph 元数据。
为网页添加 Twitter 卡元数据
Twitter Cards 是 Twitter 使用的一种元数据规范，用于在服务上共享链接时显示丰富的文本、图像和视频。
完整的 Twitter Card 标记规范 有很多选项，但你可以从最基本的信息开始，然后再扩展。
要在网站上添加基本的 Twitter 卡元数据，请在现有的 <head> 和 </head> 标记之间放置以下 <meta> 标记：
1<meta name="twitter:card" content="summary_large_image" />
2<meta name="twitter:site" content="@digitalocean" />
3<meta name="twitter:title" content="Sammy the Shark" />
4<meta name="twitter:description" content="Senior Selachimorpha at DigitalOcean" />
5<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 卡截图](assets/social-metadata/sammy-social-share.png)
有关其他 Twitter 卡标签和选项的更多信息，请访问 Twitter 卡官方文档。
为网页添加开放图谱元数据
Open Graph 协议 是一种元数据开放标准，许多网站都使用它来向用户显示丰富的链接预览。Facebook、LinkedIn 和 Pinterest 等网站使用 Open Graph 显示链接。
Open Graph 的标记与 Twitter Cards 相似：在 HTML 文档的"
"中使用一些""标记。Open Graph 的最小标记集如下所示：1<meta property="og:type" content="article" />
2<meta property="og:title" content="Sammy the Shark" />
3<meta property="og:description" content="Senior Selachimorpha at DigitalOcean" />
4<meta property="og:url" content="https://html.sammy-codes.com/" />
5<meta property="og:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />
将这些标记放入 HTML 文档的"
"部分，并根据需要更新突出显示的部分。您需要的标记有og:type: 所描述内容的 "类型"。一些 "类型 "示例包括 "文章"、"书籍 "和 "简介"。更多信息请参阅官方og:type文档。og:title: 页面的标题。可以是页面的<title>，也可以专门为链接共享而定制。og:description: 页面的简短描述。没有指定的字符限制，但 Twitter 为此规定的 200 个字符的限制是一个很好的指南。og:url: 页面的永久（规范)URL。og:image: 与页面相关联的图片。
有关开放图谱协议的更多信息，请访问开放图谱协议官方网站。
测试网页元数据
您可以使用一些工具来预览元标签在网站上的显示效果。Open Graph Debugger](https://en.rakko.tools/tools/9/)是一个非官方的模拟器，可以同时显示 Twitter Card 和 Open Graph 信息，而且不需要使用账户。
以下官方验证器都要求您在使用前登录其服务：
- Twitter 卡验证器
- Facebook 共享调试器](https://developers.facebook.com/tools/debug/)
- LinkedIn 帖子检查器](https://www.linkedin.com/post-inspector/)
- Pinterest Rich Pins 验证器](https://developers.pinterest.com/tools/url-debugger/)
许多其他网站也有类似的工具。如果某个网站或社区对您或您的企业很重要，请查找其开发人员文档，看看他们是否提供了类似的测试服务。
您现在知道了如何设置一组最基本的元数据，以便在各种社交网站上显示丰富的链接格式。更多详细信息，请参阅 Twitter Cards 和 Open Graph 文档。