HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。

HTMLページのhead内に記述する要素の総まとめ

<head> cheatsheet

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

去年紹介した以前の版からいろいろと変更されています。

head内に記述する最小限の構成

下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。

head内の要素

meta要素

link要素

ファビコン

ソーシャル関連のhead内の要素

Facebook Open Graph

Facebook Instant Articles

Twitter Cards

Google+ / Schema.org

Pinterest

Pinterestはヘルプセンターに基づいて、人々があなたのWebサイトから何かを保存するのを防止します。descriptionの説明はオプションです。

OEmbed

ブラウザ・プラットフォーム関連のhead内の要素

Apple iOS

Apple Safari

Google Android

Google Chrome

Google Chrome Mobile (Android Only)

Chrome 31以降、WebアプリをSafariのような「アプリモード」に設定できます。

Microsoft Internet Explorer

App Links

メモ

パフォーマンス

要素の先頭にhref属性を移動すると、gzipが有効になっているときに圧縮が改善されます。なぜならhref属性は、baseとlinkタグで使用されるからです。

他のリソース

関連プロジェクト

ライセンス

sponsors

top of page

©2024 coliss