先にサンプルコードを表示して、後から解説を行います。microdataというマークアップの方法で行っています。
構造化マークアップする項目は以下
ヘッダー
- ヘッダー
- フッター
- サイドバー
- ナビゲーション
- パンくずリスト
- ブログ記事
それでは、やっていきます。
ヘッダー
header.php
<header itemscope="itemscope" itemtype="http://schema.org/WPHeader" >
フッター
footer.php
<footer id="footer" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
サイドバー
sidebar.php
<div id="sidebar" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
ナビゲーション
このような形になります。
<ul>
<li itemprop="url"><a href="#" itemprop="name">sample1</a></li>
<li itemprop="url"><a href="#" itemprop="name">sample2</a></li>
<li itemprop="url"><a href="#" itemprop="name">sample3</a></li>
<li itemprop="url"><a href="#" itemprop="name">sample4</a></li>
<li itemprop="url"><a href="#" itemprop="name">sample5</a></li>
</ul>
実際の実装方法はこちら。
https://inokawablog.org/wordpress/seo/wordpress_schema_org_navigation/
パンくずリスト
パンくずリストではJSON-LDというマークアップの方法を用いています。別記事にまとめておきました。こちらをご覧ください。
https://inokawablog.org/wordpress/seo/wordpress_schema_org_breadcrubm/
ブログ記事
ブログ記事でもJSON-LDというマークアップの方法を用いています。
別記事にまとめておきました。
できたら構造化データテストツールでマークアップできているか確認を取りましょう。
解説
構造化データのitem_scopeやrole、item_typeなどの詳細はこちらにまとめっています。