//]]>

$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

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##]

コメント

BLOGGER: 8
  1. 日本でBloggerを使っている人が少ないのですごく助かりました。
    勉強になるのでまた見させていただきに来ます。
    ありがとうございました

    ReplyDelete
    Replies
    1. はじめまして。コメントありがとうございます。

      日本では、日本の会社による無料ブログサービスも多いので、Bloggerの認知度、利用度はあまり高くないと認識しています。しかし、Bloggerは、無料ブログとしては突出したほど充実した機能と柔軟性を備えています。Bloggerの魅力や活用法を紹介することを目的にこのブログを立ち上げたので、コメントとても励みになります。

      今後ともよろしくお願い致します。

      Delete
  2. こちらこそ、ありがとうございます。

    そうなんですよね。せっかく無料でも使い方がわからない人って結構いると思うので、
    どこから入ってどこを押すのか、図解説明されていて、すごくわかりやすかったです。
    今後も参考にさせていただきます!ありがとうございました。

    ReplyDelete
  3. 『 Bloggerが何だかイケてるッ…!!気がする…!!! 』と直感でBloggerを使い始めましたが
    『 なんだか僕のBloggerは…イケてない気がするッ……!! 』とまたまた直感が働き
    ググりまくってたった今!ブロギンライフさんにたどり着けました。。
    今は、ただただ安心しています。
    本当にありがとうございます♪
    これから読み漁って、パクって真似してパクって!ブログメンターとして実践して
    成長させてもらいます!

    ReplyDelete
    Replies
    1. コメントありがとうございます。ブログプラットフォームは、それぞれ持ち味が異なります。これまで、日本ではBloggerはあまり評価されていませんでしたが、最近は以前と比べると興味を持つ人も増えてきているようです。「安心」されたとのことですが、どの様な意味なのでしょうか?😳 イケてないということですか?😉

      BloggerはGoogleの提供するブログプラットフォームなので、信頼性は高く、機能も充実しています。ただ、見た目の良いブログを作るのであれば、やはりWordPressの方が有利です。

      尚、これからは、「パクって真似して」というスタイルは、ブログ運営では難しくなってくると思います。ご自分のスタイル(オリジナル度の高い)ブログが成功する時代になってくると予想しています。

      3Qなんぶしんさんにとって、本サイトの情報が役立てば幸いです。

      ブログ運営、頑張って下さい。

      Delete
  4. 『安心』したのは
    ブロギンライフさんのブログコンテンツは僕が知りたいことがたくさんあるので
    ここで勉強すれば、理想のブログを構築できそう!
    ブロギンライフさんのお陰で成長できるぞ!
    という、安堵の意味です( ´∀`*)

    パクって真似してというのは
    ウィジェットの設定方法や、レイアウト方法や『MagOne』のことなど
    発信されている情報をしっかり取り込もう!というニュアンスの表現です◎

    私のブログコンテンツの内容は自社ブランドの販促であったり豆知識
    自分の人生での学び、趣味の共有を目的としているので
    これからの時代に沿うことができているのかな?と
    有識者であるブロギンライフさんにおっしゃって頂いて

    更に安心することができました\(^o^)/
    ありがとうございます!毎日拝見しています!これからも楽しみにしています◎

    ReplyDelete
    Replies
    1. 返信のコメントありがとうございます。「パクって真似して」とおっしゃるのは、サイトのレイアウトや設定方法をしっかり身につけるという意味だったのですね。良いお考えだと思います。

      ブログは試行錯誤が伴います。続けていると色々なことを学んだり、得ることができます。地道に取り組んでいると訪問者も増えきたりします。

      ブログ運営、お互いにがんばりましょう!

      Delete
  5. はじめまして!
    サイトマップについて何も対策ができていなかった超初心者です…が、ブロギングライフさんの記事は分かりやすく非常に為になりました。
    (お礼が言いたくてついコメントしてしまいましたっ)

    ありがとうございました!!

    ReplyDelete
コメントは承認後、表示されます。

関連記事とスポンサーリンク

Name

AdSense,4,Blogger SEO,11,Blogger ニュース,2,Blogger 活用法,22,Bloggerの基本機能と使い方,12,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,16,お知らせ,1,その他,1,
ltr
item
Blogger101@ブロギングライフ : Blogger ブログにHTMLサイトマップを設置する方法
Blogger ブログにHTMLサイトマップを設置する方法
サイトマップは、大きく分けるとXMLサイトマップとHTMLサイトマップサイトマップの2種類があります。本記事では、Bloggerlabが提供するHTMLサイトマップの設定作成、設置方法を紹介します。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvv97s3bUbgzbE7hPH32dNbeecxCHfVyKB6-9ukWNPvhhnxha3ohWj2Cs35jSCgbTkDyPJXRRkLEf0xlYryrHhBL3gT0aRjUGgLS1R9GqqT_VmAJ4kicneiorcnvMljtKMRxoc34NeBvM/s400/HTML+sitemap+on+Desktop.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvv97s3bUbgzbE7hPH32dNbeecxCHfVyKB6-9ukWNPvhhnxha3ohWj2Cs35jSCgbTkDyPJXRRkLEf0xlYryrHhBL3gT0aRjUGgLS1R9GqqT_VmAJ4kicneiorcnvMljtKMRxoc34NeBvM/s72-c/HTML+sitemap+on+Desktop.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/setting-up-blogger-html-sitemap.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/setting-up-blogger-html-sitemap.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次