🪱

metaタグはどうしてこんなに統一感がないのか?今さら聞けないhtmlの話

2025/01/30に公開2

「どうしてチンアナゴみんなおなじ向き?」
と同じくらい
「どうしてmetaタグこんなに統一感ない?」

と思っています。
こんにちは、
ワニかず@40歳 出戻りエンジニアです。

4月からWeb開発の現場に入るということで、
今まで目を逸らしていたhtmlのタグについて学習している中、

metaタグのあまりの統一感の無さに疑問を持ったため、
その理由をまとめてみました。

metaタグの種類が統一感に欠ける主な理由

その歴史的な発展過程の影響で、
統一感の欠けたmetaタグの種類となっているというのです。

  1. HTML初期(1990年代)
  • 基本的なメタデータ(charset, description)が定義
  • charset:文字コード指定
  • description:ページ説明
  • refresh:ページ更新
  1. ブラウザ戦争時代(1995-2000年)
  • 各ブラウザ独自のmeta http-equiv属性が追加
  • http-equiv:各ブラウザ独自の設定
  • IE, Netscape向けの互換性タグ
  1. 検索エンジン最適化、SEO時代(2000年代前半)
  • 検索エンジン向けのname属性が拡張
  • keywords:検索キーワード
  • robots:クローラー制御
  • author:著者情報
  1. ソーシャルメディア時代(2010年代)
  • FacebookのOGPなど、property属性による新規規格が追加
  • Twitter Cards:Twitter独自のプレビュー規格
  1. モバイル対応(2010年代後半)
  • viewport:レスポンシブデザイン制御
  • theme-color:モバイル表示色指定

このように、異なる時期に異なる目的で追加されてきたため、
属性の使い方に一貫性が欠けているということです。

全ての時代に生命体として存在していたはずの私ですが、
metaタグにこんな歴史があったというのは初めて知りました。

何とか共通点を見出したい

と思うのが、プログラマーの性のような気がするのですが、
技術者の端くれとしてデータのフローから共通点がないか探ってみましたが、
共通点はあまりないような気がします(完全に主観です)

<meta property="og:title" content="タイトル" />

この指定は、SNSでシェアした時に「どんなタイトルで表示されるか」を指定するためのものです。
主にSNSプラットフォーム(Facebook、Twitter、LinkedInなど)が使用します。
ウェブページがSNSでシェアされた時に、適切なタイトルを表示するために使われます。
SNSのプラットフォームがウェブページをスクレイピングする際、
og:titleの値を優先的に使用してシェアプレビューを生成します。

ユーザーがSNSにproperty="og:title付のURLを投稿したときのデータフロー例

<meta charset="UTF-8">

これは最も基本的なmetaタグの一つで、ページの文字エンコーディングを指定します。
標準的な文字エンコーディングの値が定められており、主な値には

UTF-8 (現在の標準、推奨)
UTF-16
ISO-8859-1
Windows-1252
Shift_JIS
EUC-JP

がありますが、現代のウェブ開発では、特別な理由がない限り
「UTF-8」を使用することが推奨されています。

データフロー例

Discussion

YuneKichiYuneKichi

少なくとも、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依存でした。