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

Webサイト制作
Web開発
2018.12.28

記事などを見ていて、日付が表示されていることはありませんか?記事を見るユーザーからすると、 日付があったほうが、その記事が新しいかどうか判断できますね。ワードプレス(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: "\f073";
    font-family: FontAwesome;
    color: #aaa;
}

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

まとめ

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

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

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