ブログ運営

はてなブログでHTMLサイトマップの作り方

はてなブログの利用方法やカスタマイズ記事

はてなブログにはWordPressのプラグイン「PS Auto Sitemap」のようにユーザー向けのHTMLサイトマップを自動で作成してくれる機能がありません。

そこで、今回ははてなブログに自動でHTMLサイトマップを作るスクリプトを作成します。

はてなブログにHTMLサイトマップを作成する

ユーザー向けのHTMLサイトマップは、カテゴリーとそれに属する記事という形で表示されることが多いので、それに則って作成してみます。

サイトマップの作成手順
  • Step1
    固定ページを作成
    はてなブログの機能にある「固定ページ」を新規で作成します。
  • Step2
    サイトマップ表示エリア作成
    HTMLサイトマップを表示するタグを埋め込みます。
  • Step3
    スクリプト貼り付け
    今回作成するJavascriptを固定ページにコピー&ペーストします。
  • Step4
    固定ページ公開
    作成した固定ページを公開します。

固定ページを作成

はてなブログで「固定ページ」を新規作成します。
はてなブログで固定ページを作成する方法
はてなブログで「固定ページ」を作成するにはメニューで「固定ページ」を選択してURLを入力し、作成します。

サイトマップ表示エリア作成

今回作成するHTMLサイトマップを表示するエリアを「固定ページ」に設定します。
HTMLサイトマップを表示したい部分に以下のソースを埋め込みます。

<div id="auto-site-map"></div>

この前後は自由に記事を編集することが可能です。

スクリプト貼り付け

作成した「固定ページ」にスクリプトを以下の貼り付けます。

スクリプトの処理概要は

ここにタイトル
  • Step1
    アーカイブページ取得
    指定されたサイトのアーカイブページをJQueryのAjax()を用いて取得します。
  • Step2
    カテゴリー、URL取得
    取得したソースからカテゴリーと記事のURL、タイトルを抜き出します。
  • Step2
    次のアーカイブページチェック
    次のアーカイブページがあればStep1へ戻ります。

です。

  <script>
    $(document).ready(function(){
      if( $('#auto-site-map').length == 0 ){
        console.log( "no tag end--->" + $('#auto-site-map').length ) ;
        return ;
      }
      var page = 1 ;
      var myUrl = 'https://www.fair-skinned-monster.com'
      var  url = "" ;
      var category = "" ;
      var  sitemap = new Array() ;
      while( 1 ){
        var data = getArchive( myUrl + '/archive?page=' + page);
        var html = jQuery(jQuery.parseHTML(data));
        html.find('.archive-entry .entry-title a').each( function( i, val )
        {
          url = $( val ).prop( "outerHTML" ) ;
          var category_names = jQuery(html.find( '.archive-entry' ).eq( i ).find( '.categories' )) ; 
          var   cate_len = category_names.children('a').length ;
          for( var cate_cnt = 0 ; cate_cnt < cate_len ; cate_cnt++ ){
            category = category_names.children('a').eq( cate_cnt ).html() ;
            if( sitemap[ category ] == undefined ){
              sitemap[ category ] = new Object() ;
              sitemap[ category ].url = new Array() ;
            }
            sitemap[ category ].url.push( url ) ;
          }
        });
        if( html.find('.pager-next').length == 0 ){
          break ;
        }
        page++ ;
      }
      var  htmlstr = "" ;
      for( var i in sitemap ){
        htmlstr += "<h2>" + i + "</h2>" ;
        htmlstr += '<ul class="auto-map">' ;
        for( var j = 0 ; j < sitemap[ i ].url.length ; j++ ){
          htmlstr += '<li class="auto-map-url">' + sitemap[ i ].url[ j ] + "</li>" ;
        }
        htmlstr += "</ul>" ;
      }
      $("#auto-site-map").html( htmlstr ) ;
    });
    function getArchive(urlInfo){
      var data= $.ajax({
        type: 'GET',
        url: urlInfo,
        async: false,
        dataType: 'html',
        success: function( data ){
        },
        error:function() {
          //取得失敗時に実行する処理
          console.log("何らかの理由で失敗しました");
        }
      }).responseText;
      return data;
    }
  </script>

12行目の「myUrl = ‘https://xxxxx.com’」にはサイトマップを作成するサイトのURLを設定してください。

固定ページ公開

あとは作成した「固定ページ」にタイトルをつけて公開するだけです。

実際に作成したサイトマップは次のようになります。

まとめ

はてなブログではHTMLサイトマップを作成する機能はありませんが、JavascriptでアーカイブページからカテゴリーとURL、記事タイトルを抜き出すことで自動で作成できるようになります。

処理速度に問題がありますので今後の改善項目になりますね。


以上、はてなブログでHTMLサイトマップの作り方でした。

おすすめWordPressテーマ
THE THOR(ザ・トール)は、SEO・デザイン・機能の3拍子揃った国内最高峰のWordPressテーマです。
ザ・トールは、国内トップクラスのWEBデザイナー・SEOコンサルタントであるFITが長年培ってきたノウハウのすべてを注ぎ込んだ国内最高峰のWordPressテーマです。
【ザ・トールの特徴】

  1. 圧倒的にSEOに強く、抜群に上位表示されやすい
  2. おしゃれで美しいデザイナーズサイトが簡単に作れる
  3. アクセスUP、収益UPを強力に後押しする「集客・収益化支援システム」を搭載
項目名
価格 14,800円(税別)
サポート インストール前:「インストールマニュアル(1ページ)・安心メールサポート」
インストール後:「操作マニュアル(100ページ以上)・会員フォーラム・QAコーナー」
複数サイト 利用可能

【圧倒的にSEOに強く・上位表示されやすい】 THE・THOR(ザ・トール)

BRIDGEは記事コンテンツの価値を高め広告収入をUPさせる新しいアフィリエイト専用WordPressテーマです。ランキング・比較・口コミ・レビューサイトなど、アフィリエイトに特化して開発された「BRIDGE」は、検索者と有益な商品・サービスを提供する事業者との架け橋となり本物の価値あるコンテンツを配信するアフィリエイターの広告収入をアップさせます。
おすすめ度
価格 19,800円(税込)
サポート メールにて受付
複数サイト 利用可能

BRIDGE

FAMOUSは個人の認知度と価値をあげることのできる個人向けブランディングサイトに最適なWordPressテンプレートです。
SNSよりもさらに上にいける表現力を発揮できる機能やデザインセンスのあるテーマで、たくさんのライバル群から突出したい方やライバルとの差別化を図りたい方、売上を伸ばしたい方などにおすすめする「パーソナル・ブランディング」のWordPressテーマです。
おすすめ度
価格 25,800円(税込)
サポート メールにて受付
複数サイト 利用可能

FAMOUS