iPhone LIFE

iPhone LIFEは、iPhoneを中心としたガジェット関連の情報をお届けする個人ブログです。iPhoneの魅力やオススメの使い方などを紹介しています。

iPhone LIFE

はてなブログで訪問者向けのHTMLサイトマップを自動でつくる

f:id:chocoIate:20190221012019j:plain

はてなブログに訪問者向けのHTMLサイトマップを作成するお話しです。

  

サイトマップとは

サイトマップとは、ページ構成をひと目で分かるようにした、目次のような案内ページです。
訪問者向けのサイトマップがあると、はじめて訪問した人でも、どこに何があるのかがすぐに分かり、みたいページに速やかにアクセスできるため、ユーザビリティが優れていると言えます。
シンプルな構成は、HTML形式で全てのページへのリンクを一覧したものになります。

 

サイトマップの種類

サイトマップには「訪問者向けのサイトマップ」と「WEB上の情報を自動で収集するプログラム(以下、クローラー)向けのサイトマップがあります。
・訪問者向けのサイトマップ・・・ページの構成・全体像などが確認できる。
・クローラー向けのサイトマップ・・・クローラーが効率よく巡回できる。

 

1.訪問者向けのサイトマップ

はてなブログの場合、通常の記事作成と同じ要領で、HTML形式で作成することになります。固定ページに「sitemap」を作成するのがオススメです。
WordPressの場合だと、HTMLサイトマップを自動で作成してくれるプラグインがありますが、はてなブログには、いまのところ、その様なツールは用意されていません。

 

2.クローラー向けのサイトマップ

クローラー向けのサイトマップは、XML形式で作成します。はてなブログでは、デフォルトで「sitemap.xml」が用意されており、「自分のブログのURL/sitemap.xml」で内容を確認することができます。
クローラーに認識されると、Googleなどの検索サイトに表示され、検索流入が期待できるようになります。さらに、Googleが無償で提供している「Google Search Console」に「sitemap.xml」を読み込ませるこにより、検索結果への反映を促進させることができます。

 

はてなブログで自動で訪問者向けのHTMLサイトマップをつくる

はてなブログには、WordPressのようなサイトマップ作成の便利なプラグインは無いのですが、jQueryとJavaScriptを使うことによって、自動でHTMLサイトマップを作成することができます。
ざっくりとまとめると、ブログのアーカイブページから、「カテゴリ」「記事のURL」「タイトル」の情報を抜き出し、自動でHTMLサイトマップを作成するフローになります。
アーカイブは「自分のブログのURL/archive」で確認できると思います。

 

HTMLサイトマップの作成方法

  1.jQueryを埋め込む

jQueryを利用するため、ヘッダーにスクリプトを埋め込みます。はてなブログの設定に用意されている「head要素」に追加するとよいでしょう。

「ダッシュボード」>「設定」>「詳細設定」>「headに要素を追加」

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

 

2.サイトマップ用の固定ページを作成する

「ダッシュボード」 > 「固定ページ」 > 「ページをつくる」
「自分のブログのURL/sitemap」をつくる

 

 3.固定ページを編集する

ページのデザイン等については、通常の記事編集と同じ手順で行います(とくに何も編集しなくても動作します)。
エディタをHTMLモードにし、HTMLサイトマップを表示したい場所に、次のソースコードを記述します。

<!-- HTML-SITEMAPを自動作成 -->

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

 

4.アーカイブ情報を取得するスクリプトを貼り付ける

エディタをHTMLモードにし、フォーム内の先頭に次のスクリプトを貼り付けてください。
なお、上段にある「myUrl = 'ご自分のサイトのURL'」は、ご自分の環境に合わせて設定してください。

 

<!-- ARCHIVEよりSITEMAPを取得 -->

<script>// <![CDATA[

$(document).ready(function(){

    if( $('#auto-site-map').length == 0 ){

      console.log( "no tag end--->" + $('#auto-site-map').length ) ;

      return ;

    }

    var page = 1 ;

    var myUrl = 'ご自分のサイトのURL'

    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>
 

以上で設定は終了となりますので、一旦保存をしてください。
プレビュー又は公開から「自分のブログのURL/sitemap」で内容を確認してみてください。アーカイブ情報を取得し、HTMLサイトマップが表示されるようになると思います。読み込みに時間が掛かる場合がありますので、その場合は少し様子をみてください。

作成したサイトマップページについては、サイドバー、ヘッダー、フッターなど、お好みの場所に設置しましょう。

 【当ブログのサイトマップ】