如何用HTML将Twitter卡片和Open Graph社交元数据添加到你的网页上

后端之巅
2,051 阅读4分钟

当你在社交媒体平台上分享链接时，它们通常会以丰富的图像和格式良好的标题、摘要和链接来呈现，而不是纯文本。例如，下面是Twitter如何显示这个教程系列的链接。

screenshot of the Twitter Card for this tutorial series

你可以通过在你的HTML文档的<head> ，包括某些<meta> 标签，将这些富媒体社会共享功能添加到你的网站。有两个主要的标准来决定如何格式化这种_元数据_。Twitter卡片和Open Graph协议。

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

将Twitter卡片元数据添加到网页上

Twitter卡片是Twitter使用的一种元数据规范，当链接在服务上被分享时，可以显示丰富的文本、图像和视频。

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

要在你的网站上添加基本的Twitter Card元数据，在你现有的<head> 和</head> 标签之间放置以下<meta> 标签。

<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卡片。

screenshot of the Twitter Card for Sammy’s Site

关于其他Twitter卡片标签和选项的更多信息，请访问官方Twitter卡片文档。

将Open Graph元数据添加到一个网页上

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

开放图谱的标记与Twitter卡片类似：在你的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 ：该页面的永久_（_规范）URL。
  • og:image ：与该页面相关的图像。

关于Open Graph协议的更多信息，可以在Open Graph协议的官方网站上找到。

测试网页元数据

你可以使用一些工具来预览你的元标签在网站上的显示情况。Open Graph Debugger是一个非官方的模拟器，可以同时显示Twitter Card和Open Graph信息，而且不需要账户就可以使用。

以下官方验证器都需要你在使用前登录其服务。

许多其他网站也有类似的工具。如果一个网站或社区对你或你的企业很重要，可以找找他们的开发者文档，看看他们是否提供类似的服务来测试。

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

avatar
文章
阅读
粉丝