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

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

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


上圖說明~

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

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

SEO 1.0, SEO 2.0, SEO 3.0

SEO 1.0完全依賴Title、Meta Tag來判斷網站的類型，此時SEO技術多在做HTML結構的改善(On-Site SEO)；
SEO 2.0開始注重Backlink、PageRank，將重點轉移至Off-Site SEO；
SEO 3.0搜尋引擎開始修正演算法解決Spam的問題而加入語意搜尋，整個網站的優化才是SEO的優化。

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

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

Rich Snippets(複合式摘要)

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

Rich Snippets是什麼？

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

Rich Snippets的範例

看看Rich Snippets的範例吧！搜尋"creamy cajun chicken pasta"後結果列表出現...

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

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

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

Rich Snippets如何使用？

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

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

• 評論
• 個人資料
• 商品
• 商家與組織
• 食譜
• 活動
• 音樂

關於標記內容的方法皆可在Google 複合式摘要中找到相關資訊。

使用Rich Snippetst的注意事項

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

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

Google Data Highlighter(資料螢光筆)

如果以上的標記方式都覺得太麻煩，可以考慮Google Data Highlighter，不需要撰寫任何程式碼，透過滑鼠簡單操作即可達到標記的目的。
來看看Google 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將提供作者的內容視為較可靠的資料來源，並且，提供作者資訊(名稱、圖片)在搜尋列表上也較能吸引使用者的注意而帶入更多流量。

• Rel-Author
  我們可以將內容的作者連結至Google+的個人檔案。 在
  ...
  宣告 或使用 Google。
  
• Rel-Me
  XFNversion版本的Rel-Author。
  Me on Google+
  
• Rel-Publisher
  
  用於商業行為的內容。
  

Social Meta Tags

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

Facebook - OpenGraph Tags

• og:title
  這是分享內容的標題。可放95個英文字。
  使用語法：
  
• og:type
  這是內容的類別，類別可為blog, website 或 article。
  使用語法：
  
• og:image
  內容預覽圖，為了在FB上做最好的畫面呈現，一般會希望為正方形，大小至少是200x200px，大圖建議寬是1200px。如果沒有做指定，就會由Facebook任意在分享內容上抓預覽圖了。(但你總不會希望抓到的是不相關或是醜醜的圖片吧XD，然後使用者還傻傻的直接分享上去了...)
  使用語法：
  
• og:url 內容的網址。
  使用語法：
  
• og:description 內容的短描述，可以放些吸引人或誘導使用者做某些事情的文字。可放297個英文字。
  使用語法：
  
• fb:admins
  這是讓管理者分析流量、了解哪些人按過讚或分享過這篇內容。
  使用語法：
  更多相關資訊可參考 Facebook Insights。
  

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

Twitter - Twitter Cards

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

• twitter:card
  這是指Card類型，可以選擇summary(預設)、photo或player。
  使用語法：
  
• twitter:url
  內容的網址。
  使用語法：
  
• twitter:title
  標題。可放70個英文字。
  使用語法：
  
• twitter:description
  內容的短描述。可放200個英文字。 使用語法：
  
• twitter:image
  內容預覽圖，正方形且超過大小60x60px，預覽圖建議120x120px，大圖建議280x150px。
  使用語法：
  

更多資訊可參考Twitter Card Documentation。

Google+ - Shema.org

• itemscope="[pageType]"
  類型可選擇Article、Blog、Book、Event、LocalBusiness、Organization、Person、Product 或 Review。
• itemprop="name"
  標題。可放140個英文字。
• itemprop="description"
  內容的短描述。可放185英文字。
• itemprop="image"
  內容預覽圖，建議大小是180x120 pixels，圖片太小則不顯示。

語法可見Google的範例：Snippet

  

Shiny Trinket

  

Shiny trinkets are shiny.

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

樣板整理

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

Minimal

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

Minimum Social Media Tag Template: Article

Standard

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

Standard Social Media Tag Template: Article











<-- --="" 200x200px="" at="" be="" card="" images="" least="" must="" summary="" twitter="">







 

Full Monty

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

Full Social Media Tag Template: Article

Product

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

Product Social Media Tag Template

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

• Twitter Card Validator
• Facebook Debugger
• Google Structured Data Testing Tool
• Pinterest Rich Pins Validator

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

---

延伸閱讀

• Google's Data Highlighter: What If It Conflicts With HTML Markup?
• The On-Page Search Engine Optimization (SEO) That Counts
• How many links per page?

參考資料

• SEO 3.0
• Semantic Web 與 Semantic Search (語意網與語意搜尋)
• Rich Snippets(複合式摘要)
  • Mark Up Your Content Items | Search | Google Developers
  • 什麼是Rich Snippets (複合式摘要)? « Seo搜尋引擎優化 « 台灣搜尋引擎優化與行銷研究院:SEO:SEM
• Google Data Highlighter(資料螢光筆)
  • Google 關於資料螢光筆
  • Google Data Highlighter是什麼? « Seo搜尋引擎優化 « 台灣搜尋引擎優化與行銷研究院:SEO:SEM
  • 資料螢光筆 Data Highlighter 簡易教學
• Social Meta Tags
  • 18 Meta Tags Every Webpage Should Have in 2013
  • Must-Have Social Meta Tags for Twitter, Google+, Facebook and More

---

因為部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags。