` で囲んでいるケースに遭遇することがあります。見た目上はそれで問題ありません。しかし、フロントエンドエンジニアである私たちが意識すべきは「ブラウザがどう表示するか」だけでなく、「検索エンジンがその情報をどう解釈するか」という視点です。

日付という情報は、人間にとっては「2023年10月24日」と読めれば十分ですが、機械にとっては非常に曖昧な存在です。今日は、`time` タグとSchema.orgを組み合わせ、検索エンジンに「これは紛れもなく日付データである」と正確に伝えるための、シニア層なら押さえておくべき実装の作法を解説します。

—

なぜ `time` タグが必要なのか？

HTML5で導入された `` 要素は、単なる装飾のためのタグではありません。最も重要なのは `datetime` 属性です。

ブラウザは `datetime` 属性に記述された機械可読なフォーマット（ISO 8601形式）を読み取ることで、その要素が「いつ」を指しているのかを確定させます。例えば、ブログの更新日やイベントの日時。これを `time` タグで囲むことで、ユーザーエージェント（検索エンジンのクローラー等）に対し、「ここには日付情報があるぞ」と明示的なシグナルを送ることができるのです。

構造化データとの連携で「検索結果」をリッチにする

ここで一歩進んで、Schema.orgの構造化データ（JSON-LD）と連携させます。Googleの検索結果で、日付がリッチスニペットとして表示されたり、イベント情報がカルーセル形式で並んだりするのを見たことがあるはずです。あれは、HTML内の情報と構造化データが正しく紐づいているからこそ実現できています。

実装のポイントは、「人間が見るためのテキスト」と「機械が読むためのデータ」を一致させることです。

—

実践：現場で使えるベストプラクティス・コード

以下は、ブログ記事の日付と更新日を想定した、SEO的にも非常に堅牢な実装例です。そのままコピペして、お手元のプロジェクトに組み込んでみてください。

フロントエンドの最適化戦略

公開日:
2023年10月24日

最終更新日:
2023年10月25日

ここがプロのこだわりポイント

1. ISO 8601形式の徹底: `datetime` 属性には必ず `YYYY-MM-DDThh:mm:ss+09:00` のような形式でタイムゾーンまで含めるのが鉄則です。サーバーサイドでの日付処理とズレが生じないよう、常にUTCまたはオフセット付きで管理しましょう。
2. JSON-LDとの一貫性: `time` タグに記述した日付と、`datePublished` などのJSON-LDデータが食い違っていると、検索エンジンは混乱します。フロントエンドのテンプレートエンジン（ReactのPropsやVueのデータバインディングなど）を利用して、同一のソースから生成されるように設計するのが吉です。

—

最後に：機械への配慮は、ユーザーへの配慮

「SEOのためにタグをいじるのは面倒」と思うかもしれません。しかし、検索エンジンがコンテンツを正しく理解し、適切なユーザーに届けてくれることは、結果としてあなたの書いたコードが評価されることに繋がります。

ブラウザのレンダリングエンジンは、`time` タグがあってもなくても見た目には影響を与えませんが、検索エンジンという「もう一人のユーザー」に対して、あなたのサイトがどれだけ親切に情報を構造化しているか。その小さな積み重ねが、長期的なサイトの信頼性を形作ります。

次回の実装では、ぜひ `` タグを単なるマークアップの道具ではなく、検索エンジンとのコミュニケーションツールとして活用してみてください。一歩先を行くエンジニアなら、そこまでこだわって当たり前ですからね。