2019年1月16日に開催した「クロコラボ #20 headタグの中を考えてみよう」のレポートです。
参考サイト
- HTML 5.2_ 4.2. Document metadata
- The Open Graph protocol
- What’s in the head_ Metadata in HTML _ MDN
- HTMLページのhead内に記述する要素の総まとめ _ コリス
- もう逃げない。HTMLのviewportをちゃんと理解する – Qiita
- コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて｜ferret [フェレット]
- HTMLのヘッダについて – 勉強会の下調べ – NPM Log
ひとつひとつ要素をみてみた
スクリーンに参考サイトを映して、みんなでひとつひとつ要素を確認しました。
例えば、meta要素のviewportの場合。次のように書いているという人がいました。
<meta name="viewport" content="width=device-width, initial-scale=1">「initial-scale」は初期表示のスケールを指定するものですが、「width=device-width」ならば「initial-scale」は自動的に「1」になるので書かなくていいよう。これで少し記述が減らせますね。
<meta name="viewport" content="width=device-width">といった具合に、よく使っていても曖昧になっているものがたくさんありました。
考えたコード
参考サイトや参加者さんの意見をもとに、要素をピックアップして順番を考えたコードです。
書く順番が難しかったです。
例えば、descriptionをtitleタグの前にしている人がいました。私は、「ページのタイトル」→「ページの説明」という順並べたいので、titleタグの下にしています。
他にも、OGP関連はlinkのあとに書いていましたが、meta要素を揃えているという方がいて、確かにそのほうがすっきりしていいのではと思いました。
また、このコードにはJavaScriptの記述がありません。参加者さんに聞いてみると、headタグ内か、bodyタグの最後に書くかの２パターンありました。私は後者です。DOMを読み込んだ後に実行したいのと、headタグ内をできるだけ少なくしたいからです。ただ、DOMを読み込む前に処理したいケースなど、場合によってはhead内で先に読み込んだ方がいいものもあるようなので、内容によって使いわけが必要ですね。
まとめ
改めてheadタグ内が見直せてよかったです。もちろん今回考えたコードが正解というわけでもないので、今後もアップデートしていきたいと思います。
普段仕事をしていると、「これでいいのか？」という場面がよくあります。特にフリーランスや自宅で仕事をしてる方などは、気軽に人に聞ける環境がないですよね。「こうやってる」「こうした方がいいかな？」というのを話せてよかったです。（といいつつ、今月の開催はまだ告知もできていませんが…）
今後もよろしくお願いします！