ワードプレス(WordPress)で更新日や公開日を表示させるSEO上の利点と表示させる方法

WEB制作・開発実例・コラム
2018.12.28
2019.01.07

記事などを見ていて、日付が表示されていることはありませんか?記事を見るユーザーからすると、 日付があったほうが、その記事が新しいかどうか判断できますね。ワードプレス(WordPress)では、比較的簡単に日付を出すことが出来ます。今回は、公開日・更新日の出し方と更新日を表示させることによるSEO上のメリットをご紹介します。


更新日や公開日を表示させる目的

記事ページで記事の更新日や公開日を表示させる目的には以下の2つが考えられます。

ユーザーに最新情報であることを伝える

先ほども記載しましたが、更新日や公開日を表示させる目的は、ユーザーにこの記事はいつ書いて、いつ更新されたか分かりやすく伝えるためです。更新日や公開日がないとユーザーは記事がいつ書かれたものか、最新情報なのかがわからなくなります。せっかく最新情報だとしても、公開日時や更新日時がないだけで離脱してしまう可能性があります。訪れたユーザーが離脱しないように公開日や更新日を表示させると良いです。

なお、更新日や公開日があると検索結果に日付が表示されます。※アルゴリズムによって自動化されているため日付を指定することはできません。

検索結果に日付が表示されている例

Googleも更新日や公開日をマークアップすることを推奨している

Googleのジョン・ミューラー氏が、2018年11月27日のWeb担当者向けフォーラムにおいて ユーザーからの「構造化データでマークアップするなら、公開日と更新日のどちらを使用すべきか?」という質問に対してどちら使っても良いが、更新日と公開日両方をマークアップすることを勧める。Googleのアルゴリズムでは両方とも役立つと回答しています。

ただし、Googleに正しく伝わるよう日時はページ内で統一するようにしたほうが良いです。

ワードプレス(WordPress)で更新日や公開日を表示させる方法

ワードプレス(WordPress)で更新日や公開日を表示させるためには、phpを編集します。主に編集するファイルは、投稿のテンプレート(single.php)や固定ページのテンプレート(page.php)になるかと思います。
表示したい場所に以下のようなコードを追記するだけです。

公開日を表示させる場合

公開日を表示させるためには、the_timeを使います。以下のコードを追加すると[記事公開日]2018/12/27と表示されます。

[記事公開日]:<?php the_time('Y/m/d'); ?>

更新日を表示させる場合

公開日を表示させるためには、the_modified_dateを使います。以下のコードを追加すると [最終更新日]2018/12/27と表示されます。なお更新日を表示させる場合は、記事を頻繁に見直すサイトの方がより効果が出ます。

[最終更新日]:<?php the_modified_date('Y/m/d'); ?>

公開日と更新日が同じだった場合の処置

 公開日と更新日が同じだった場合、同じ日付を表示することになります、同じ日付を表示させたくない場合は、以下のように、公開日と更新日が異なる場合だけ更新日を表示するようにすると良いです。

[記事公開日]:<?php the_time('Y/m/d'); ?>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
[最終更新日]:<?php the_modified_date('Y/m/d') ?>
<?php endif; ?>

 ただ予約投稿した場合、更新日の方が記事公開日よりも古くなってしまう可能性もあるので、functions.phpに以下を追加すると良いです。

function get_mtime($format) {
	$mtime = get_the_modified_time('Ymd');
	 $ptime = get_the_time('Ymd');
	if ($ptime > $mtime) {
		return get_the_time($format);
	} elseif ($ptime === $mtime) {
		return null;
	} else {
		return get_the_modified_time($format);
	}
}

更新日や公開日の前にアイコンを表示させるにはFont Awesomeを使う

記事の中には、テキストで公開日や更新日と書いてあるのではなく、以下のように公開日や更新日がアイコンになっている記事を見たことがあるかと思います。 ここでは、日付をオシャレに表示させる方法をご紹介します。

公開日や更新日がアイコン化されている例

今回は導入が簡単な「FontAwesome」を使います。FontAwesomeではダウンロードのアイコンやトップページのアイコンなど使えそうなアイコンが揃っています。また画像と違って色やサイズを自由に変更できます。

ダウンロードして使うこともできますが、ワードプレス(WordPress)テーマのheader.phpに以下のコードを追加すれば使用できます。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Font Awesomeを使ってアイコン化させる例

header.phpに以下を追加したうえで、公開日や更新日をアイコン化させるためには、cssにsampleクラスの疑似要素:beforeに、以下のような記述を追加します。2行目の’\f073’はカレンダーを表すアイコンです。

sample:before{
    content: '\f073';
    display: inline-block;
    font-family: FontAwesome;
}

その他のコード表は以下が参考になるかと思います。

Font Awesomeのアイコン参考記事

更新日や公開日の前にアイコンを表示させる例

ここでは、更新日や公開日の前にアイコンを表示させたhtmlとcss例を記載します。

htmlの記述
<div class="date"><?php the_time('Y.m.d'); ?></div>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<div class="update">
<?php the_modified_date('Y.m.d') ?>
</div>
<?php endif; ?>
cssの記述
.date,.update{
    font-size: 16px;
    margin-bottom: 5px;
}

.date,.update{
	font-size: 16px;
    color: #aaa;
    display: inline-block;
	margin:0px 0px 0px 110px;
}

.update{
    margin-left: 20px;
}

.date:before{
    content: &quot;\f073&quot;;
    font-family: FontAwesome;
    color: #aaa;
}

.update:before{
    content: &quot;\f021&quot;;
    font-family: FontAwesome;
    color: #aaa;
}

まとめ

いかがでしたか?公開日や更新日はGoogleが推奨していたり、ユーザーにとっても記事を見る際の重要な情報だったりします。その割に、ワードプレス(WordPress)では比較的簡単に設置できますので、まだ記事に公開日や更新日がない場合は設置してみてはいかがでしょうか。

コラム

最新コラム

人気コラム

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)