社交探索

只要在每個網頁中加入幾行程式碼，即可在透過社交媒體分享時，影響網站呈現的效果。這樣一來，預覽功能就能提供比其他更豐富的資訊，吸引更多人瀏覽網站。

Eiji Kitamura

在各網頁加入幾行程式碼，即可影響透過社群媒體分享時的網站呈現方式。比起其他取得資訊，這種預覽方式可提供更詳細的資訊，吸引更多使用者造訪網站。

摘要

  • 使用 schema.org 微資料提供 Google+ 的網頁標題、說明和圖片。
  • 使用 Open Graph 通訊協定 (OGP) 提供 Facebook 專用的網頁標題、說明和圖片。
  • 使用 Twitter Card 提供網頁標題、說明、圖片和 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 Card 提供 Twitter 摘要

Twitter Card 是 Twitter 適用的 OpenGraph 通訊協定的擴充功能。您可以利用該網頁的連結，在 Tweet 訊息中加入圖片和影片等媒體附件。加入適當的中繼資料後，含有您網頁連結的 Tweet 訊息就會新增卡片，其中包含您所新增的詳盡詳細資料。

使用 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 Card。

瞭解詳情

如要進一步瞭解 Twitter Card，請造訪：

驗證網站簡介

為了驗證標記，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 標記
  • 微資料和 OGP 會共用 title 和 description
  • itemprop="image" 使用帶有 href 屬性的 link 標記，而不是搭配 property="og:image" 重複使用 meta 標記

最後，在發布之前，請務必確認你的網頁在各個社群媒體網站上都能正常顯示。