`といったタグはすぐに馴染むのですが、「あれ、このテキストってどのタグで囲めばいいんだろう？」と悩むこと、ありますよね。特に「日付」や「時刻」の扱いは、その代表格かもしれません。

今日は、そんな日付をただの文字列として放置せず、検索エンジンにも人間にも親切な形に変える「time要素」と「構造化データ」の連携についてお話しします。

難しそうに聞こえるかもしれませんが、実は「荷物に住所を書く」のと同じくらいシンプルなことなんですよ。さあ、一緒に見ていきましょう！

—

1. なぜ「time要素」が必要なの？

例えば、ブログの記事ページに「2023年10月25日」と書いたとしましょう。

私たち人間なら「あ、10月の下旬に書かれた記事だな」と分かりますよね。でも、Googleのような検索エンジンのロボットは、ただの「文字の羅列」としてしか認識できません。もしロボットが「2023年」という文字を「金額」や「人数」と勘違いしてしまったら……ちょっと残念ですよね。

そこで登場するのが``タグです。

2023年10月25日

`datetime`属性の中に、ロボットが世界共通で理解できる「YYYY-MM-DD」形式で書いてあげる。これだけで、検索エンジンは「おっ、これは日付だな！」と一瞬で理解してくれるようになります。

—

2. さらに一歩先へ！「Schema.org」で信頼性をプラス

さて、ここからが本題です。検索エンジンに「この記事はいつ公開されたのか」をより正確に、かつ信頼性高く伝える方法があります。それがSchema.org（スキーマ・ドット・オーグ）という仕組みです。

例えるなら、「荷物に発送人や宛先を正しく記入する配送伝票」のようなものですね。

これを使うと、Googleの検索結果で「公開日：2023/10/25」といった情報がリッチに表示されやすくなり、クリック率の向上も期待できます。

実践！マークアップのサンプル

実際のコードはこうなります。まずは見てみましょう。

何が起きているのか分解してみましょう

1. `itemscope itemtype=”…”`: 「ここから先はブログ記事のデータだよ」という宣言です。
2. `itemprop=”datePublished”`: 「このtime要素の中身は、公開日（datePublished）の情報ですよ」というラベル貼りです。
3. `datetime`の中身: `2023-10-25T10:00:00+09:00` と書きました。これは「T」で時刻を、「+09:00」で日本のタイムゾーンであることを示しています。少し複雑に見えますが、テンプレートとしてコピーして使えば大丈夫ですよ！

—

3. 初学者がつまずきやすいポイント

ここまで読んで「うわ、ルールが多くて大変そう……」と感じた方もいるかもしれません。でも、安心してください。

• 「全部完璧にやらなきゃ！」と思わなくて大丈夫

まずは``と書くことから始めてみてください。それだけでも、ただの文字よりずっと価値があるんです。

• 見た目は変わらないの？

そう、実はこのマークアップをしても、ブラウザの見た目は一切変わりません。でも、「舞台裏の準備」として非常に重要なんです。見えないところを丁寧に整える。これこそが、一流のWeb職人の第一歩です。

—

最後に：小さな積み重ねが「良いサイト」を作る

Web制作をしていると、CSSで派手なアニメーションを作ったり、JavaScriptで複雑な動きを実装したりすることに目が行きがちです。でも、今回紹介したような「検索エンジンとの対話」を丁寧に行っているサイトは、結果としてGoogleからもユーザーからも信頼される「強いサイト」に育っていきます。

今日書いた``タグは、あなたのサイトが正しく評価されるための大切な種まきです。

まずは、自分のブログや制作中のサイトで、日付の部分をひとつだけ``タグに変えてみてください。「自分の書いたコードが、世界中のロボットに伝わる」――そう考えると、なんだかワクワクしてきませんか？

もし分からないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフを、これからも応援しています！