ブログ記事に更新日を表示するようにした

技術・テクノロジー

これまでこのブログでは記事の投稿日(公開日)のみ表示し、更新日の情報は表示していなかったのですが、つい先日更新日を表示するように変更してみました1

記事の投稿日を表示するにあたって、その情報が正しく検索エンジンに認識されるために、改めて適切なマークアップについて調べてみました。

Google検索のスニペットに適切な日付を表示するためのベストプラクティス – 海外SEO情報ブログ やこの記事内で表示されている ウェブページの最適な日付を Google 検索に知らせるには  |  Google 検索セントラル ブログ  |  Google Developers という記事、その他記事投稿サービスや各種ブログで実際に使われているマークアップを確認し、このブログでは以下のように記述してみることにしました。

<div>
  投稿日:
  <time
    datetime="2022-01-21T04:25:00.000Z"
    itemprop="datePublished"
  >
    2022年1月21日
  </time>
</div>
<div>
  更新日:
  <time
    datetime="2022-02-01T08:27:00.000Z"
    itemprop="dateModified"
  >
    2022年2月1日
  </time>
</div>
投稿日と更新日の表示

<time>要素にdatetimeitemprop属性を付与しています。おそらく、これが一番丁寧な記述なんじゃないかなぁと思っています。あとは、構造化データによる記事投稿日、更新日も記述していますが、これは前から行っていました。

この辺の細かい設定ができるのは、自作ブログのメリットですね。

参考:メインブログをはてなブログからnuxt/content+Vercelに移行しました

いろいろな記事を見る限りだと Google の検索結果に最終更新日を表示するためには更新日だけ記述したほうが良い、と書かれたケースもあるのですが、個人的には両方書かれていたほうが読者からするとわかりやすいと思いますし、一旦はこのままでいく予定です。

また、「更新日」という表示名に関しては、もしかすると様子を見て「編集日」や「最終更新日」などに今後変更するかもしれません。


先ほど紹介した Google のページでは、日付情報は<p>で囲まれているのみで特に凝ったことはしていなかったので、もしかすると不要なマークアップを行っているのかもしれません。とはいえ、このマークアップをしていて損をすることは無いんじゃないかなぁと勝手に思っているので、自己満足としてこの記述を続けていこうと思います。


  1. 更新日がある際は表示し、更新していない記事に関しては従来の投稿日のみの表示となります。