JSON-LDで構造化データマークアップをしてみよう~店舗情報編~JSON-LDで構造化データマークアップをしてみよう~店舗情報編~2017年9月8日さっそくですが、前回より。「次回以降、Microdataで記述した残り2つもJSON-LDの記述をやってみようと思います!」ということで!やります!(笑)私がシリーズ化しようと(勝手に)思っている構造化データマークアップ実践編です。今回は「店舗情報」をJSON-LDで構造化データマークアップします。店舗情報はマークアップをすることでリッチスニペット、リッチカードに情報が表示される可能性が増えるので、ぜひぜひマークアップしたいものです。店舗情報編~JSON-LD~今回使うシンタックスは「JSON-LD」、ボキャブラリーは「schema.org」を使用します。基本となる店舗情報はMicrodataの時と全く同じ情報を使います。土日祝10:00~20:00定休日:月曜日JSON-LDはHTMLタグ内には書き込まないので、こちらは情報だけが必要となります。マークアップを開始しましょう。JSON-LDを使う時は必ずこの記述を入れておきます。type="application/ld+json">{ここに記述が入ります。}</script>これで今からJSON-LD使いますよ~という記述になりますね。内容となるKeyとvalueを記述していきます。今回は「schema.org」を使い「店舗情報」をマークアップするので、@context(どんな記述で話すか)にはschema.orgを、@type(なんの記述か)には、店舗を表す「http://schema.org/LocalBusiness」を使います。"LocalBusiness"}</script>これでお店の情報を書く準備が整いました。お店の名前ですね!店舗名は「name」を使うことができるので、これを入れます。"ヘアサロン「SEO」"}</script>次は住所です。住所は「address」ですが、「PostalAddress」で指定をするので{}を使います。このように、別の意味を持つオブジェクトをバリューに埋め込むことを、「エンベッティング」と呼びます。それ以下の地域情報、番地とか」とわけて記載が出来ます。市町村「addressLocality」その他地域「streetAddress」をKeyに使います。}</script>こうなります。これで住所がマークアップ出来ました!続きましては電話番号ですね。これは「telephone」が使えるので入れましょう。"0000-00-0000"これを一文入れてあげます。入れる場所はどこでも大丈夫ですが、入れる際は必ず半角カンマで区切りましょう。最後に営業時間を入れていきます。こちらでマークアップするときにも説明しているので詳しくはこっちを見て欲しいのですが、営業時間が日によって変わるためopeningHoursSpecificationを使います。平日、休日で分けて記述をしないといけないので、バリューに情報が複数入ります。アレイ[]の登場です!平日分、休日分を分けてopeningHoursSpecificationでマークアップ。それをLocalBusinessの方のopeningHoursSpecificationにエンベッティングする、というなんだかこんがらがりそうなことをします。