Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rich Snippets
Search
aco wang
August 06, 2014
Technology
0
55
Rich Snippets
去年底(2013)研究一下 Rich Snippets 和 Microdata,在公司內部分享做了份 PPT,有錯誤再煩請指正。
aco wang
August 06, 2014
Tweet
Share
More Decks by aco wang
See All by aco wang
SEO 入門
acowang
0
50
網頁介面設計模式 - 送出邀約
acowang
1
320
Experience
acowang
0
79
洞察,開啟創新
acowang
0
47
如何把使用者經驗「做」出來
acowang
0
260
使用 jQuery 的小技巧
acowang
0
130
Other Decks in Technology
See All in Technology
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
350
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
240
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
320
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
270
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
860
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.3k
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
820
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Invisible Side of Design
smashingmag
302
51k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Unsuck your backbone
ammeep
671
58k
The Language of Interfaces
destraynor
162
25k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Transcript
Rich Snippets 複合式摘要
Search Engine Result Page
Bulleted Snippets
How to get Bulleted Snippets • 透過頁面上明確、簡潔且一致的 List 架構 呈現資料
– 使用一致性的結構 – 保持資料的簡潔 • 用<ul>, <ol>, <table> 或 <div> 去組織相關的資料 – 試著把 Meta 的 Description 設為 “”
Using <table>
What is Rich Snippets • 如果 Google 瞭解網頁內容,就能建立 Rich Snippets
, 為使用者提供特定查詢的詳細資訊。 活動 評論
Search 台北 音樂會
Microdata • 透過在頁面上設定 Microdata,讓 Google 在 搜尋列表上產生 Rich Snippets Itemscope
Itemtype Itemprop
Rich Snippets from Google Img: http://www.nedpoulter.com/a-visual-guide-rich-snippets/
Schema.org Google Yahoo Microsoft
Whole World Schema
Event 使用指南 • 摘要上顯示的資訊 (ex: 活動名稱和地點) 也必須清楚定義。 這項功能並非用於廣告目的,因此活動名稱不應包含任何 宣傳元素 –
ex: 提供活動價格、號召購買、暗示特價或暫時折扣。 • 有效活動名稱範例 – 台北交響樂團音樂會 – 職涯講座 • 無效的活動名稱 – 洋裝特賣會!(非活動性質的資訊) – 音樂節 - 只要 10 美元!(請改用 tickets 屬性來標記票價)
Microdata 使用規範 • Hierarchy – Itemscope itemtype – Itemprop
itemscope itemtype • IE8+ anchor title – Span Title – <!DOCTYPE html>
Rich Snippets 的優點 • 呈現不一樣的資訊在搜尋列表上,吸引使用者目光 • 提供頁面重要的資訊,讓使用者可以決定是否要 進一步瀏覽 – 減少跳離率(bounce
rate) • 透過 Microdata 加註網頁的資訊 – 可加強 SEO 的效果
Additional Info. • 修改上線後不會馬上出現在搜尋列表上 – 需等待 Google 的搜尋機器擷取分析後 – 真正呈現的資訊等搜尋列表上出現才知道
• Event 的 Rich Snippets 只呈現 3 筆在 SERP 中,而且全 部一樣的資訊會省略,ex:3 筆資料的地點都是在台北市 的話就不會顯示地點
Additional Info. • 盡量讓 Microdata 的加註與呈現給使用者看的內容一致 (少用 display: none) –
必用時可用 meta tag – ex: <meta itemprop="startDate" content="2013-10-25"> • data-vocabulary.org schema.org – 但 Google 範例仍使用 data-vocabulary
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
Thank you