metaタグはどうしてこんなに統一感がないのか?今さら聞けないhtmlの話
「どうしてチンアナゴみんなおなじ向き?」
と同じくらい
「どうしてmetaタグこんなに統一感ない?」
と思っています。
こんにちは、
ワニかず@40歳 出戻りエンジニアです。
4月からWeb開発の現場に入るということで、
今まで目を逸らしていたhtmlのタグについて学習している中、
metaタグのあまりの統一感の無さに疑問を持ったため、
その理由をまとめてみました。
metaタグの種類が統一感に欠ける主な理由
その歴史的な発展過程の影響で、
統一感の欠けたmetaタグの種類となっているというのです。
- HTML初期(1990年代)
- 基本的なメタデータ(charset, description)が定義
- charset:文字コード指定
- description:ページ説明
- refresh:ページ更新
- ブラウザ戦争時代(1995-2000年)
- 各ブラウザ独自のmeta http-equiv属性が追加
- http-equiv:各ブラウザ独自の設定
- IE, Netscape向けの互換性タグ
- 検索エンジン最適化、SEO時代(2000年代前半)
- 検索エンジン向けのname属性が拡張
- keywords:検索キーワード
- robots:クローラー制御
- author:著者情報
- ソーシャルメディア時代(2010年代)
- FacebookのOGPなど、property属性による新規規格が追加
- Twitter Cards:Twitter独自のプレビュー規格
- モバイル対応(2010年代後半)
- viewport:レスポンシブデザイン制御
- theme-color:モバイル表示色指定
このように、異なる時期に異なる目的で追加されてきたため、
属性の使い方に一貫性が欠けているということです。
全ての時代に生命体として存在していたはずの私ですが、
metaタグにこんな歴史があったというのは初めて知りました。
何とか共通点を見出したい
と思うのが、プログラマーの性のような気がするのですが、
技術者の端くれとしてデータのフローから共通点がないか探ってみましたが、
共通点はあまりないような気がします(完全に主観です)
<meta property="og:title" content="タイトル" />
この指定は、SNSでシェアした時に「どんなタイトルで表示されるか」を指定するためのものです。
主にSNSプラットフォーム(Facebook、Twitter、LinkedInなど)が使用します。
ウェブページがSNSでシェアされた時に、適切なタイトルを表示するために使われます。
SNSのプラットフォームがウェブページをスクレイピングする際、
og:titleの値を優先的に使用してシェアプレビューを生成します。
property="og:title
付のURLを投稿したときのデータフロー例
ユーザーがSNSに<meta charset="UTF-8">
これは最も基本的なmetaタグの一つで、ページの文字エンコーディングを指定します。
標準的な文字エンコーディングの値が定められており、主な値には
UTF-8 (現在の標準、推奨)
UTF-16
ISO-8859-1
Windows-1252
Shift_JIS
EUC-JP
がありますが、現代のウェブ開発では、特別な理由がない限り
「UTF-8」を使用することが推奨されています。
Discussion
少なくとも、HTML 2.0の時代からHTML 4.01まで、
http-equiv
属性はHTTPヘッダの補完目的に使われています。サーバーはこの値をレスポンスヘッダに使ってもよいとされていました。
HTML 5で
meta
要素にcharset
属性が追加されるまで、<meta http-eqiv="Content-Type" content="text/html; charset=UTF-8">
のようにメディアタイプとともに文字コードを書いていたのはこのためです。なお、HTML 4.01までにおいて、標準となる
name
属性値は仕様で定義されていません。このため、
meta
要素でhttp-equiv
が無い場合の動作は完全にUA依存でした。コメントありがとうございます!
大変勉強になります、歴史がかなり複雑なんですね。。。