AMP網頁中的Schema

為何需要寫 schema 呢?當我們千辛萬苦寫了個頁面出來，自然是希望能讓廣大的user看到。所以請使用Schema.org來面對大多數的搜尋引擎。

Schema的格式

於 html tag 中加上 microdata

• step1 - itemscope

<div itemscope>

• step2 - itemtype；ex：

<div itemscope itemtype="http://schema.org/Movie">

• step3 - itemprop；ex：

<h1 itemprop="name">

有時，一個property上也可同時設其自屬的properties ，如此一來，便可完成槽狀的設定

<div itemprop="director" itemscope itemtype="http://schema.org/Person">

JSON-LD

其中的 "@context": "http://schema.org" 為一定要設的項目。
和 microdata 比較，不必設 scope ，但是 @type: ooxx 仍為必設的項目，也會有槽狀的設定

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "MusicEvent",
  "location": {
    "@type": "MusicVenue",
    "name": "Chicago Symphony Center",
    "address": "220 S. Michigan Ave, Chicago, Illinois, USA"
  },
  "name": "Shostakovich Leningrad",
  "offers": {
    "@type": "Offer",
    "url": "/examples/ticket/12341234",
    "price": "40",
    "priceCurrency": "USD",
    "availability": "http://schema.org/InStock"
  },
  ...
}

這裡有更多的範例可以參考看看

依不同的內容類型（itemtype or @type），有不同的設定

要注意，並不是隨自己高興怎麼設定資料。 schema 對於資料該如何設定已經有做了一些官方的分類與規範：

• Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries ...
• Embedded non-text objects: AudioObject, ImageObject, VideoObject
• Event
• Health and medical types: notes on the health and medical types under MedicalEntity.
• Organization
• Person
• Place, LocalBusiness, Restaurant ...
• Product, Offer, AggregateOffer
• Review, AggregateRating
• Action

就實用上，我比較偏向使用的是 JSON-LD 的模式多過於使用 microdata 。畢竟在網頁的實際狀況下，頁面上所要呈現的（user肉眼）看得到的，並不見得會完全符合 Schema 的編排格式。

現在，基本設定方法與大方向了解了，之後實作時，請依據各個類型的不同，參考官方的文件做設定。

參考來源：

• AMP官網
• Schema官網 - Organization of Schemas
• Schema官網 - Getting started with schema.org using Microdata
• Schema官網 - Schema.org for Developers