Rich Snippets 複合式摘要

18
Rich Snippets 複合式摘要

description

去年底(2013)研究一下 Rich Snippets 和 Microdata,在公司內部分享做了份 PPT,有錯誤再煩請指正。

Transcript of Rich Snippets 複合式摘要

Page 1: Rich Snippets 複合式摘要

Rich Snippets

複合式摘要

Page 2: Rich Snippets 複合式摘要

Search Engine Result Page

Page 3: Rich Snippets 複合式摘要

Bulleted Snippets

Page 4: Rich Snippets 複合式摘要

How to get Bulleted Snippets

• 透過頁面上明確、簡潔且一致的 List 架構呈現資料

– 使用一致性的結構

– 保持資料的簡潔

• 用<ul>, <ol>, <table> 或 <div> 去組織相關的資料

– 試著把 Meta 的 Description 設為 “”

Page 5: Rich Snippets 複合式摘要

Using <table>

Page 6: Rich Snippets 複合式摘要

What is Rich Snippets

• 如果 Google 瞭解網頁內容,就能建立 Rich Snippets ,為使用者提供特定查詢的詳細資訊。

活動

評論

Page 7: Rich Snippets 複合式摘要

Search 台北 音樂會

Page 8: Rich Snippets 複合式摘要

Microdata

• 透過在頁面上設定 Microdata,讓 Google 在搜尋列表上產生 Rich Snippets

Itemscope

Itemtype

Itemprop

Page 10: Rich Snippets 複合式摘要

Schema.org

Google

Yahoo

Microsoft

Page 11: Rich Snippets 複合式摘要

Whole World Schema

Page 12: Rich Snippets 複合式摘要

Event 使用指南

• 摘要上顯示的資訊 (ex: 活動名稱和地點) 也必須清楚定義。這項功能並非用於廣告目的,因此活動名稱不應包含任何宣傳元素– ex: 提供活動價格、號召購買、暗示特價或暫時折扣。

• 有效活動名稱範例– 台北交響樂團音樂會

– 職涯講座

• 無效的活動名稱– 洋裝特賣會!(非活動性質的資訊)

– 音樂節 - 只要 10 美元!(請改用 tickets 屬性來標記票價)

Page 13: Rich Snippets 複合式摘要

Microdata 使用規範

• Hierarchy

– Itemscope itemtype

– Itemprop itemscope itemtype

• IE8+ anchor title

– Span Title

– <!DOCTYPE html>

Page 14: Rich Snippets 複合式摘要

Rich Snippets 的優點

• 呈現不一樣的資訊在搜尋列表上,吸引使用者目光

• 提供頁面重要的資訊,讓使用者可以決定是否要進一步瀏覽

– 減少跳離率(bounce rate)

• 透過 Microdata 加註網頁的資訊

– 可加強 SEO 的效果

Page 15: Rich Snippets 複合式摘要

Additional Info.

• 修改上線後不會馬上出現在搜尋列表上– 需等待 Google 的搜尋機器擷取分析後

– 真正呈現的資訊等搜尋列表上出現才知道

• Event 的 Rich Snippets 只呈現 3 筆在 SERP 中,而且全部一樣的資訊會省略,ex:3 筆資料的地點都是在台北市的話就不會顯示地點

Page 16: Rich Snippets 複合式摘要

Additional Info.

• 盡量讓 Microdata 的加註與呈現給使用者看的內容一致(少用 display: none)– 必用時可用 meta tag

– ex: <meta itemprop="startDate" content="2013-10-25">

• data-vocabulary.org schema.org– 但 Google 範例仍使用 data-vocabulary

Page 17: Rich Snippets 複合式摘要

Reference

• Rich Snippets– 關於複合式摘要和結構化資料– Rich Snippets Tools– http://www.nedpoulter.com/a-visual-guide-rich-snippets/

• Schema.org– schema.org– Markup Example

• 選擇使用 Microdata– http://goo.gl/RaK6SO– http://goo.gl/Sfp9ua

• Bulleted Snippets– http://moz.com/blog/how-do-i-get-googles-bulleted-snippets– http://insidesearch.blogspot.tw/2011/08/new-snippets-for-list-pages.html– http://www.ifinity.com.au/2011/11/01/Google_adds_Snippets_for_Bulleted_Lists_Search_Engine_Result

Page 18: Rich Snippets 複合式摘要

Thank you