【SEO】パンくずリストって何?SEO効果やseesaaブログでの作り方について

bread.png

 久々のWEB関連の話題です。今回は「パンくずリスト」についてお話ししようと思います。

 パンくずリストってなんぞやって話なのですが、別に食品などではなく、ウェブサイトやブログに設置する「WEBサイトのどこにいるか」を知らせる構造リストのことです。英語では「breadcrumbs」といいます。

KuroMikanGames でいうところのグローバルメニュー下部にあるこれです。
スクリーンショット 2020-10-27 18.03.30.png

パンくずリストのSEO効果は?
Seesaaブログで実装するには?

早速、確認していきましょう。


メリット①:SEO効果がある!?

サイトの構造を最適化した上でパンくずリストを設置することで、SEO効果が期待できます。
具体的には、パンくずリストのアンカーテキストにもキーワードを入れることができるため、検索に引っかかりやすくなると考えられます。
例えば、カテゴリー名を「Unity」とした場合、「Unityの○○という記事なんだな」と理解されやすくなります。

メリット②:訪問者が迷いにくくなる

メリット①と連動しますが、訪問者にとっても理解されやすくなります。
検索エンジンのリンクをクリックするのは結局「訪問者」です。訪問者にとって利用しやすくなる点は非常に重要だと考えます。
トヨタっぽい言い方をしますが、あくまで人が主役なのです。

Googleはどうやって認識してるの?

パンくずリストの見た目だけを作った場合、それだけではGoogleさんは理解してくれません。
itemscope、itempropなどといった必要なルールに則って作成することで、はじめてGoogleさんが「これはパンくずリストである」と認識してくれます。これを「構造化データ」といいます。
次に紹介するコードでは「構造化データ」を含みます。普段のHTMLと違う書き方をしている箇所に注目してみて下さい。

Seesaaブログでの作り方

(1) 管理画面右上の「デザイン」をクリック
(2) 「CSS/HTML編集」をクリック
(3) 使用中のテンプレート名をクリック

パンくずリストの実装に必要なHTMLとCSSを編集します。

①HTML側
<% if:page_name eq 'article' -%><nav>
<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% blog.page_url %>">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1" />
</li>
<% loop:list_article -%>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% article_category.page_url %>">
<span itemprop="name"><% article_category.name %></span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name"><% extra_title %></span>
<meta itemprop="position" content="3" />
</li>
<% /loop -%>
</ol>
</nav>
<% /if %>
上記では記事のページにのみパンくずリストを表示するようにIF文を仕込んでいます。
他のページにも表示したい場合は、IF文を調整して下さい。
<nav>タグはナビゲーションであることを示すタグです。このタグ自体は表示に影響を与えませんが、検索エンジンが構造を理解するのに必要です。
<li>タグに何やら色々なオプションが指定されており、これによりパンくずリストであることを示します。
itemprop="item" は<a>タグに、
itemprop="name" はタイトルやカテゴリー名に追加するオプションです。
<meta>タグは階層を表しており、最上位が1、以降は2、3、4…となります。

次にCSS側です。

②スタイルシート側
.breadcrumbs {
list-style: none;
overflow: hidden;
}

.breadcrumbs li {
float: left;
}

.breadcrumbs li::after{
content: '/';
display: inline-block;
padding: 0 10px;
}

.breadcrumbs li:last-child::after{
display: none;
}
<ol>タグを横並びにします。
<li>タグの後に区切り文字を追加します。ただし、最後の<li>タグには追加しません。
余白や文字装飾に関わるCSSは極力排除してありますので、ご自身のデザインに合わせて装飾を追加して下さいね。

これで完了です。
あとは検索エンジンにページがインデックスされるのを待ちましょう。