head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。

head内に記述する要素の総まとめ

HEAD -GitHub

翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。
公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。

オススメの最小限の構成

下記は、head内に記述する最小限のタグです。

要素

meta要素

meta要素 非推奨

下記は、非推奨のmeta要素です。

link要素

link要素 非推奨

下記は、非推奨のlink要素です。

ファビコン

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

Facebook / Open Graph

Facebook / Instant Articles

Twitter

Google+ / Schema.org

OEmbed

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

Apple iOS

Apple Safari

Google Android

Google Chrome

Microsoft Internet Explorer

Microsoft Internet Explorer (レガシーブラウザは使用しないでください)

360 Browser

UC Mobile Browser

QQ Mobile Browser

スマホアプリ関連のhead内の要素

メモ

パフォーマンス

href属性を要素の最初に記述することは、gzipでの圧縮を改善します。なぜならhref属性は, base, linkタグに使用されるからです。

他のリソース

ライセンス

top of page

©2017 coliss