社交发现

您可以在每个网页中添加几行代码，从而影响您的网站在通过社交媒体分享时的显示方式。这有助于为您的网站吸引更多用户，因为预览中会提供比其他方式更丰富的信息。

Eiji Kitamura

您可以通过在每个网页中添加几行代码，来影响您的网站在通过社交媒体分享时的显示方式。这有助于为您的网站吸引更多用户，因为预览中会提供比其他方式更丰富的信息。

摘要

  • 使用 schema.org 微数据为 Google+ 提供网页标题、说明和图片。
  • 使用 Open Graph 协议 (OGP) 为 Facebook 提供网页标题、说明和图片。
  • 使用 Twitter Cards 为 Twitter 提供网页标题、说明、图片和 Twitter ID。

您可以通过在每个网页中添加几行代码，来影响您的网站在通过社交媒体分享时的显示方式。这有助于提供比其他方式更丰富的信息预览，从而提高互动度。 如果没有这些元数据，社交网站将仅提供基本信息，而不会提供图片或其他实用信息。

您认为哪一个更有可能被点击？人们会被图片吸引，并且在提前预览后，会更有信心找到自己喜欢的内容。

使用适当的标记：包含正确的标题、简短说明和图片。添加这些内容有助于提高互动度。
使用适当的标记：包含正确的标题、简短说明和图片。添加这些内容有助于提高互动度。
如果没有正确的标记，则只会包含网页标题。
如果没有适当的标记，则只会包含网页标题。

当社交网络上的用户想要与朋友分享您的网站时，他们可能会添加一些说明，解释该网站有多棒，然后进行分享。 但描述网站往往很繁琐，而且从网页所有者的角度来看，可能会偏离重点。某些服务会限制用户可以在备注中输入的字符数。

通过向网页添加适当的元数据，您可以提供标题、说明和有吸引力的图片，从而简化用户的分享流程。这意味着他们不必花费宝贵的时间（或字符）来描述链接。

使用 schema.org + 微数据在 Google+ 上提供丰富网页摘要

抓取工具会使用多种方法来解析网页并了解其内容。通过使用微数据和 schema.org 词汇，您可以帮助社交网站和搜索引擎更好地了解网页内容。

示例如下：

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

虽然大多数元数据都嵌入在网页的 head 部分，但微数据位于上下文所在的位置。

添加 itemscope 以定义微数据范围

通过添加 itemscope，您可以将该标记指定为有关特定商品的内容块。

添加 itemtype 以定义网站类型

您可以使用 itemtype 属性和 itemscope 指定商品类型。itemtype 的值可以根据网页上的内容类型来确定。您应该可以在此页面中找到相关内容。

添加 itemprop，使用 schema.org 词汇描述每个项

itemprop 用于定义范围内 itemtype 的属性。如需向社交网站提供元数据，典型的 itemprop 值为 name、description 和 image。

验证丰富网页摘要

如需验证 Google+ 上的丰富网页摘要，您可以使用以下工具：

结构化数据测试工具

使用 Open Graph 协议 (OGP) 在 Facebook 上提供丰富网页摘要

Open Graph 协议 (OGP) 为 Facebook 提供必要的元数据，使网页能够具有与其他 Facebook 对象相同的功能。

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

如果将此元数据添加到网页的 head 部分，则在分享网页时，此元数据会提供富媒体搜索结果信息。

使用 og: 命名空间 meta 标记来描述元数据

meta 标记由 property 属性和 content 属性组成。属性和内容可以采用以下值：

属性 内容
og:title 网页的标题。
og:description 网页的说明。
og:url 网页的规范网址。
og:image 分享的帖子中附加的图片的网址。
og:type 一个表示网页类型的字符串。您可以点击此处，找到适合您网页的工具。

这些元标记可向来自社交网站（例如 Facebook）的抓取工具提供语义信息。

了解详情

如需详细了解可以附加到 Facebook 帖子中的内容，请访问 Open Graph 协议官方网站。

验证丰富网页摘要

如需在 Facebook 上验证标记，您可以使用以下工具：

使用 Twitter 卡片在 Twitter 上提供丰富网页摘要

Twitter 卡片是适用于 Twitter 的开放图谱协议的扩展。借助这些卡片，您可以在推文中添加图片和视频等媒体附件，并附上指向您网页的链接。通过添加适当的元数据，包含指向您网页的链接的推文将添加一张卡片，其中包含您添加的丰富详细信息。

使用 twitter: 命名空间元标记来描述元数据

如需让 Twitter Card 正常运行，您的网域必须获得批准，并且必须包含一个元标记，该标记具有 twitter:card 作为 name 属性，而不是 property 属性。

一个简单的示例：

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

通过将 Twitter ID 分配给 twitter:site 的值，Twitter 会将此信息嵌入到分享的帖子中，以便用户可以轻松与网页所有者互动。

Twitter 卡片。

了解详情

如需详细了解 Twitter 卡片，请访问：

验证丰富网页摘要

为了验证您的标记，Twitter 提供了：

最佳实践

鉴于这三种选项，您最好在网页中同时包含这三种选项。示例如下：

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

请注意，微数据和 OGP 共享一些标记：

  • itemscope 位于 head 标记中
  • title 和 description 在微数据和 OGP 之间共享
  • itemprop="image" 使用的是带有 href 属性的 link 标记，而不是重复使用带有 property="og:image" 的 meta 标记

最后，请务必在发布之前验证您的网页在每个社交网站上是否按预期显示。