粉多任務 x 一品禪 - 使用Microdata標記的網頁實例
什麼是Microdata?
有興趣的可以參考從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags,這些標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容,進而達到搜尋時呈現我們所提供的資料的方法。
畢竟直接告訴搜尋引擎重點在哪裡--告訴它這是一篇文章的標題、內文、圖片和圖片說明,或告訴它這是商品區塊、這些文字是商品名稱或廠商名稱、告訴它這些數字是價錢(而非無意義的數字),是比較有效率和精準的。而文中也說明標記如何使用和測試。
範例
粉多任務的產品對於SEO是重視的,因此自家產品都會對SEO做加強,除了熟知的Ranking Factor(Ref:SEO Ranking Factors – Rank Correlation 2013 for Google US)外,這次在一品禪頁面上標註Microdata也花了不小的工。
粉多任務 x 一品禪
對於文章的每一個段落都標註此段落的標題、內文、圖片
<div class="article" itemscope="" itemtype="http://schema.org/article">
<h2 itemprop="name">一品禪 素顏手工水餃,讓你吃得好也吃得巧。</h2>
<div class="content">
<div class="thumbnail">
<img src="../images/thumbnail_1.png" title="一品禪 素顏手工水餃,讓你吃得好也吃得巧。" alt="一品禪 素顏手工水餃,讓你吃得好也吃得巧。" itemprop="image">
</div>
<div class="descriptin" itemprop="description">
《一品禪》傳承中國傳統四季食補的禪學,結合手作工序和當令蔬菜,捏出一顆顆兼具美味及養生的全素食手工水餃。拒絕摻入化學物危害消費者健康、堅持不添加人工素料矇騙消費者味蕾,期待透過每一雙手的溫度,傳達「吃得好也要吃得巧,把健康食物變美味」的理念,讓消費者在繁忙的生活中,也能吃到快速又養生的好料理。
</div>
</div>
</div>
商品區塊:指名此區塊是單一商品,且告知商品名稱、廠商名稱、圖片、價格
<div class="item" itemscope="" itemtype="http://data-vocabulary.org/Product">
<div class="content">
<div class="brand" itemprop="brand">一品禪</div>
<div class="thumbnail">
<a href="#" title="高麗菜純手工水餃(螺旋藻皮)" target="_blank">
<img itemprop="image" src="../images/product_1.jpg" title="高麗菜純手工水餃(螺旋藻皮)" alt="一品禪 高麗菜純手工水餃(螺旋藻皮)">
</a>
</div>
<h2 itemprop="name">高麗菜純手工水餃(螺旋藻皮)</h2>
<div class="price">特價$
<span class="number" itemprop="price">155</span>
</div>
</div>
</div>
當然也有標明此頁面的Navigation和Footer,因為這裡放了我們的重要連結與Anchor Text。
檢測工具
HTML撰寫完畢一定要做測試:Google Structured Data Testing Tool
成效
4/18下午一上線,搜尋關鍵字一品禪,餃色介紹、關於一品禪就分別出現在SERPs第一頁的第7筆、第8筆。另外搜尋關鍵字手工水餃 螺旋藻,餃色介紹出現在SERPs第一頁的第3筆。由於這次做了Microdata的標記處理,讓搜尋引擎有效讀懂,而且將每個頁面都打在SERPs上,不管是時效和準確度都大大提升。
當然有很多地方是不足或不夠好的,大家也都可以指正或討論噢~
附註
我們的設計和企劃真的太厲害啦!有沒有覺得網站好美,文案也好美?
推薦閱讀
- SEO Ranking Factors – Rank Correlation 2013 for Google US
- 從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags
- 初探 JSON-LD & microdata
因為部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例。
留言