社交发现

您只需为每个网页添加几行代码，就可以影响通过社交媒体分享时网站的呈现方式。这可能有助于吸引更多的人访问您的网站，因为提供的预览所包含的信息要比以其他方式提供的信息更加丰富。

Eiji Kitamura

您只需为每个网页添加几行代码，就可以影响通过社交媒体分享时网站的呈现方式。这可能有助于吸引更多的人访问您的网站，因为提供的预览所包含的信息要比以其他方式提供的信息更加丰富。

摘要

  • 使用 schema.org microdata 来提供 Google+ 的页面标题、说明和图片。
  • 使用开放图谱协议 (OGP) 为 Facebook 提供网页标题、说明和图片。
  • 使用 Twitter 信息卡为 Twitter 提供网页标题、说明、图片和 Twitter ID。

您只需为每个网页添加几行代码，就可以影响通过社交媒体分享时网站的呈现方式。这样一来，由于提供的预览所包含的信息要比以其他方式提供的信息更加丰富，因此有助于提高互动度。否则，社交网站将只提供基本信息，而不提供图片或其他有用信息。

您认为哪个广告更有可能被点击？用户容易被图片吸引，如果能提前预览，就会更坚信他们会喜欢自己找到的内容。

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

当社交网络上的某个人想把您的网站分享给自己的朋友时，他们多半会添加一些注释来说明它有多棒，然后再进行分享。但描述网站往往是件麻烦事，并且从网页所有者的观点来看，描述的内容可能抓不住要点。某些服务会对用户可以在备注中输入的字符数作出限制。

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

使用 schema.org + microdata 在 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 部分，但 microdata 则是位于存在上下文的位置。

添加了 itemscope 以定义微数据范围

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

添加 itemtype 以指定您网站的类型

您可以将 itemtype 属性与 itemscope 联用来指定项目的类型。您可以根据网页上的内容类型确定 itemtype 的值。您应该可以在此页面中找到一个相关的链接。

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

itemprop 在作用域中为 itemtype 定义属性。对于向社交网站提供元数据，典型的 itemprop 值为 name、description 和 image。

验证丰富网页摘要

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

结构化数据测试工具

使用开放图表协议 (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 Protocol 官方网站。

验证丰富网页摘要

如需验证 Facebook 上的标记，您可以使用下面这样的工具：

使用 Twitter Card 在 Twitter 上提供丰富摘要

Twitter 卡片是对适用于 Twitter 的开放图谱协议的扩展。它们允许您向包含网页链接的推文添加图片和视频之类的媒体附件。通过添加相应的元数据，可以为包含网页链接的推文添加一张卡片，其中包含您添加的丰富详情。

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

如需使 Twitter 卡片正常运行，您的网域必须获得批准，并且必须包含以 twitter:card（而非 property）属性作为 name 属性的元标记。

一个简单的示例：

<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 在 microdata 与 OGP 之间共享
  • itemprop="image" 使用带有 href 属性的 link 标记，而不是重复使用带有 property="og:image" 的 meta 标记

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