iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

AMP系列 第 2

AMP(Lession 2) - AMP網頁中的Schema

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(Lession 1) - 初步了解AMP
下一篇
AMP(Lession 3) - 使用AMP做RWD
系列文
AMP30

尚未有邦友留言

立即登入留言