こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
Webサイトを作っていると、「日付」を表示する場面ってすごく多いですよね。ブログの投稿日や、イベントの開催日など。皆さんは、これらをただの「テキスト」として書いていませんか？
実は、HTMLには「日付を、コンピューターにもしっかり伝えてあげるための特別な箱」が用意されているんです。それが今回紹介する `
「難しそう…」と思いましたか？大丈夫です！身近な例えを交えて、検索エンジンに愛される正しい書き方をマスターしていきましょう。
—
1. なぜ「ただの文字」じゃダメなの？
例えば、あなたが友人に「今度の日曜に会おう」とメールしたとします。人間なら「あ、今度の日曜は○月○日だな」とカレンダーを見て理解できますよね。
でも、Googleの検索ロボット（クローラー）は、もっと不器用なんです。Webページにある「2024年10月1日」という文字を見ても、「これは日付なのか、それとも商品の型番なのか？」を一瞬迷ってしまうことがあるんです。
そこで登場するのが `
—
2. `` タグの基本：datetime属性という「魔法のメモ」
`
- 見た目: 人間が見るためのもの（例：2024年10月1日）
- datetimeの中身: 機械が読むためのもの（例：2024-10-01）
人間には「10月1日」と書いてあるけど、裏側では「これは2024年10月1日のことだよ！」と正確な形式で教えてあげる。これが信頼関係の第一歩です。
基本の書き方
—
3. さらにレベルアップ！Schema.org（スキーマ・オルグ）との連携
さて、ここからが本題です。検索エンジンに「この記事はいつ書かれたものか」を完璧に伝えるには、Schema.org（スキーマ・オルグ）という「共通言語」を使います。
これは「Webサイトのデータを、世界中の検索エンジンが共通して理解するための辞書」のようなもの。これを使うと、Googleの検索結果に「公開日」がリッチに表示されやすくなり、クリック率の向上も期待できるんです！
構造化データを入れたコード例
美味しいコーヒーの淹れ方
公開日：
ポイントの解説：
1. `itemscope` / `itemtype`: 「ここから先は記事の情報ですよ」という囲い込みです。
2. `itemprop=”datePublished”`: 「この中にある日付は、公開日（datePublished）のことですよ」というラベル貼りです。
—
4. 初学者がつまずきやすいポイント
ここまで読んで「うわ、覚えることが増えた…」と不安になったあなた、安心してください。全部一度に完璧にする必要はありません！
- 「形式が間違っていたらどうしよう？」
→ 大丈夫です。まずは `
- 「全部のタグに書かないといけないの？」
→ 記事の公開日や更新日など、重要な日付だけで十分です。無理せず、できるところから始めてみましょう。
—
最後に：Webサイトは「誰かに伝えるためのもの」
HTMLを書くことは、ただ画面に文字を出すことではありません。「この情報は、こういう意味ですよ」と、読み手（人間もロボットも）に優しく教えることなんです。
`
ぜひ、次回のコーディングから `
コメント