metaタグ

metaタグはtitleタグやlinkタグで表すことのできない、ページの情報を記述するためのタグです。

属性

charset

charaset属性に文字エンコードを宣言するための属性です。
主な文字エンコードとして「uft-8」「shift_jis」「euc-jp」などがありますが、HTML5以降は「utf-8」が推奨されており、特別な理由がない限りは「utf-8」を指定します。
指定した文字エンコードに対応していない文字列がWebページにあると文字化けが発生します。

<meta charset="utf-8" />

なお、文字エンコーディングを宣言方法として、http-equiv属性とcontent属性を使って指定する方法もありますが、HTML5以降は一般的ではありません。

<meta http-equiv="content-type"　content="text/html; charset=UTF-8" />

content

contentは後述するnameで指定した値に関連付けられた値や文章を記述します。

name

nameはmetaタグで定義するmeta情報を記述します。
nameで定義可能な値として以下のようなものがあります。

viewport

viewportは画面上のコンテンツの表示領域を設定します。
レスポンシブデザインを採用する場合に設定する必要があります。

name属性に「viewport」と記述し、content属性に表示領域の設定を記述します。
一般的には「width=device-width, initial-scale=1.0」と記述することがほとんどで、これは横の解像度は端末の解像度に従い、等倍で表示させることを意味しています。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

description

descriptionはWebページの概要や要点を説明する文章を指定します。検索エンジンの検索結果のスニペットとして表示されます。
descriptionは検索順位にはほとんど影響を与えないため、スニペットに表示する文章を工夫してクリック率を上げるために記述します。ただし検索エンジンは必ずしもdescriptionをスニペットに使用するとは限りません。

name属性に「description」と記述し、content属性に説明文を記述します。

<meta name="description" content="ディスクリプションの文章。" />

keywords

keywordsはWebページに関連するキーワードを記述します。
ただしGoogleをはじめとする主要な検索エンジンはkeywordsをサポートしていないため、SEO対策には意味はありません。

name属性に「keywords」と記述し、content属性にWebページに関連するキーワードを指定します。
複数のキーワードを追記する場合は「,（カンマ）」でキーワードを区切ります。

<meta name="keywords" content="キーワードA,キーワードB,キーワードC" />