社交探索

只要在每個網頁中加入幾行程式碼，就能透過社群媒體分享網站外觀。這樣一來，您就能提供更豐富的預覽資訊，吸引更多使用者造訪網站。

Eiji Kitamura

在每個頁面中加入幾行程式碼，即可透過社群媒體改變網站的顯示方式。這樣一來，您就能提供更豐富的預覽資訊，吸引更多使用者造訪網站。

摘要

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

雖然大多數中繼資料都嵌入網頁的標頭部分，但微資料會存在於上下文中。

新增 itemscope 以定義微資料範圍

新增 itemscope 後，您可以將標記指定為特定項目的內容區塊。

新增 itemtype 來定義網站類型

您可以使用 itemtype 屬性搭配 itemscope，指定項目類型。itemtype 的值可依據網頁上的內容類型決定。你可以在這個頁面中找到相關的內容。

新增 itemprop，使用 schema.org 詞彙描述每個項目

itemprop 會定義範圍內 itemtype 的屬性。用於提供社交網站的中繼資料時，一般的 itemprop 值為 name、description 和 image。

驗證複合式摘要

如要驗證 Google+ 上的複合式摘要，可以使用下列工具：

結構化資料測試工具

使用 Open Graph 通訊協定 (OGP) 在 Facebook 提供複合式摘要

Open Graph Protocol (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">

當你在網頁的標頭部分加入這項中繼資料時，系統會在分享網頁時提供豐富的摘要資訊。

使用 og: 命名空間 meta 標記描述中繼資料

meta 標記包含 property 屬性和 content 屬性。屬性和內容可採用下列值：

屬性 內容
og:title 網頁標題。
og:description 網頁說明。
og:url 網頁的標準網址。
og:image 共用貼文中附加圖片的網址。
og:type 指出網頁類型的字串。如要找出適合網頁的字體，請按這裡。

這些中繼標記會向 Facebook 等社群網站的檢索器提供語意資訊。

瞭解詳情

如要進一步瞭解如何附加至 Facebook 貼文，請造訪官方的 Open Graph 通訊協定網站。

驗證複合式摘要

如要在 Facebook 上驗證標記，可使用下列工具：

使用 Twitter 資訊卡在 Twitter 上提供豐富摘要

Twitter Card 是 適用於 Twitter 的開放式圖表通訊協定的延伸功能。你可以在推文中加入圖片和影片等媒體附件，並附上網頁連結。只要新增適當的中繼資料，內含您網頁連結的 Twitter 推文就會新增一張資訊卡，其中包含您所加入的詳盡詳細資料。

使用 twitter: 命名空間中繼標記來描述中繼資料

如要讓 Twitter 資訊卡正常運作，網域必須獲得核准，且必須包含使用 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 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 標記

最後，請務必在發布前驗證網頁在各個社群網站上的顯示方式是否符合預期。