
検索結果に「パンくずリスト」や「ナビゲーションリンク」が表示されているサイトを見たことはありませんか?
これは構造化データという仕組みを使って、Googleにサイトの構造を正しく伝えているからです。この記事では、自作テーマでも簡単に導入できる構造化データの設定方法を初心者向けに解説します。
構造化データとは?
構造化データとは、「この部分はナビゲーションです」「これは記事です」といった情報を、Googleなどの検索エンジンに伝えるためのコードです。設定しておくと、検索結果がリッチになり、ユーザーにとってもわかりやすい表示になります。
ナビゲーションメニューに構造化データを設定
まずは、グローバルナビ(メインメニュー)に「これはナビゲーションです」と伝える構造化データを追加します。以下のように<nav>
タグに属性を加え、各リンクにitemprop
を指定します。
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<ul>
<li><a href="/" itemprop="url"><span itemprop="name">ホーム</span></a></li>
<li><a href="/category/html" itemprop="url"><span itemprop="name">HTML</span></a></li>
<li><a href="/category/css" itemprop="url"><span itemprop="name">CSS</span></a></li>
</ul>
</nav>
この設定により、モバイル検索でナビゲーションリンクがボタンのように表示されることがあります。
パンくずリストを構造化する
次に、サイト内の階層を示すパンくずリストに構造化データを追加します。Googleがページの位置づけを理解しやすくなります。
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/category/css">
<span itemprop="name">CSS</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
position
を指定することで、Googleに階層の順番まで伝えることができます。
記事ページに構造化データ(Article)を追加
ブログ記事や解説記事にはArticle
型の構造化データを設定すると、著者情報や公開日などが検索結果に反映されることがあります。JSON-LD形式
で記述します。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "構造化データの設定方法を初心者向けに解説",
"author": {
"@type": "Person",
"name": "Yowashi"
},
"datePublished": "2025-07-02",
"publisher": {
"@type": "Organization",
"name": "HPBUILD",
"logo": {
"@type": "ImageObject",
"url": "https://www.hpbuild.net/public/img/logo.png"
}
}
}
</script>
このコードは、記事ページの<head>
内に挿入するのがおすすめです。
初心者が気をつけたいポイント
- 順位が上がるわけではない:構造化データは「検索結果の見た目」に効く技術です
- 正確に書く:誤った記述があると、逆に無視されたり警告が出ることも
- Search Consoleで確認:構造化データが認識されているかチェックできます
おわりに
構造化データは、サイトの「裏側の設計」をGoogleに正しく伝えるための重要な技術です。難しそうに見えて、実はほんの少しのタグやJSONを書くだけで実装できます。
今後も、WordPress自作テーマでできるSEO対策を紹介していきますので、ぜひブックマークしておいてくださいね。
Web制作やHTML/CSSの学習に役立つ情報を初心者向けに発信しています。
プロフィールはこちら