$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サイトマップ装飾コードを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='http://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>]
コード前に簡単な説明を加えるとよりユーザーフレンドリーになります。

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

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

コメント

BLOGGER: 3
Loading...

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

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,17,Bloggerの基本機能と使い方,7,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,13,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Blogger ブログにHTMLサイトマップを設置する方法
Blogger ブログにHTMLサイトマップを設置する方法
https://2.bp.blogspot.com/-tUG7kaiJ3bA/WoepD6jpFVI/AAAAAAAACGw/0ugryoQzScUoO8WHHLTlWiDr_4_Wb474ACK4BGAYYCw/s400/HTML%2Bsitemap%2Bon%2BDesktop.png
https://2.bp.blogspot.com/-tUG7kaiJ3bA/WoepD6jpFVI/AAAAAAAACGw/0ugryoQzScUoO8WHHLTlWiDr_4_Wb474ACK4BGAYYCw/s72-c/HTML%2Bsitemap%2Bon%2BDesktop.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 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home 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. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy