スキップしてメイン コンテンツに移動

Imaginary theme

パンくずリストの構造化データにラベルを追加する

Imagimaryの記事/追加ページにはパンくずリストの構造化データが付いています。

構造化データは検索エンジンからのアクセスを想定してサイト作成を行うSEO(Search Engine Optimization/検索エンジン最適化)対策の一環で、パンくずリストは一つのページのサイト全体での位置付けを明らかにします。

Google 検索では、検索結果内のウェブページからの情報を分類する際に、ページの本文内のパンくずリスト マークアップを使用します。

パンくずリスト|Google 検索セントラル

Google検索ではパンくずリストのリンクがリッチリザルトとして検索結果に表示されることがあります。

例_書籍 › SF › 受賞作

Google検索に「受賞作」というページが表示され場合、それが属する一つ前の「SF」というカテゴリーとさらに一つ前の「書籍」というカテゴリーのリンクも一緒に表示されて「受賞作」というページのサイト全体での位置付けが分かると共にリンクでそれが属するカテゴリーのページを辿れるようになります。

パンくずリストにラベルを追加する利点

机に一切れのパンと幾つかのパンくずがある
Breadcrumbs by congerdesign / CC0

Imaginaryの記事/追加ページにはパンくずリストの構造化データが付いてますが、記事/追加ページから辿れるのはトップページだけです。

記事ページの場合は途中のカテゴリーとしてラベルを使うこともできます。その方がページがどんなものなのがトップページだけの場合よりも分かり易くなりますので、検索結果にリンクも貼られればSEO対策にもっと有利だと考えられます。

ラベルのパンくずリストを最初からテンプレートに組み込んでおくことは可能なんですが、Bloggerの場合はラベルページに検索避けが最初からかかってますので、利用者がそれを管理画面の設定で外さないと構造化データとして不十分かも知れないという懸念があります。

エラーなどの不具合は特に確認できまませんが、検索避けのページを検索エンジンに構造化データで通知するのは他の場合ではエラーになったりしますので、止めることにしました。

ラベルのパンくずリストのマークアップ

Imaginaryで記事ページのパンくずリストの構造化データにラベルを追加することが可能なので、カスタマイズの仕方を紹介しておきます。

その場合はラベルページの検索避けも外す方が良いかも知れませんので、以下で併せて方法を紹介しておきます。

パンくずリストの構造化データのカスタマイズはテンプレートのソースコードの書き換えが必要なので、Bloggerの管理画面のテーマのHTMLを編集かバックアップと元に戻すから行って下さい。

書き換え前のソースコード

<script type='application/ld+json'>{
"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{
"@type": "ListItem", "position": 1, "name": "<data:blog.title.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>"}, {
"@type": "ListItem", "position": 2, "name": "<data:blog.pageName.jsonEscaped/>" }]}</script>

書き換え後のソースコード

<script type='application/ld+json'><b:if cond='data:post.labels.any'>[<b:loop index='i' values='data:post.labels' var='item'>{
"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{
"@type": "ListItem", "position": 1, "name": "<data:blog.title.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>"}, {
"@type": "ListItem", "position": 2, "name": "<data:item.name.jsonEscaped/>", "item": "<data:item.url.canonical/>"}, {
"@type": "ListItem", "position": 3, "name": "<data:blog.pageName.jsonEscaped/>" }]<b:eval expr='data:post.labels.size - data:i == 1 ? "}" : "}, "'/></b:loop>]<b:else/>{
"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{
"@type": "ListItem", "position": 1, "name": "<data:blog.title.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>"}, {
"@type": "ListItem", "position": 2, "name": "<data:blog.pageName.jsonEscaped/>" }]}</b:if></script>

構造化データのscriptタグの最初の@typeがBreadcrumbList(パンくずリスト)のものを、丸ごと、取り換えて下さい。

リッチリザルトテストでカスタマイズを確認する

パンくずリストの構造化データがちゃんと動作しているかはGoogleのリッチリザルトテストで検証することができます。

記事ページにラベルがなければ従来のままなので、記事の作成でラベルを付けた記事ページのURLをリッチリザルトテストにかけます。

リッチリザルトテストのテスト結果
テスト結果|リッチリザルトテスト

合格ならばラベルの数だけパンくずリストが追加されます。

不合格ならばマークアップをやり直して下さい。

因みに記事の構造化データは著者名を表示しないなど、ブログの状況によって警告が出されることもありますので、合格したい場合はリッチリザルトテストの指示に従って修正して下さい。

リッチリザルトテストのパンくずリスト
パンくずリスト|リッチリザルトテスト

ラベルのパンくずリストの最終確認としてアイテムの内容を見て「名前のないアイテム」の「position」が三つあり、「2」の「name」にラベル名があり、その「item」の「id」がラベルページのURLになっていればカスタマイズは上手く行ったと分かります。

Bloggerのラベルページの検索避けを外す

Bloggerではラベルページにrobots.txtの検索避けが初期設定でかかっています。

