Googleも更新日や公開日をマークアップすることを推奨している
Googleのジョン・ミューラー氏が、2018年11月27日のWeb担当者向けフォーラムにおいて
ユーザーからの「構造化データでマークアップするなら、公開日と更新日のどちらを使用すべきか？」という質問に対してどちら使っても良いが、更新日と公開日両方をマークアップすることを勧める。Googleのアルゴリズムでは両方とも役立つと回答しています。
Googleに正しく伝わるよう日時はページ内で統一しましょう。
ワードプレス（WordPress）で更新日や公開日を表示させる方法
ワードプレス（WordPress）で更新日や公開日を表示させるためには、phpファイルを編集します。編集するファイルは、投稿のテンプレート（single.php）か固定ページのテンプレート（page.php）変更したい日付けのファイルをFTPソフトでバックアップ取ってから表示したい場所に以下のコードを追記します。
公開日を表示させる場合
公開日を表示させるためには、the_timeを使います。以下のコードを追加すると［記事公開日］YYYY/MM/DD形式で表示されます。
［記事公開日］:<?php the_time('Y/m/d'); ?>
更新日を表示させる場合
公開日を表示させるためには、the_modified_dateを使います。以下のコードを追加すると
［最終更新日］YYYY/MM/DD形式で表示されます。更新日を表示させる場合は、記事を頻繁に見直すサイトの方が望ましいです。
［最終更新日］:<?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+QkPxCAFlNEevoEh2Sl0sibVcOQVnN" crossorigin="anonymous">
Font Awesomeを使ってアイコン化させる例
header.phpに以下を追加して、公開日や更新日をアイコン化するには、cssにsampleクラスの疑似要素:beforeに、以下のようなコードを追加します。2行目の’\f073’はカレンダーのようなアイコンです。
sample:before{
content: '\f073';
display: inline-block;
font-family: FontAwesome;
}
更新日や公開日の前にアイコンを表示させる例
ここでは、更新日や公開日の前にアイコンを表示させた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;
}
