サイトマップは、大きく分けるとXMLサイトマップとHTMLサイトマップサイトマップの2種類があります。XMLサイトマップは、検索エンジンにサイトのページの更新情報を伝えるなどの役割を持っています。
XMLサイトマップは検索エンジン向けの用途に対して、HTMLサイトマップは、サイトを訪問するユーザーにとってもコンテンツを見つけやすくするなどの利便性を高める役割があります。
[post_ads]
Bloggerは、XMLサイトマップは標準で作成する機能を備えています。
[BloggerのサイトマップをSearch Consoleに送信する方法 ##link##]
XMLサイトマップに加えて、ブログを訪問するユーザーが興味あるサイト内の記事を探すことを手助けするHTMLサイトマップをサイト内に設置することをお勧め致します。
固定ページの編集作成画面が表示されます。タイトルを入力して、［HTML]を押して編集モードを切り換えます。
HTML編集モードで入力欄に以下のコードを貼り付けます。
コード前に簡単な説明を加えるとよりユーザーフレンドリーになります。
本サイトの「サイトマップ」ページは、ここで紹介した方法で作成しています。
[サイトマップ ##link##]
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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
</div>
<script src='https://mybloggerlab.com/js/sitemap.js' type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
上のコードで表示されるサイトマップの（最初の行にある）列の説明は、"TITLE", "POST DATE", "LABELS" と英語で表示されます。最初の行の説明等を日本語にしたい場合は、ぶじろじっくさんの記事に日本語仕様に変更したコードが掲載されています。ご覧下さい。）
本サイトの「サイトマップ」ページは、ここで紹介した方法で作成しています。
[サイトマップ ##link##]
日本でBloggerを使っている人が少ないのですごく助かりました。
ReplyDelete勉強になるのでまた見させていただきに来ます。
ありがとうございました
はじめまして。コメントありがとうございます。
Delete日本では、日本の会社による無料ブログサービスも多いので、Bloggerの認知度、利用度はあまり高くないと認識しています。しかし、Bloggerは、無料ブログとしては突出したほど充実した機能と柔軟性を備えています。Bloggerの魅力や活用法を紹介することを目的にこのブログを立ち上げたので、コメントとても励みになります。
今後ともよろしくお願い致します。
こちらこそ、ありがとうございます。
ReplyDeleteそうなんですよね。せっかく無料でも使い方がわからない人って結構いると思うので、
どこから入ってどこを押すのか、図解説明されていて、すごくわかりやすかったです。
今後も参考にさせていただきます！ありがとうございました。
『 Bloggerが何だかイケてるッ…！！気がする…！！！ 』と直感でBloggerを使い始めましたが
ReplyDelete『 なんだか僕のBloggerは…イケてない気がするッ……！！ 』とまたまた直感が働き
ググりまくってたった今！ブロギンライフさんにたどり着けました。。
今は、ただただ安心しています。
本当にありがとうございます♪
これから読み漁って、パクって真似してパクって！ブログメンターとして実践して
成長させてもらいます！
コメントありがとうございます。ブログプラットフォームは、それぞれ持ち味が異なります。これまで、日本ではBloggerはあまり評価されていませんでしたが、最近は以前と比べると興味を持つ人も増えてきているようです。「安心」されたとのことですが、どの様な意味なのでしょうか？😳 イケてないということですか？😉
DeleteBloggerはGoogleの提供するブログプラットフォームなので、信頼性は高く、機能も充実しています。ただ、見た目の良いブログを作るのであれば、やはりWordPressの方が有利です。
尚、これからは、「パクって真似して」というスタイルは、ブログ運営では難しくなってくると思います。ご自分のスタイル（オリジナル度の高い）ブログが成功する時代になってくると予想しています。
3Qなんぶしんさんにとって、本サイトの情報が役立てば幸いです。
ブログ運営、頑張って下さい。
『安心』したのは
ReplyDeleteブロギンライフさんのブログコンテンツは僕が知りたいことがたくさんあるので
ここで勉強すれば、理想のブログを構築できそう！
ブロギンライフさんのお陰で成長できるぞ！
という、安堵の意味です( ´∀｀*)
パクって真似してというのは
ウィジェットの設定方法や、レイアウト方法や『MagOne』のことなど
発信されている情報をしっかり取り込もう！というニュアンスの表現です◎
私のブログコンテンツの内容は自社ブランドの販促であったり豆知識
自分の人生での学び、趣味の共有を目的としているので
これからの時代に沿うことができているのかな？と
有識者であるブロギンライフさんにおっしゃって頂いて
更に安心することができました＼(^o^)／
ありがとうございます！毎日拝見しています！これからも楽しみにしています◎
返信のコメントありがとうございます。「パクって真似して」とおっしゃるのは、サイトのレイアウトや設定方法をしっかり身につけるという意味だったのですね。良いお考えだと思います。
Deleteブログは試行錯誤が伴います。続けていると色々なことを学んだり、得ることができます。地道に取り組んでいると訪問者も増えきたりします。
ブログ運営、お互いにがんばりましょう！
はじめまして！
ReplyDeleteサイトマップについて何も対策ができていなかった超初心者です…が、ブロギングライフさんの記事は分かりやすく非常に為になりました。
（お礼が言いたくてついコメントしてしまいましたっ）
ありがとうございました！！