はてなブログの更新日時をレスポンシブテーマ「UnderShirt」で自動表示させる方法【SEO対策】

Masaharu Wada

2019年4月7日 16:41

リライトは、SEOにとって非常に重要です。

そしてそのリライトを行ったことをGoogleに知らせることも同様にとても重要です。sitemap.xmlに更新情報を載せてクローラーに知らせるのは大前提ですが、その更新日をユーザーも見えるフロントに掲載することも大切です。

クローラーが読み込んでくれるということだけでなくユーザー視点でもその記事の鮮度がどうなのかを確認することができるからです。

公開日の表示はせず、更新日だけ掲載するほうがSEO対策としてより効果的であるという見解があるほどです。

私は「腕時計の読みもの」という時計関連のブログをはてなブログ上で運営しているのですが、はてなブログは更新日時の自動表示をデフォルトの機能で提供していません。

そのためよりSEOを考慮するのであれば、更新日時を表示させる必要があります。今回は、先人の知恵をお借りしながら私が実施した『はてなブログのレスポンシブテーマで更新日時を自動表示させる方法』を備忘録的にまとめました。

はてなブログでの更新日の設定方法

前提として「腕時計の読みもの」は、ろくぜうどん（id:rokuzeudon）さんが作成したはてなブログのテーマ「UnderShirt」を使用しています。
レスポンシブデザインに対応しており、PCだと2カラム、スマートフォンの場合は1カラム表示することができ時計の写真を前面に見せたいため非常に気に入っています。

完成系イメージ

記事作成日時の横に更新日時が並んでいる形で表示されていることを目標とします。

上部写真の左からPC表示時とスマホ表示時です。実際の形は以下の私のサイトにアクセスして確認してみてください。

1. 最新のjQueryとFont Awesomeを読み込む

はてなブログの「ダッシュボード」を開き、サイドバーにある「設定」をクリックします。「詳細設定」タブを開き「検索エンジン最適化」の中にある「headに要素を追加」に以下のコードを記入して保存します。

<!--jQuery 読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Font Awesome 読み込み-->
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">

・jQueryの最新版はこちらから取得可能です。
・Font Awesome最新版はこちらから取得可能です。

2. HTMLを設定する

先述のつばさのーとの記事の「サイトマップ利用バージョン」のコードをコピーします。はてなブログの「ダッシュボード」を開き、サイドバーの「デザイン」をクリック。スパナのアイコンの「カスタマイズ」を開き「記事」を選択し、「記事下」にコピーしたものを貼り付け保存します。

貼り付ける際は、「// ここにサイトマップへのURLを入力してください。」の部分に必ず自分のブログのサイトマップURLを記述するようにしてください。

※スマホ表示の際に更新日が記事タイトルの上に表示されてしまう場合の対策は手順4に後述します。

3. CSSを貼り付け

続いて、「デザイン」内「カスタマイズ」にある「デザインCSS」に以下のコードをコピペしてください。

/*--------------------------------------
 ↓更新日時の表示設定↓
--------------------------------------*/
.lastmod {
	background-color: transparent;
	color: #999999;
	padding: 5px 0px;
	text-decoration: none;
	font-size: 15px;
	display: inline;
	margin-left: 0px;
	font-family: ''Poppins',-apple-system,BlinkMacSystemFont,Segoe UI,'Helvetica Neue','Helvetica','Arial','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}
.lastmod::before {
	margin-right: 5px;
	margin-left: 10px;
	padding-left: 3px;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #999999;
	content: '\f01e';
}
.entry-date a {
	background-color: transparent;
	padding: 5px 0px 5px 6px;
	text-decoration: none;
	font-size: 15px;
	display: inline;
}
.entry-date a::before {
	margin-right: 5px;
	padding-left: 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f073';
}
/*--------------------------------------
 ↑更新日時の表示設定↑
--------------------------------------*/

上記のコードは、以下のサイトのCSSを参考に最新版の「Font Awesome 5」の無料バージョンの読み込みと「UnderShirt」デザインに最適化したものです。

4. スマホ表示時に更新日が記事タイトルの上に表示されてしまう場合

私の場合は、PC表示の際はしっかりと作成日の横に更新日が続いて並んでいたのですが、スマートフォンで実機確認を行うと記事タイトルの上に表示されてしまう事象が発生していました。

そのためHTMLの一部を下記のように「AS-IS」から「TO-BE」に書き換える処理をしています。

AS-IS
62行目〜65行目の部分です。

$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}

TO-BE

$('.entry-date').append($container);
}

これはJavascriptで表示箇所を制御するためにタグベースで処理している部分が悪さしているためのようでした。

どの部分かわからないよという方は以下のコードをHTMLをご活用ください。※自分のサイトマップの更新をお忘れなきよう。

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://www.tsubasa-note.blog/sitemap.xml'; // URLの入力例
url = ''; // ここにサイトマップへのURLを入力してください。
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>

更新日掲載にあたり参考にしたサイト

はてなブログに更新日を掲載する方法はいくつかのブログですでに扱われている内容ですが、私のやり方は以下の先人のお知恵を応用したものとなります。

まとめ

情報の鮮度というものはSEO対策においてやはり非常に重要であり、ただ更新日時を表示すればよいというものではありません。結局はしっかりとリライトをしていくことが重要なのです。

更新日時が上手く表示されたらここからが本番ということを忘れずに！

以上、レスポンシブデザインでの更新日時の設定でした。お役に立てていれば幸いです。

この記事が気に入ったらサポートをしてみませんか？