kazuki-iwata’s diary

MENU

【はてなブログ/SEO対策】ユーザー用HTMLサイトマップの作成



f:id:kazuki-iwata44:20220615213104j:image

こんにちは岩田です。

 

突然ですが、皆さんサイトマップは作成しましたか?

まぁ、正直つくる必要はそれほどなかったのですが、今回訪問してくださった方向けのサイトマップを作成しましたのでご紹介します。

サイトマップ - ガンデンのジョグノート

 

 

サイトマップについて


f:id:kazuki-iwata44:20220522223430j:image

サイトマップとは


f:id:kazuki-iwata44:20220522223446j:image

サイトマップとはサイト全体のページ構成を地図のようにリスト化したいわばサイトの地図のことです。

 

サイトマップの効果


f:id:kazuki-iwata44:20220522224018j:image

サイトマップには2つの役割があります。

一つはユーザーにサイトの全体像を伝え、目的のページへと誘導する役割、もう一つは検索エンジンのクロール巡回率の効率を上げる役割です。

これらの役割を果たすサイトマップですが、ユーザー用とクローラー用で種類が分かれます。

 

サイトマップの種類

サイトマップの種類は2種類です。

ユーザー向けのHTMLとクローラー向けのXMLです。

はてなブログにおいてHTMLは自分で作成、XMLは自動作成されます。

自分のブログにURLに/sitemap.xmlと入力すればXMLサイトマップは確認できます。

ですが、正直なんじゃこりゃという内容です。(笑)

クローラー用なので人がみても役には立ちません。

 

サイトマップは2種類あります! サイトマップはHTMLとXMLの2種類あります。
HTML=ユーザー向け XMLクローラー向け

 

ではもう少し詳しく説明します。

 

HTML


f:id:kazuki-iwata44:20220522224039j:image
ユーザー向けのサイトマップです。

皆さんはネット検索をして閲覧したページの内容が良かった時に関連ページも調べたいと思う時がありますよね?

そんな時にサイトの全体像の把握と目的にあったページを探すのに役に立つのがHTMLのサイトマップです。

カテゴリー毎に記事を分類分けしたり、サイトツリーを作って階層を分かるようにしているものなどのことを言います。

多くの人がイメージするサイトマップとはこのことを言っても良いのではと思います。

 

ポイント!ユーザーがサイト全体像の把握や目的のページを見つけるのに役立つのがHTMLサイトマップです。

XML

 

f:id:kazuki-iwata44:20220522224049j:image

 

検索エンジンやその他のクローラで使用される、構造化された書式 (XML) で記述されるサイトマップで、サイト内のページ、それらの相対的な重要性、およびページが更新される頻度を一覧表示している。実体ファイルはrobots.txtファイル内から指し示され、通常はsitemap.xmlという名前である。

 

XLMのサイトマップ検索エンジンに任意のWebサイトのページ内容を全て知らせるために用いれられるものです。

グーグルサーチコンソールを利用していないと全く役に立ちません。

サイトマップをグーグルサーチコンソールに登録してすることでクローラーのクロール速度を早めることができインデックス登録が早くなる効果があります。

はてなブログではXMLサイトマップは記事作成時に都度更新されており、作成の必要がありません。

 

XMLの登録方法は検索するとよく出てくるので詳しくは書きませんが

下記の内容を「2022」と「3」の部分を該当する月日に置き換えて順にサーチコンソールのサイトマップに登録するだけで完了です。

ブログ開始年月から現在に至るまで月ごとに入力を行う必要があります。。

sitemap_periodical.xml?year=2022&month=3

なんか物足りない感じがしますがこれだけです。

 

HTMLでのサイトマップの作り方


f:id:kazuki-iwata44:20220523074100j:image
冒頭のサイトマップをクリックして頂いた方ならもうお分かりだと思いますが、

サイトマップaboutページ内に手動で作成しました。

aboutページですが、自己紹介に使うページでこのブログについてという記事下あたりにあるリンクをクリックすると閲覧ができるようになっています。

今回はこれを活用してページを作成し、そのURLをブログタイトル下に表示されるように設定しました。

aboutページだけに作成するとせっかく作ってもユーザー向けのサイトマップがあるとユーザーに伝わらない可能性があると判断したからです。

なお、無料版で作成している人は中にはaboutページをプライバシーポリシーとして使用しているかたもいるかもしれませんのでその際は普通に記事として作成してしまいましょう。

 

今回ご紹介する方法!aboutページサイトマップを作成
aboutページのURLを表示させたい場所にサイトマップとして設置

 

では作り方を説明します。

aboutにサイトマップを作成

まずはaboutページの編集画面の開き方から。

管理画面から設定をクリック

aboutページ編集をクリックすると編集ページが開かれます。

ブログの説明のところにサイトマップを入れます。

ここで書いてもいいのですが、HTMLで入力のため、下書きページを利用しましょう。

下書きの見たまま編集でサイトマップを作っていきます。

ここからは好きなように編集していきましょう。

 

私の場合は、サイトマップと各カテゴリーを見出しタグづけ(サイトマップはh2,各カテゴリーはh3)して子、孫カテゴリは見出しは付けずに書き込みだけしてカテゴリ毎にURLをコピペしてタイトル表示でリンクを1つ1つ貼り付けました。

 

すでに記事投稿数が多い人だとかなり手間かもしれないので見て欲しい記事を絞るのもありかもしれません。

 

 

全ての入力が終わったらabout編集ページにコピペして下さい。

下書き記事は念の為保存して残しておきましょう。

これでaboutページの編集は終わりです。


ブログタイトル下に表示

なるべくサイトマップを見てもらえるようにするために表示場所を増やします。

私の場合はカテゴリと一緒にブログタイトル下に表示させることにしました。

表示の編集方法を説明します。

管理画面からデザインをクリック

カスタマイズをクリック

カスタマイズ画面のヘッダでブログタイトル下を編集します。

以下のコードを自分のブログのURLに置き換えて追記して下さい。

 

ブログタイトル下欄へ入力    <a href="https://自分のブログURL/about">サイトマップ</a>

 

入力が終わったら更新して下さい。

無事にサイトマップと表示されていれば作業完了です。

 

以上になります。

私もサイトマップを設置して間もないので作る意味があったか分からないので効果のほどをPRすることはできませんが同じようにユーザー向けのサイトマップ作成を検討している方は参考にしてみて下さい。

 

今回は以上です。