構造化マークアップとは?
構造化マークアップとは、テキスト情報をマークアップしてクローラーが理解できるようにタグ付けしたものを指します。
構造化マークアップをきちんと実装すると、副次的効果として検索結果の表示が変化することがあります。
商品のレビューやパンくずリストを検索結果に表示することができ、ページの内容が検索ユーザーに伝わりやすくなるため、クリック率が上がります。
こういった、検索結果で表示される情報(スニペット)の情報を豊か(リッチ)にすることをリッチスニペットといいます。
今回はJSON-LDでschema.orgの構造化データをしてみます。
HTMLで構造化サンプルはこちら
WebSite
TOPページに書きます。
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "WebSite", "url": "ウェブサイトURL", "name": "ウェブサイト名", "publisher": { "@type": "Organization", "name": "組織の名前", "url": "組織のURL", "logo": { "@type": "ImageObject", "url": "組織のロゴURL", "width": 横幅, "height": 縦 }, "address": { "@type": "PostalAddress", "postalCode": "組織の郵便番号", "addressRegion": "組織の都道府県", "addressLocality": "組織の市町村", "streetAddress": "組織の住所その他" } }, "image": { "@type": "ImageObject", "url": "ウェブサイトのイメージ画像", "width": 横幅, "height": 縦 }}</script>JavaScriptパンくず
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "親ページのURL", "name": "親ページの名前" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "2階層目のURL", "name": "2階層目の名前" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "3階層目のURL", "name": "3階層目の名前" } } ]}</script>JavaScriptArticle、NewsArticle、BlogPosting
"@type":"Article"の中身を適当に変更してください。
基本的にはニュースサイトはArticleもしくは、NewsArticleになります。ブログの場合はBlogPostingを使用します。
<script type="application/ld+json">{ "@context":"http://schema.org", "@type":"Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "記事のURL" }, "headline":"記事タイトル", "image":"記事のイメージ画像URL", "datePublished":"記事公開日", "dateModified":"記事更新日", "author":{ "@type":"Person", "name":"作者の名前" }, "publisher":{ "@type":"Organization", "name": "ウェブサイト名", "url": "ウェブサイトURL", "logo": { "@type": "ImageObject", "url": "ウェブサイトのイメージ画像URL", "width": 横幅, "height": 縦 } }, "description":"記事の説明分"}</script>JavaScript