粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例

粉多任務 x 一品禪 - 使用Microdata標記的網頁實例

什麼是 Microdata?

Google 官方的定義

Microdata is a specification to embed machine-readable data in HTML documents. Microdata consists of name-value pairs (known as items) defined according to a vocabulary. A collection of commonly used markup vocabularies are provided by schema.org.

白話就是寫給搜尋引擎的 bot 看的重點整理。

有興趣的可以參考從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags,這些標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容,進而達到搜尋時呈現我們所提供的資料的方法。 畢竟直接告訴搜尋引擎重點在哪裡-告訴它這是一篇文章的標題、內文、圖片和圖片說明,或告訴它這是商品區塊、這些文字是商品名稱或廠商名稱、告訴它這些數字是價錢(而非無意義的數字),是比較有效率和精準的,文中也會說明標記如何撰寫和測試。

範例

粉多任務的產品對於 SEO 是重視的,因此自家產品都會對 SEO 做加強,除了熟知的 Ranking Factors (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。

檢測工具

撰寫完畢一定要做測試:Google Structured Data Testing Tool

後記

(2017/04/08 更新)

使用結構化資料 (Structured Data) 標記資料有多種方法,例如:JSON-LD 和 Microdata,目前最常用的是 JSON-LD。依照內容的類別標記後,會在搜尋結果出現更豐富的資訊,稱之為複合式摘要 (Rich Snippets)。

露天拍賣的商品頁使用結構化資料的 JSON-LD 標記商品、店家和圖片資訊。

以下是商品資訊,包含商品名稱、描述、價格和評價等。

{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "電磁閥自動澆水器滴灌組(DDA)適20盆栽,全中文面板保固一年!灌溉定時器定時灑水器自動灑水器澆水澆花水管種植箱",
  "image": "http://b.rimg.com.tw/s2/5/e1/de/21408183472606_917.jpg",
  "description": "直購價:1,930元。物品狀態:全新。支付方式包含PChomePay支付連、郵寄、超商取貨付款。(21408183472606)。露天拍賣提供EZ LIFE@專業水管的生活、居家 , 庭院、花草園藝 , 花架、花盆等眾多商品,歡迎參觀選購!",
  "productId": "21408183472606",
  "brand": {
    "@type": "Thing",
    "name": "750499"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": "5969"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "TWD",
    "price": "1930",
    "availability": "http://schema.org/InStock"
  }
}

搜尋「pusheen 露天」

露天拍賣-商品頁-Rich Snippets

搜尋「pusheen 外套」

露天拍賣-商品頁-Rich Snippets

Rich Snippet 並非 Ranking Factor,而其對於排名的幫助是透過 click rate 間接影響提升的。

推薦閱讀


這篇文章的原始位置在這裡-粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例

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