かなろぐ。

かなやんのブログ

マラソン・ランニング後の回復に最適なプロテイン3選【ランキングで比較】
マラソン・ランニング前にBCAAが摂取できるおすすめのアミノ酸ドリンク3選
マラソン・ランニングの初心者に最適な便利グッズ【3種の神器】
かなやんのプロフィール(初記事も)

はてなブログでHTMLサイトマップ(ユーザー向け)を手動作成【画像つき手順】

この記事をシェアする

f:id:kanayan-run:20200313235909j:plain

 

「ブログにはユーザー用のサイトマップも必要って見かけたけど作ったほうがいいかな?はてなブログは自動で作れないみたいだけど、どうやって手作業でするの?」

こんな疑問に答えます。

 

この記事の内容
  • ユーザー向けHTMLサイトマップの必要性
  • はてなブログでHTMLサイトマップの作成した方法

 

先日こんなツイートをしました。

 

 

ほとんどのブロガーはSEO対策としてブログ内の記事を検索エンジンに認識させるXMLサイトマップを作成していると思います。

ではユーザーの利便性を高めるHTMLサイトマップは作成しているでしょうか。

この記事ではHTMLサイトマップの必要性と私がこのブログで作成した手順を画像付きで解説します。

 

 

HTMLサイトマップとは

f:id:kanayan-run:20200313235847j:plain

 

HTMLサイトマップはサイトを訪れたユーザーの利便性(ユーザビリティ)を向上させる目的で設置するサイト案内のようなものです。

ブログでいうと全記事を網羅した一覧ページがHTMLサイトマップにあたります。

 

HTMLサイトマップの必要性

HTMLサイトマップはブログに必要なのでしょうか。

googleでいろんな記事を見てみると「ブログには必ずしも必要ではない」「なくてもいい」といったものも見かけます。

 

ですがサイトマップがあると、

  1. ユーザーが迷子にならない
  2. 記事を回遊できる
  3. ブログ内の滞在時間が延びる
  4. 結果としてSEO評価アップ

このようなことが期待できるのでHTMLサイトマップは『必要』と感じました。

 

はてなブログにはHTMLサイトマップの自動作成機能がない

しかしこのブログで利用しているはてなブログにはWordPressのプラグインのようなHTMLサイトマップを自動作成する機能がありません。

 

調べてみると「アーカイブを取得してスクリプトを貼り付けたらできる」とのことですが、ややこしいので思考停止して手動で作成することにしました。

 

はてなブログでHTMLサイトマップを手動作成

f:id:kanayan-run:20200313235827j:plain

 

ここからはブログ運営歴5ヶ月の初心者ブロガーの私が手動でサイトマップを作成したやり方を画像付きで説明します。

手順は次の通りです。

  1. 固定ページを新規作成
  2. 見出しを使ってカテゴリー分け
  3. 「リンクを挿入」で記事URLを貼り付けていく
  4. 記事タイトルのあとにある「-(サイト名)」を手動削除
  5. グローバルメニューとサイドバーにリンクを設置

たったこれだけの手順ですが、手動ゆえ記事数が増えるほど大変になるので早めに作成しておくほうがいいですね。

 

固定ページを新規作成

はてなブログのPro(有料)プランには『固定ページ』という通常の一覧ページに表示されない静的なページがあります。

プロフィールページやお問い合わせフォーム、プライバシーポリシーのページに使っているブロガーさんは多いと思います。

 

サイトマップでもこの『固定ページ』を使用します。

無料プランの方は通常の投稿ページで作成すればOK。

 

f:id:kanayan-run:20200313220507j:plain

 

見出しを使ってカテゴリー分け

通常の記事を公開するときにカテゴリーを設定していると思いますが、サイトマップ内でもカテゴリー別に記事を貼ります。

カテゴリーはデフォルトの大見出しを使用しました。

ただしここは好みの問題なので単に文字サイズを大きくするなど自由でいいと思います。

 

「リンクを挿入」で記事URLを貼り付けていく

別タブで各記事を開いてカテゴリーに従ってどんどん貼り付けていきます。

使うのは「リンクを挿入」。

固定ページも含めて全記事を漏れなく貼りましょう。

 

f:id:kanayan-run:20200313222640j:plain

 

記事タイトルのあとにある「-(サイト名)」を手動削除

全部貼り終えたらこんな感じになっているはず。

 

f:id:kanayan-run:20200313222848j:plain

 

ここで気になるのが記事タイトルのうしろについてくるサイト名。

どう考えても必要ないので削除していきます。

編集モードを「HTML編集」に切り替えてひとつずつ削除します。

 

f:id:kanayan-run:20200313223655j:plain

 

もしかすると一括で任意の文字列を削除する方法があるかもしれないですが、やり方を調べるのも面倒だったのでここも手動でやりました。

全部削除できたらプレビューで確認しましょう。

 

f:id:kanayan-run:20200313224001j:plain

 

グローバルメニューとサイドバーにリンクを設置

プレビューで確認して問題なければ公開。

ただし固定ページで作成した場合はリンクがないと見ることができません。

投稿ページで作ったとしても放置したら新しい記事を公開するたびに埋もれていくのできちんとリンクを設定しておきましょう。

私はグローバルメニューとサイドバー上部に設置しました。

これで完成です。

 

新しい記事を書いて公開したらその都度サイトマップに追記していくのを忘れないようにしましょう。

 

f:id:kanayan-run:20200313224922j:plain

 

サイトマップ作成でユーザーが使いやすいブログを作ろう

f:id:kanayan-run:20200313235719j:plain

 

HTMLサイトマップはSEOに影響しないという説もありますが、サイトを運営する上ではSEO関係なしにユーザビリティの向上も目指していかないといけません。

一般企業でいうところの『顧客満足度』ですね。

みなさんもお客さん(=ユーザー)が見やすく使いやすいブログを作っていきましょう。

 

↓今回作ったHTMLサイトマップはこちら↓

 

www.kanayan-box.com