HTML

head 内のメタタグ

head タグ内に記述するタグのまとめです。

必須、もしくはあると良いタグ

<title>タイトル</title>
<meta name="description" content="説明">
<meta name=viewport" content="width=device-width, initial-scale=1">

<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article OR website" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="画像URL" />
<meta property="og:description" content="説明" />

<meta name="twitter:card" content="説明">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@author_handle">

場合によっては必要なタグ

<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">

ページ情報

<title>

ページのタイトル。検索結果、ブラウザのタブ名などに表示される。32 文字以下が良いとされている。

<title>タイトル</title>

<meta name=”description”>

ページの説明。検索結果などにも表示される。120 文字以内が良いとされている。

<meta name="description" content="説明">

<meta name=”viewport”>

ビューポート設定。

<meta name=viewport" content="width=device-width, initial-scale=1">
  • width … device-width でデバイスの横幅の解像度に設定する
  • initial-scale … width=device-width と同じ意味。しかし、こちらを認識しないブラウザもある。

SNS

Open Graph

ウェブサイトのページをSNSやブログなどで共有したときに表示するテキストや画像の設定。

<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article OR website" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="画像URL" />
<meta property="og:description" content="説明" />
  • og:title … タイトル
  • og:type … トップページなら website、それ以外のページは article
  • og:url … ページURL
  • og:image … ページのサムネイル画像
  • og:description … ページの説明

twitter card

twitter で共有した時に表示されるカードに必要な情報

<meta name="twitter:card" content="説明">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@author_handle">
  • twitter:card … 説明
  • twitter:site … サイトの twitter アカウント名
  • twitter:creator … 記事を書いた人の twitter アカウント名

その他のタグ

<meta name=”format-detection” content=”telephone=no”>

iOS でのみ使用されるタグです。iOS の safari には電話番号っぽい数字を電話番号として認識し、タップするとその番号に電話をかけることができる機能が備わっています。その機能を無効化する時に使います。

正直いらない機能だと思ってます…

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

IE でのみ使用されるタグです。そもそも IE を対応範囲に含めていなければ不要なのと、今後はどんどん減っていくのでは。

<meta charset=”UTF-8″>

HTML ファイルの文字コードを指定します。ほとんど UTF-8 で書くだろうし、この指定がなければブラウザは HTMLヘッダーの Content-Type の文字コードを参照するとのことなので、Content-Type とは異なる文字コードの指定が必要な時にのみ記述するのが良いのでは?と思います。

関連記事

Leave a Reply