Bar

Blogger 今まで書いた全記事をサイトマップとして設置してみた

image
いつもチェックしているスズキさんのブログ「Neta Beta Max」を見ていたら、サイトマップなるリンクを発見。
よく見ると各カテゴリごとに全記事?がまとめられていていました
「これはいいな!」と。
Bloggerにはそういった機能がないようなので外部サービスをメインに探して試してみました。

2012.04.18 Blogger情報を配信しているクリボウさんのブログで本記事を取り上げていただきました!
Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法

サイトマップとは

サイトマップとはWebサイトやブログに登録されているページやカテゴリを一覧にまとめたものを言います。
以前Webサイトの開発をした際、サイトマップ設置前後のアクセスログをとったことがあります。
そこでわかったのが、訪問者がサイトマップを読む確率は結構高いんですよね。
そこまでの知識がありながらブログにサイトマップを掲載する!という考え方を持たなかった自分が恥ずかしいんですけども・・・
ちなみに、Googleでサイトマップと検索すると一番最初に「富士通」のサイトマップが表示されます。

試した内容は2点、採用は「abu-farhan.comのスクリプト」

全記事を表示できるスクリプトを調べてみた結果、FeedBurnerとabu-farhan.comのスクリプトが導入しやすそうでした。
結果abu-farhan.comを採用しましたが、両者の導入および結果をメモしておきます。
1.FeedBurnerのバズ・ブースト機能(不採用)
2012-04-14_122119
フィード配信はGoogleのFeedBurnerを使っています。
FeedBurnerの中にバズ・ブーストという機能があり、FeedをHTMLとして配信できます。
下記スクリプトは実際に掲載している内容です。
image
FeedBurnerを採用しなかった理由は、全記事を表示できなかったから。
導入して確認したところ、最新記事から時系列になっているのでよかったんですが最新記事から1ヶ月分程度しか表示されませんでした。
2012-04-14_122119
2.abu-farhan.comのスクリプト(採用)
image
のこのさんのブログ「ネットdeアクセス」の記事「Bloggerで全記事表示(人間用サイトマップ)」を参考に導入。
こちらはラベルに紐付いた記事をすべて表示してくれます。
私の希望にピッタリのスクリプトでしたので、こちらを採用。

Bloggerにサイトマップを導入する方法は簡単!

  1. draft.blogger.comへアクセス、ページをクリック
    image
  2. 新しいページ→空白のページをクリック
    image
  3. スクリプトをコピペする
    xxxxxxxの部分はご自分のURLをチェックして打ち込んでください。
<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"> </script> <script src="http://xxxxxxxxxx.blogspot.jp/feeds/posts/default?redirect=false&amp;max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

新規記事はNewアイコンがつきます!


abu-farhan.comの外部スクリプトがいいと思ったのは、基本機能だけでなく新規記事のタイトルにNewアイコンが表示されます。 ちょっとしたことですが、嬉しい機能。

唯一の問題はロード時間(解決方法あり)

2012.04.19 記事追加
abu-farhan.comのスクリプトを使ってサイトマップを実現しましたが、唯一の問題はロード時間。 記事数が多すぎるためか、表示完了までちょっと時間がかかります。

クリボウさんのページで書かれていますが、/default?を/summary?に変更することでロードするファイルサイズが激減します。
それにより、ロード時間の問題は解決できますよ!

後はCSSでカスタマイズしましょう

image 導入できたら、後はCSSで見た目をカスタマイズしてみましょう。
CSSを自由自在に使えるまで時間はかかりますが、CSSのTIP系サイトがたくさんありますので慣れるまではそういったサイトを活用するといいと思います。