Blogger ブログにHTMLサイトマップを設置する方法

サイトマップは、大きく分けるとXMLサイトマップとHTMLサイトマップサイトマップの2種類があります。XMLサイトマップは、検索エンジンにサイトのページの更新情報を伝えるなどの役割を持っています。

XMLサイトマップは検索エンジン向けの用途に対して、HTMLサイトマップは、サイトを訪問するユーザーにとってもコンテンツを見つけやすくするなどの利便性を高める役割があります。
[post_ads]

Bloggerは、XMLサイトマップは標準で作成する機能を備えています。
[BloggerのサイトマップをSearch Consoleに送信する方法 ##link##]

XMLサイトマップに加えて、ブログを訪問するユーザーが興味あるサイト内の記事を探すことを手助けするHTMLサイトマップをサイト内に設置することをお勧め致します。

BloggerのブログにHTMLサイトマップを設置する方法

本記事では、BLOGGERLABと言うサイトのBloggerのHTMLサイトマップ設定記事の内容を紹介します。

Bloggerでは、様々なサイトがウィジェットやツールなどの情報を公開していて、それらのサードパーティーのツールやウィジェットを利用できることが特徴の1つです。主だったサイトのHTMLサイトマップのツールを利用した中で、個人的にBLOGGERLABのサイトマップツールがとても良いと思ったので、今回紹介することにしました。

ここで紹介するサイトマップは、投稿の新しい順にリスト表示され、ラベルをクリックするとラベルでまとめて表示されるものです。

記事数が多いブログの場合は、ラベル単位でまとめて表示する形式のサイトマップの方がユーザーが探している記事を見つけやすい可能性があります。ラベル（カテゴリー）でまとめて表示するHTMLサイトマップの作成設置方法は以下の記事をご覧下さい。

HTMLサイトマップ装飾コードをCSSに追加する

Bloggerのダッシュボードから［テーマ］をクリックし、［HTMLの編集］ボタンを押します。表示されるテンプレートのソースコードの表示欄内にクリックして（欄内であればどこでも良いです）、検索キーボードショートカット（コントロール＋F、またはコマンド＋F)から、"]]></b:skin>"を検索します。 "]]></b:skin>"の前に以下のコードを貼り付けます。


テンプレートを保存します。

[/* Sitemap plugin By MyBloggerLab */ #bp_toc { color: #666; margin: 0 auto; padding: 0; border: 1px solid #d2d2d2; float: left; width: 100%; } span.toc-note { display: none; } #bp_toc tr:nth-child(2n) { background: #f5f5f5; } td.toc-entry-col1 a { font-weight: bold; font-size: 14px; } .toc-header-col1, .toc-header-col2, .toc-header-col3 { background:#9E9E9E; } .toc-header-col1 { padding: 10px; width: 250px; } .toc-header-col2 { padding: 10px; width: 75px; } .toc-header-col3 { padding: 10px; width: 125px; } .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size: 13px; text-decoration: none; color: #fff; font-weight: 700; letter-spacing: 0.5px; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration: none; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding: 5px; padding-left: 5px; font-size: 12px; } .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a { color: #666; font-size: 13px; text-decoration: none } .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover { text-decoration:underline; } #bp_toc table { width: 100%; margin: 0 auto; counter-reset: rowNumber; } .toc-entry-col1 { counter-increment: rowNumber; } #bp_toc table tr td.toc-entry-col1:first-child::before { content: counter(rowNumber); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px; } td.toc-entry-col2 { text-align: center; }]

上の装飾コードは、お好みの色などにカスタマイズして使うこともできます。

サイトマップの固定ページを作成する

Bloggerのダッシュボードからページをクリックして、［新しいページ］のボタンを押します。

固定ページの編集作成画面が表示されます。タイトルを入力して、［HTML]を押して編集モードを切り換えます。



HTML編集モードで入力欄に以下のコードを貼り付けます。

<div id="bp_toc">
</div>
<script src='https://mybloggerlab.com/js/sitemap.js'  type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

コード前に簡単な説明を加えるとよりユーザーフレンドリーになります。

上のコードで表示されるサイトマップの（最初の行にある）列の説明は、"TITLE", "POST DATE", "LABELS" と英語で表示されます。最初の行の説明等を日本語にしたい場合は、ぶじろじっくさんの記事に日本語仕様に変更したコードが掲載されています。ご覧下さい。）

本サイトの「サイトマップ」ページは、ここで紹介した方法で作成しています。

[サイトマップ ##link##]