パンくずリストの構造化データに記載されたラベルページに検索避けがかかっていてもエラーなどの不具合はないと思いますが、念のために外す方法も紹介しておきます。

検索エンジンがラベルページを巡回できてサイト内容を把握できるとSEO対策に役立つ可能性もあります。特に内部リンクから記事ページを見付けたり、リンク名でキーワードやページの重要性を捉えたりするのは良いかも知れません。

ただし検索避けを外すとラベルページがGoogle検索などの検索結果に出ることになりますので、出したくない場合は何もしないで下さい。

ラベルページの検索避けはBloggerの管理画面の設定のクローラとインデックスで外します。

Bloggerの設定のクローラとインデックス
設定|Blogger
  • カスタムrobots.txtを有効にするを稼働させる。
  • カスタムrobots.txtを書き換える。

二つの手順があり、カスタムrobots.txtのスイッチを入れて必要なマークアップを追加します。

カスタムrobots.txtのマークアップ例

User-agent: Mediapartners-Google

Disallow: User-agent: *
Disallow: /search
Allow: /search/label/

Sitemap: https://imaginary-theme.blogspot.com/sitemap.xml

User-agentの「*」に検索エンジンのクローラー(サイトを認識するための巡回ロボット)が含まれます。

元々の「Disallow: /search」で、検索ページとラベルページとブログ内検索の検索結果ページに検索避けがかかってますので、新たにラベルページだけ検索エンジンを許可するためには「Allow: /search/label/」を追加します。

その他、ブログ内検索の検索結果ページだけを検索避けにして検索ページとラベルページを許可することもできます。

User-agent: Mediapartners-Google

Disallow: User-agent: *
Disallow: /search?q=

Sitemap: https://imaginary-theme.blogspot.com/sitemap.xml

元々の「Disallow: /search」の後に「?q=」を付けるとブログ内検索の検索結果ページだけを検索避けの対象に指定できます。

robots.txtテスターでカスタマイズを確認する

ラベルページから検索避けを外すカスタマイズが正しくできたかはGoogleのrobots.txtテスターで検証できます。

ただしGoogleのSearch Console(サイトのGoogle検索での状況を把握できるもの)に登録されたサイトでなくてはなりませんので、robots.txtテスターを使う場合は事前にGoogleアカウントでSearch Consoleを開始してブログを登録しておいて下さい。

robots.txtテスターのメイン画面
robots.txtテスター|Search Console

Bloggerの管理画面でrobots.txtを編集したらrobots.txtテスターを開いてソースコードを確認します。カスタマイズが反映してなければ――自動的に反映するにはGoogleのクローラーがブログに来なければなりませんからある程度の時間が必要です――ソースコードの右下の「送信」から「Google に更新をリクエスト」を送信して完了したらrobots.txtをリロード(再読み込み)します。

編集したrobots.txtが表示されるまで、送信かリロードを繰り返します。どうしても変わらない場合はrobots.txtのカスタマイズに失敗している可能性もありますので、Bloggerの設定を見直して下さい。

大丈夫になったら下段の入力欄に何かのラベルページのURLを入力して「テスト」を押して下さい。

許可済みと表示されればラベルページの検索避けは適切に外されたことが分かります。

  • ブログの投稿者: 結城永人
  • タイトル: パンくずリストの構造化データにラベルを追加する
  • 最終更新: 
自分の写真
二十代前半から作家活動を天職として何よりも励んで来ました。当初は小説家を志望していましたが、十年を経て作詩する機会も増すほどに詩人こそ素性だと認めるに至りました。以降、個人的に永遠を歌う生き方として自分の中で最も重要な位置を占めています。ブログについては2015年から『些細な日常』を本格的に運営しています。人生健康芸術学問娯楽開発言語政治社会歴史生物自然、等々、どんな話題でも自由気儘に取り上げるつもりです。今までの経験を活かしながら新しい思考や表現を得られれば良いと思ってやっています|学歴:経済学士。職歴:物流業。資格:はんだ付け。特技:ダイエット。

コメント

人気の投稿

記事/追加ページの画像の遅延読み込みや軽量化による高速化のカスタマイズ

イメージ

ブログに画像や動画を掲載すると容量が大きくてページの表示速度が下がります。閲覧するのに時間が訪問者を減るかも知れないので、なるべくページの表示速度を高めた方が良いと思います。 初回画面が三秒以内に表示されれば遅くて嫌になることは少ないといわれます。 魅力的な画像や動画を掲...

インデックスページのスニペットの本文の削除と項目の並び替えのカスタマイズ

イメージ

Imaginaryのインデックスページ:トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク(アーカイブと続きを読む)が表示されます。 テンプレートのデザインのカスタマイズとしてスニペットの本文の削除...

読み込みボタン/無限スクロールの手動化のカスタマイズ

イメージ

Imaginaryのインデックスページ、つまりトップページとアーカイブページとラベルページとブログ内の検索結果ページではスクロールが画面下に達すると次のページを自動的に読む込むという無限スクロールが搭載されています。 本稿では画面スクロールによる動作を停止して読み込みボタンで...