なぜ「人間」と「検索エンジン」は、同じ日時を見ても「違うこと」を考えているのか？
Webサイトを作っていると、ブログの更新日やイベントの開催日時を表示する場面によく出会いますよね。「2024年10月25日」と画面に書けば、私たち人間はすぐに「ああ、今日のことだな」と理解できます。
でも、ちょっと待ってください。Googleの検索ロボットや、スマホの読み上げソフトにとって、その「2024年10月25日」という文字列は、ただの「文字の羅列」に過ぎません。これでは、せっかくの大切な情報が宝の持ち腐れになってしまいますよね。
そこで登場するのが、今回解説する`という魔法のツールです。これを使うと、人間には読みやすく、機械には「これが正確な日時ですよ」と伝えることができるようになります。
—
``タグは「機械への翻訳機」
`
イメージとしては、「お土産屋さんの値札」を想像してみてください。
値札には「1,000円」と書かれていますよね。でも、お店のレジにはバーコードが付いています。私たち人間は「1,000円」を見て買い物をしますが、レジの機械は「バーコード」を読み取って正確に金額を処理します。
`datetime`属性は、まさにこの「バーコード」の役割を果たしているんです。
—
迷わず書ける！`datetime`属性の書き方ルール
`datetime`属性には、世界共通のルールである「ISO 8601」という形式を使います。難しそうに聞こえるかもしれませんが、基本さえ押さえれば怖くありません！
1. 基本は「年-月-日」
一番よく使うのは、この形です。
2. もっと詳しく「時間」も入れたいなら
「何時何分」まで指定したい場合は、日付の後に「T」を挟んで時間を書きます。
※この「T」は、日付と時間の境界線を示すための大切な記号です。「Time」のTだと覚えておくと忘れませんよ。
3. 世界共通の「時差」を意識する
もしあなたが世界中の人に向けて情報を発信しているなら、末尾に「Z（グリニッジ標準時）」や「+09:00（日本時間）」を付けるのがプロの作法です。
—
つまずきやすいポイント：なぜ「わざわざ」書くの？
「そのままテキストで書くだけじゃダメなの？」と思うかもしれません。でも、このひと手間が、未来のあなたや、あなたのサイトを訪れるユーザーを助けることになります。
- Google検索に「正確なイベント日時」を教えられる
検索結果に「開催日時：10月25日」とリッチに表示される可能性が高まります。
- カレンダー連携がスムーズになる
スマホのブラウザが「あ、これはカレンダーに登録できる日時だな！」と判断して、ユーザーがタップひとつで予定帳に保存できるようになるかもしれません。
最初は「面倒だな」と感じるかもしれませんが、これは「Webサイトに正確な地図を持たせてあげる作業」のようなもの。一度習慣にしてしまえば、驚くほど自然に書けるようになりますよ。
—
まとめ：あなたのコードに「意味」を宿そう
HTMLを書くことは、単に画面に文字を並べることではありません。「この情報はどういう意味を持つのか？」をコンピューターに教えてあげる作業です。
1. `
この小さな積み重ねが、あなたのWebサイトをより賢く、より親切なものに変えていきます。ぜひ今日から、日付を書くときは「バーコード（datetime）」を添えるクセをつけてみてくださいね。
もし書き方で迷ったら、またいつでもここに戻ってきてください。大丈夫、焦らず一つずつ覚えていきましょう！
コメント