構造化データでSEO強化！schema.orgボキャブラリをmicrodataでマークアップする方法
Contents
構造化データでSEO強化！schema.orgボキャブラリをmicrodataでマークアップする方法
今回は、構造化データをHTMLに追加するため、schema.orgボキャブラリをmicrodataフォーマットに従って記述する方法をご紹介します。
前回もお伝えした通り、構造化データはページ内のテキストがどんな意味を持つのかをタグを用いて明示し、コンピューターに伝える方法です。
例えば、次のような文章があったとします。
「 『砂の器』は、1974年に公開された日本映画。<br> 原作は松本清張、監督は野村芳太郎です。 」
通常通りマークアップすると
<div> <p>『砂の器』は、1974年に公開された日本映画。<br> 原作は松本清張、監督は野村芳太郎です。</p> </div>
となります。
これを、schema.orgのボキャブラリを使用して、microdataでマークアップしてみましょう。
①itemscopeを入れる
divに構造化データをマークアップしているということを、「itemscope」属性で宣言します。値は必要ありません。
<div itemscope> <p>『砂の器』は、1974年に公開された日本映画。<br> 原作は松本清張、監督は野村芳太郎です。</p> </div>
②itemtypeを指定
どのような項目についての記述なのかをURLで指定します。
ここではhttp://schema.org/Movieという値を指定し、映画に関する情報であることを明示しています。
<div itemscope itemtype="http://schema.org/Movie"> <p>『砂の器』は1974年に公開された日本映画。<br> 原作は松本清張、監督は野村芳太郎です。</p> </div>
itemtypeの主な値
- Creativeworks
- 本、映画、音楽、テレビ、レシピなどクリエイティブな作品
- Embedded non-text objects
- 音楽、画像、動画などの埋め込みオブジェクト
- Event
- イベント
- Organization
- 組織
- Person
- 人
Place, LocalBusiness, Restaurant …
Product, Offer, AggregateOffer
Review, AggregateRating
など。
全てのitemtypeはschema.orgのThingに記載されているので、ご参照下さい。
③itempropでさらに詳細を指定
それぞれの単語がどんな意味を持つのか、さらに詳細な情報を加えていきます。
<div itemscope itemtype="http://schema.org/Movie"> <p>『<span itemprop="name">砂の器</span>』は<span itemprop="datePublished">1974年</span>に公開された日本映画。<br> 原作は<span itemprop="author">松本清張</span>、監督は<span itemprop="drector">野村芳太郎</span>です。</p> </div>
これで、映画の名前、公開された年、原作者、監督という4つのデータが構造化され、コンピューターに伝えられます。
入れ子構造
microdataは入れ子にすることができます。
例えば、先ほどの文章を少し変えてみます。
「 映画評論家の山田太郎氏は、野村芳太郎監督の『砂の器』を星５つと評価しています。 」
これをmicrodataでマークアップすると次のようになります。
<div itemscope itemtype="http://schema.org/Review"> 映画評論家の<span itemprop="author">山田太郎</span>氏は、 <span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Movie"> <span itemprop="author">野村芳太郎</span>監督の『<span itemprop="name">砂の器</span>』を、星<span itemprop="ratingValue">５</span>つと評価しています。 </div>
ここでは、二つのitemtypeが入れ子構造になっていることが分かります。
全体が「評価」という一つのitemtype。
さらにその中に、評価対象である「映画」のitemtypeが含まれています。
この場合、入れ子の親・子の両方にitemscopeを宣言します。
評価基準をマークアップする
先ほどの例では、「星5つ」という評価にratingValueという値でマークアップしました。ratingValueは、特に何も指定がなければ、最高値を5、最低値を1として仮定します。
そのため、先ほどの「星5つ」は最高値として認識されます。
ですが、これが「85点」など、5段階評価ではなかった場合はどうなるでしょうか。
最高値と最低値が分からないため、85点という値にratingValueを追加しても正しく認識されない恐れがあります。
そこで、最高点と最低点を<meta>タグを用いて明示します。
砂の器を <meta itemprop="bestRating" content="100"> <meta itemprop="worstRating" content="0"> <span itemprop="ratingValue">85</span>点と評価しました。
<meta>タグで示された部分は、コンピューターのみに伝える情報であり、ブラウザには表示されません。
itempropの値は、先にご紹介したitemtypeのリストThingからそれぞれのページに記載されています。ただ、その数は膨大で、今後も増えていくと予想されるため、よく使う値はチェックして覚えておくことをおすすめします。
パンくずのマークアップ問題
パンくずに構造化データを追加することで、検索結果に上のように表示させることができます。
ただ、長年schema.orgはパンくず表示に対応しておらず、現在でも、もう一つのボキャブラリである「data-vocabulary.org」を使用してマークアップされているページが多いようです。
しかし、Google Developersの構造化データ＞Breadcrumbsのページには「note」として次のように記されています。
Schema.org markup for breadcrumbs is being finalized and will be preferred when ready.
W3Cのページでもschema.orgによるパンくずのマークアップ例が掲示されていることから、サポートされるのも時間の問題ではないでしょうか。
下記は、W3Cに掲載されているパンくずマークアップの例です。
(http://www.w3.org/wiki/WebSchemas/BreadcrumbsDesign1より転載)
<div itemscope itemtype="http://schema.org/WebPage"> <!--First chain--> <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb"> <a itemprop="url" href="/category/books"> <span itemprop="name">Books</span> </a> <!--Second level of the first chain--> <span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb"> <a itemprop="url" href="/category/books/classics"> <span itemprop="name">Boring classics</span> </a> </span> </div> <!--Second chain--> <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb"> <a itemprop="url" href="/category/bicycles"> <span itemprop="name">Bicycles</span> </a> <!--Second level of the second chain--> <span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb"> <!--Last element is not a hyperlink in html--> <!--but it has a hyperlink in microdata markup--> <span itemprop="name">For kids</span> <link itemprop="url" href="/category/bicycles/three-wheeled"/> </span> </div> </div>
これからマークアップを始める方は、data-vocabulary.org ではなく、先行してschema.orgでの実装を行ってもいいかもしれませんね。
ここ数年の間にもschema.orgの取り組みはどんどん発展しており、今後もこまめにチェックしていく必要がありそうです。
次は、JSON-LDフォーマットを用いたマークアップ法をご紹介します。