從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags

search and social

搜尋引擎提供使用者想要的資訊,而社群平台提供這些資訊更多露出的機會。我們希望將優質的內容提供給使用者,並利用社群的力量推廣出去。

搜尋引擎不但想提供資訊,更想精準地回答問題-如何讓搜尋引擎了解網頁內容呢?於是「Semantics」(語意學)便成為 SEO 的重要議題。漸漸的,搜尋引擎可以了解網頁的內容,於是能透過各種技術將適當的內容呈現給使用者來解決各種問題。

SEO, cycle

上圖說明

  1. 使用者對搜尋引擎輸入字串。
  2. 搜尋引擎找出網路上符合者需求的資訊。
  3. 對於使用者與搜尋引擎的影響
    • 資訊觸發使用者更多想法,提出更多需求或想要改進。
    • 搜尋引擎希望提供更適合、更有用的資訊而不斷改進演算法、結合更多技術等。

這就變成一個正向的循環,科技刺激人類的思考,而思考推動技術的演進。

SEO 1.0, SEO 2.0, SEO 3.0

Semantic Web 與 Semantic Search(語意網與語意搜尋)

搜尋引擎必須藉由標記符號來了解網頁的內容,進而將符合搜尋條件的結果呈現在搜尋結果中。而標記方式有微資料、微格式、RDFa,搜尋引擎了解網頁內容,就會將結果呈現得更為精準豐富,即 Rich Snippets(複合式摘要)。

Rich Snippets(複合式摘要)

Rich Snippets 是指在自然搜尋結果列表中,Google 為了讓使用者能夠更清楚的瞭解搜尋結果中的每一個項目到底是什麼內容的網頁,而顯示比原先更多資訊的區塊。

什麼是 Rich Snippets?

我們來看看 Google 如何介紹 Rich Snippets。

Introduction to Rich Snippets

Rich Snippets 的範例

看看 Rich Snippets 的範例吧!搜尋「creamy cajun chicken pasta」後結果列表出現…

搜尋結果, creamy cajun chicken pasta

一般的搜尋結果會出現的摘要(Snippets)大概是這樣: snippets

而 Rich Snippets 是如下的呈現,此例中多了評價等資訊。

搜尋結果, rich snippets, creamy cajun chicken pasta

由於多了更多資訊提供給使用者,使用者可以判斷那些搜尋結果是他想要的。當我們正確呈現給使用者想要的東西時,同時也帶入得更多的流量。

如何使用 Rich Snippets?

我們連到剛剛搜尋到的網站 Creamy Cajun Chicken Pasta,並看看它的原始碼。

AggregateRating

它使用了微資料(Microdata) 的方式來標記評分,所以在搜尋列表上可以看到這樣的資訊。Google 提供三種標記格式 - 微資料、微格式、RDFa,其中「微資料」是 Google 的建議選項。另外,Google 目前支援以下內容類型的 Rich Snippets

關於標記內容的方法皆可在 Google 官方說明網站 - Mark Up Your Content Items 中找到相關資訊。

使用 Rich Snippets 的注意事項

如果使用了 Rich Snippets 的標記方式,但卻在搜尋結果列表上沒有看到正確的顯示,Matt Cutts 做了以下的解答。

How long does it take for rich snippets to appear?

Matt Cutts 提到,只要正確的使用標記方式,並使用結構化資料測試工具驗證提交,請不要擔心並耐心等候,因為大約必須等待一~兩個月的確認作業,才會在自然搜尋中顯示出來。

Google Data Highlighter (資料螢光筆)

如果以上的標記方式都覺得太麻煩,可以考慮 Google Data Highlighter,不需要撰寫任何程式碼,透過滑鼠簡單操作即可達到標記的目的。

來看看Google Data Highlighter的介紹影片。

Introduction to Data Highlighter Google Data Highlighter 是 Google 在 2012 年 12 月所推出來的網站管理工具,用來標示活動方面的訊息,讓 Google 可以藉此了解網站上活動訊息的資料結構。原本只支援英文的活動訊息,到了 2013 年 2 月,便開始支援所有的語言。使用方法可參考官網說明 - Google 關於資料螢光筆, 阿德雷德的資料螢光筆 Data Highlighter 簡易教學也有詳細解說。

