嬉しいニュースが入ってきました。
昨年末からschema.orgがサポートを始めたボキャブラリ「BreadcrumbList」を、Googleがサポートを開始したとのことです。
これまでは、このブログのパンくずリストでも採用しているData-Vocabulary.orgによるマークアップがGoogleにサポートされていたのですが、今後はschema.orgに取って代わっていくことになりますね。
構造化マークアップは効果が目に見えにくいとのこともあってまだまだSEO業者の中でも多くは普及していませんが、これによって少しは普及してくれるでしょうか。
マークアップ例
このサイトのサイト構造を例に、パンくずリストをマークアップしてみましょう。
素のHTML
<ul> <li><a href="https://www.seo-pro.jp/">HOME</a></li> <li><a href="https://www.seo-pro.jp/seo/">SEOブログトップ</a></li> <li><a href="https://www.seo-pro.jp/whole/">SEO対策全般</a></li> <li><a href="https://www.seo-pro.jp/seo/whole/post-1339/">被リンクによるSEO効果の検証</a></li> </ul>
microdataでマークアップ
<ul itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.seo-pro.jp/"><span itemprop="name">SEVO+</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.seo-pro.jp/seo/"><span itemprop="name">SEOブログトップ</span></a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.seo-pro.jp/seo/whole/">SEO対策全般</a> <meta itemprop="position" content="3" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.seo-pro.jp/seo/whole/post-1339/">被リンクによるSEO効果の検証</a> <meta itemprop="position" content="4" /> </li> </ul>
ulタグで「BreadcrumbList」の指定をして、liタグに対してはListItemをエンベッドしています。
JSON-LDでマークアップ
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://www.seo-pro.jp/", "name": "SEVO+" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://www.seo-pro.jp/seo/", "name": "SEOブログトップ" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "https://www.seo-pro.jp/seo/whole/", "name": "SEO対策全般" } }, { "@type": "ListItem", "position": 4, "item": { "@id": "https://www.seo-pro.jp/seo/whole/post-1339/", "name": "被リンクによるSEO効果の検証" } } ] } </script>
JSON-LDに関しては、上記の記述をほぼほぼコピペで大丈夫じゃないでしょうか。