カカドゥ開発者ブログ

株式会社カカドゥのエンジニアブログです。Python, Django, SEO成分が多めです。

エンジニア必見！SEOのための構造化データ記述にこれからはJSON-LDがおすすめ

f:id:masutaro:20150925072949p:plain

こんにちは！カカドゥの増田です。

SEO対策をしているウェブサービスのエンジニアなら、SEO対策としてパンくずや、レビュー(口コミ)の評点に、MicrodataやRDFaを使って構造化データ(メタデータ)をつける作業を依頼されたことのある人は、少なくないんじゃないでしょうか。

構造化データを記述する方法としては、従来からMicrodataやRDFaなどが使われていましたが、2014年頃からJSON-LDというのも使えるようになっています。

僕自身が最近、新規サイトの構築にあたって初めてJSON-LDを使い、JSON-LDは従来の方法のデメリットを解決するとても素晴らしい規格だと思ったのですが、使えるようになって1年経過した現在でも、知っている人がまだそれほどいない気がするので、啓蒙とレコメンドとしてこのエントリを書こうと思った次第です。

従来のMicrodataやRDFaのデメリット

MicrodataやRDFaを使って、マークアップ内にメタデータを組み込む従来の方法には以下のようなデメリットがあったと思います。

  • HTML/CSSの観点からすると、記述されたメタデータは不要なものでHTMLの可読性を損ねる
  • HTMLにメタデータが混在して可読性が低いため、記述を間違えやすい
  • エンジニアが良かれと思ってマークアップの人に頼らずHTMLを編集したら、本番サイトのレイアウトが崩れていた・・
  • マークアップ担当がうっかりメタデータ消しちゃって数ヶ月経過していた・・

JSON-LDを使うことで"コンテンツ"と"メタデータ"を分離できるため、上記のデメリットが解消されます。

実装例(PHP)

以下にPHPでの実装例を記載します。実際はフレームワークを使ってテンプレートに出力するでしょうから、まんまこのとおりにはならないと思いますが、いかに簡単な記述で、構造化データを付与することができるか感じていただけるかと思います。

プログラムコード

パンくず(Breadcrumbs)の構造化データを作成する場合の実装例です。

<script type="application/ld+json">
<?php
$items = [];
// 以下の$id_namesの値は、実際はプログラムで自動生成する
$id_names = [
    [ "@id" => "http://example.com/", "name" => "ホーム" ],
    [ "@id" => "http://example.com/category/1", "name" => "グルメ" ],
    [ "@id" => "http://example.com/article/32", "name" => "おいしいカレーの作り方" ]
];

foreach($id_names as $key => $value) {
    array_push($items, [
        "@type" => "ListItem",
        "position" => $key+1,
        "item" => $value
    ]);
}

$json_ld = [
    "@context" => "http://schema.org",
    "@type"    => "BreadcrumbList",
    "itemListElement" => $items
];
print(json_encode($json_ld));
?>
</script>

※本例では$id_namesの値をハードコードで書いてますが、実際はプログラムで作って渡してやることになるでしょう

出力結果

以下の内容がheadかbodyの任意の位置に記述されればOKです。

<script type="application/ld+json">
{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"http:\/\/example.com\/","name":"\u30db\u30fc\u30e0"}},{"@type":"ListItem","position":2,"item":{"@id":"http:\/\/example.com\/category\/1","name":"\u30b0\u30eb\u30e1"}},{"@type":"ListItem","position":3,"item":{"@id":"http:\/\/exampl.ecom\/article\/32","name":"\u304a\u3044\u3057\u3044\u30ab\u30ec\u30fc\u306e\u4f5c\u308a\u65b9"}}]}</script>

検証(バリデーション)

吐き出されたJSON-LDを念のためGoogleの構造化テストツールでチェックしましたが、下図のとおり問題ない結果でした。

f:id:masutaro:20150924174511p:plain

おわりに

いかがでしょうか？今回はパンくずを例にしましたが、他の種類の構造化データもすべてJSON-LDで記述することができます。HTMLの中で、コンテンツとメタデータを切り離して記述することができて大変便利なので、今後、構造化データを記述する機会にはぜひご利用いただきたいです。

JSON-LDがそれほどに普及しているように思えない原因は2つあると思っていて、ひとつは既存サイトでいま正常に動いているものをあえてわざわざ変更する必要がないからです。

もうひとつは、日常的にSEOの最新ニュース記事を読んでいる人(ディレクター)と、JSON-LDのメリットを享受する人(エンジニア)が異なっていて、本来届いて欲しい人に情報がまだ届ききっていないからじゃないかと思いました。なので、今後もエンジニアが知っておくと良さそうなSEO情報があれば記事化したいと思います！

この記事がいいなと思った方はフォローミー！(^_^)