以上我們看到了從原始的搜尋到現今結合社群嶄露資訊的方式,以下會詳細解說這些標記符號的定義、用法和如何放到我們的網站(產品)。

Usual Tags(一般常用的標記符號)

18 Meta Tags Every Webpage Should Have in 2013 這篇文章從一般標記符號到現今使用的社群Tag做了詳細的總整理。我們先從一般的標記符號開始看吧!

Title、Meta Description

關於 On-Page SEO 在網路上有非常多文章在探討 Title、Meta Description 的意義與用法,The On-Page Search Engine Optimization (SEO) That Counts 這篇文章做了相當好的整理並提供範例。其中我想補充的是注意每一頁的 link 數(建議低於 100),這原先當然和資料庫的欄位儲存限制有關,但現在是以使用者經驗和 link juice 的分配為主要考量。

Authorship Markup

如果你是搜尋引擎,你會希望將怎樣的文章放在搜尋列表的最前方?Google 將提供作者的內容視為較可靠的資料來源,並且,提供作者資訊(名稱、圖片)在搜尋列表上也較能吸引使用者的注意而帶入更多流量。

Social Meta Tags

社群網站是一個好的呈現資料的地方,但原始給搜尋引擎使用的 Meta Tags 已經不夠用了,因此我們將使用這些社群平台提供的 Meta Tags,不僅可針對各個平台做最佳呈現(標題、描述、圖片),也可因最佳呈現而得到使用者的共鳴,獲得更多的流量。

Facebook - OpenGraph Tags

基本上我們都希望可以將內容發佈給愈多使用者愈好,而不同類型的使用者也有所偏好的平台,所以我們不放過任何一種社群管道,除了 Facebook,當然還有 Twitter、Google+。

Twitter - Twitter Cards

大致上語法和 Facebook 的 OpenGraph Tags 相同,只是標籤名稱不同而已。

更多資訊可參考 Twitter Card Documentation

Google+ - Shema.org

語法可見 Google 的範例:Snippet

<body itemscope="" itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
  <div itemprop="description">Shiny trinkets are shiny.</div>
</body>

Google+ 找尋資訊的優先順序如下: Schema.org > Facebook OpenGraph > 一般常用的標記符號 > 從頁面內容中猜測。

樣板整理

在這篇文章 Must-Have Social Meta Tags for Twitter, Google+, Facebook and More中,整理了 Twitter、Facebook、Google+ 和 Pinterest 所使用的標籤,並製作成一個 partial view 可直接放到網頁中使用。其中,又再整理成四種樣板 Minimal、Standard、Full Monty 與 Product。

Minimal

最精簡的版本。基本上 Title Tag、Meta Description 是適用於各個平台的,只是有沒有做最佳化的呈現而已。簡單使用 Facebook Open Graph、Twitter Card。

Minimum Social Media Tag Template: Article

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

Standard

包含 Title Tag、Meta Description(適用各個平台)、基本 Twitter Summary Card、Twitter 預覽圖最佳化、Facebook Open Graph、Facebook Page Insights(管理者分析用)。

Standard Social Media Tag Template: Article

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

Full Monty

適用於 Google+ 與搜尋結果 Rich Snippets 最佳化、Twitter Card+ 大圖顯示、Facebook Open Graph、Facebook Page Insights(管理者分析用)。

Full Social Media Tag Template: Article

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Google Authorship and Publisher Markup -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href=”https://plus.google.com/[Google+_Page_Profile]"/>

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

Product

用於商品頁,和上面的 article 類型基本上是相同的,但因為陳述主題為商品,所以在某些地方略做修改。

Product Social Media Tag Template

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Product">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.html">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />

使用這些 Tags 必須要做最後的測試。

SEO 是高度競爭下的產物,當然好的內容是必要的,SEO 只是推動這些內容到最佳呈現的手段而已。但這些手段卻著實影響我們的資訊來源,甚至生活…

後記

(2017/03/25 更新)

搜尋「pusheen 露天」

露天拍賣-商品頁-Rich Snippets

搜尋「pusheen 外套」

露天拍賣-商品頁-Rich Snippets

延伸閱讀

參考資料


這篇文章的原始位置在這裡-從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus