kazuki-iwata’s diary

MENU

【はてなブログ/SEO対策】投稿日のデザインカスタマイズと更新日の表示


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

こんにちは岩田です。

 

今回は、投稿日のデザイン変更及び更新日を新たに表示させるカスタマイズをしましたのでご紹介します。

 

カスタマイズの部分だけ知りたい方はカスタマイズの部分から読んで下さい。

 

 

デザインのビフォーアフター

まずはじめにこんな感じになりました。

変更前

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


変更後
f:id:kazuki-iwata44:20220514123538j:image

 

投稿日の前に時計のマークが新たに表示され、隣には更新日がマークとともに表示されています。

 

まぁ、投稿日前のデザインは正直どちらでもよかったのですが、更新日との判断がつきにくいかなと思って入れることにしました。

 

 

更新日を記事に表示させることはSEO対策になる?


そもそもですが、更新日って記事に表示させるべきなのでしょうか?

なんとなく、新しい記事か古い記事かっていう判断にはなっているとは思っていました。

 

更新日がコンテンツの新しさの判断基準になる

更新日はユーザー及び検索エンジンの双方で、SEOの観点からキーとなる情報である

以下引用です。

ユーザーの多くはページの「更新日」を見て、そのコンテンツが新しいか古いかを判断しています。

 

古い記事よりも新しい記事を見たくなるのはごく自然なことです。一方でGoogleも、新しい情報を優遇し、検索結果の順位に反映することで検索結果の精度を上げようと画策しています。逆に更新日が古いと検索結果の順位はどんどん下がっていきます。

 

つまり、更新日はユーザー及び検索エンジンの双方で、SEOの観点からキーとなる情報になっているのです。

SEOの観点から考える、【更新日】の重要性 | ウェブラボ(株)スタッフブログ

 

更新日はユーザーだけでなく、検索エンジンにとっても重要な要素であるようです。

 

デフォルトでは更新日は表示されない

更新日の情報がSEOの観点で大事だということはお分かりいただけたと思いますが、残念ながらはてなブログにおいては更新日の表示機能は備わっていません。

そのため、更新日を表示させるにはカスタマイズしてあげる必要があります。



じゃあやってみようという方は、さっそくコピペして貼り付けていきましょう。

 

カスタマイズの方法

まずはじめに今回の内容はこちらのブログを参考にさせていただきました。

souiunogaii.hatenablog.com

こちらをみてカスタマイズしていただいても構いませんが、今回は投稿日のデザインCSSもまとめておりますのでそのまま参考にしていただいた方が手っ取り早いと思います。

万が一、このブログで上手くいかなかった場合は上記サイトを参考にしてみてください。

 

手順

3つの要素への貼り付けが必要となります。

全て貼り付けると投稿日のデザインと更新日の両方がカスタマイズされます。

  1.  headへの貼り付け
  2. 記事下部への貼り付け
  3. CSSへの貼り付け

 

head内への貼り付け

貼り付け場所

管理画面より設定→詳細設定にあります。

headの一番下に貼り付けて下さい。

 

貼り付け内容

◆下記内容を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">

 

これで1つ目が終わりです。

記事下部への貼り付け

貼り付け場所

管理画面→デザイン→カスタマイズ→記事→記事下に貼り付けます。

一番下に貼り付けて下さい。

 

注意※「url='https://~~~/sitemap.」の部分だけは、自分のブログのURLに修正が必要です。※

貼り付け内容

◆下記HTMLを記事下部にコピペしてください。変更必要箇所あり!◆
<!-- ↓----記事の更新日時表示----↓ -->
<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://XXXXXXXXXXXXXXXXXXXXXX.hatenablog.com/sitemap.xml'; //自分のブログURL+「/sitemap.xml」
    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>
<!-- ↑----記事の更新日時表示----↑ -->

これで2つ目が終わりです。

 

CSSへの貼り付け

貼り付け場所

管理画面→デザイン→カスタマイズ→デザインCSSに貼り付けます

※カスタマイズまでは先ほどと同じです。

デザインCSSをクリックして一番下へコピペしてください。

 

貼り付け内容

◆下記CSSをデザインCSSにコピペしてください◆
/*↓----更新日時表示----↓*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
margin-left: 10px;
padding-left: 3px;
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: '01e';
}
.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;
}
/*↑----更新日時表示----↑*/

/*↓----投稿日デザイン----↓*/

.entry-header .entry-date::before {
font-family: "Font Awesome 5 Free"!important; content: "/f017"!important;
}
.archive-entry-header .archive-date::before {
font-family: "Font Awesome 5 Free"!important; content: "/f017"!important;
}
.recent-entries-date-link time::before {
font-family: "Font Awesome 5 Free"!important; content: "/f017"!important;
}
.related-entries-date-link time::before {
font-family: "Font Awesome 5 Free"!important; content: "/f017"!important;
}

/*↑----投稿日デザイン----↑*/

これですべて終わりです。

貼り付けが終わったら変更されているか確認してください。

 

これでご覧いただいた方も私と同じように投稿日と更新日が表示されるようになったはずです。

 

私自身更新日を表示させるようになって日数があまり経っておりませんのでどれほどSEOに効果があるか分かりませんが、古い記事をこれからリライトしようと思っている方にはとても効果的ではないかと思います。

 

今回は以上です。

<

 

 

kazuki-iwata44.hatenablog.com