パンくずリストの構造化データにラベルを追加する 結城永人 -5月 12, 2022 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 カスタム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テスター|Search Console Bloggerの管理画面でrobots.txtを編集したらrobots.txtテスターを開いてソースコードを確認します。カスタマイズが反映してなければ――自動的に反映するにはGoogleのクローラーがブログに来なければなりませんからある程度の時間が必要です――ソースコードの右下の「送信」から「Google に更新をリクエスト」を送信して完了したらrobots.txtをリロード(再読み込み)します。 編集したrobots.txtが表示されるまで、送信かリロードを繰り返します。どうしても変わらない場合はrobots.txtのカスタマイズに失敗している可能性もありますので、Bloggerの設定を見直して下さい。 大丈夫になったら下段の入力欄に何かのラベルページのURLを入力して「テスト」を押して下さい。 許可済みと表示されればラベルページの検索避けは適切に外されたことが分かります。 コメント 新しい投稿 前の投稿
ImaginaryのBloggerブログへの付け替え方 BloggerブログにテンプレートのImaginaryを使う、すなわち既存のテンプレートから新たに付け替える方法には手順が二つある。 ImaginaryのXMLファイルをデバイスに取得する Bloggerの管理画面からテンプレートを更新する Bloggerでテンプレー...
読み込みボタン/無限スクロールの手動化のカスタマイズ Imaginaryのインデックスページ、つまりトップページとアーカイブページとラベルページとブログ内の検索結果ページではスクロールが画面下に達すると次のページを自動的に読む込むという無限スクロールが搭載されています。 本稿では画面スクロールによる動作を停止して読み込みボタンで...
ブログの背景画像を全画面で表示する方法 Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。 背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。 ブログの背景全体を覆い尽くすデザイン ...
アドセンスの自動広告に対応済み Bloggerはサイト広告の アドセンス を管理画面の「収益」から設定して――ライセンスがなければブログを申請して審査に合格したかぎり――「レイアウト」のウィジェットから選択して直ぐに使える。 テンプレートは公式テーマならば間違いなくそうだし、Imaginaryも同じようにア...
ポップアップと本文に目次を追加するカスタマイズ Imaginaryの記事/追加ページの本文の画面の左下に表示される概要ボタンは本文に見出し、HTMLのh1かh2かh3の見出しタグがあった場合にそれを取り込んだ目次を自動生成して表示します。 本稿ではボップアップの目次と本文への自動生成の目次の追加とポップアップのコンテンツの...
フォント変更のためのVariableタグの一覧表 Bloggerブログのフォント(字体)はカスタマイズで変更することができます。 Bloggerブログでフォントを変更する方法 管理画面のテーマのカスタマイズのテーマデザイナーのフォントで用意された一部の英数字以外はCSSを書き換える必要があり、その場合、Imaginary...
インデックスページのスニペットの本文の削除と項目の並び替えのカスタマイズ Imaginaryのインデックスページ:トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク(アーカイブと続きを読む)が表示されます。 テンプレートのデザインのカスタマイズとしてスニペットの本文の削除...
投稿の日付表示を日本語の順番に変える方法 Imaginaryの記事ページでは記事タイトルの下に投稿の公開日、本文の下に更新日が表示されます。 日付をどのように表示するかというフォーマット(形式)はBloggerの管理画面のタイムスタンプの形式で変えることができます、 設定| Blogger 公開日と更新日の両...
ブログの背景のヘッダー画像の付け方とサイズについて Bloggerでの背景のヘッダー画像の付け方 Imaginaryの背景のヘッダー画像はBloggerの管理画面のテーマのカスタマイズ(テーマデザイナー)の背景の背景画像の「背景を変更」からBloggerの既存のものを選択するか使用中のデバイスに保存してあるものをアップロードし...
コメント