メタ要素（meta）の仕様と使い方

カテゴリ：HTML編

meta要素

meta要素はhead要素内に記述する、ページに関するメタデータを記述する要素です。
一般的には検索エンジン用に、ページのキーワード（keywords）や説明（description）、クロール・インデックスの指示（robots）を行うために使用します。
また、ビューポート（viewport）やコンテンツタイプ（Content-Type）、文字コード（charset）の指定にも使用します。

name属性

keywords

ページのキーワードはname属性にkeywordsを指定し、content属性に記述します。
また、カンマ区切りで複数のキーワードを指定できます。

<meta name="keywords" content="Webサイト作成,HTML5,CSS3">

description

descriptionは検索結果（Search Engine Result Page：SERP）のスニペット（ページタイトル名の下の説明文）として表示されます。
title属性のようにSEOの効果はありませんが、クリック率に影響するため重要です。
※タイトル名だけではなく、スニペットの内容によってクリックするかしないかが変わってくる場合があります。
ページの説明は、name属性にdescriptionを指定し、content属性に説明文を記述します。
※文字数の制限はありませんが、長すぎる場合検索結果に表示しきれなくなります。

<meta name="description" content="Webサイトを作る方のための分かりやすい作成手順を記載したサイトです。初めて初めてWebサイトを作る方や、すでに作成済みの方でも、ひと通りの最低限必要な知識を見直すときに役に立つように、分かりやすく解説しています。">

robots

ロボット（検索エンジン）へのクロール・インデックスの指示はname属性にrobotsを指定し、content属性に指示したい動作を指定します。

<meta name="robots" content="noindex,follow">

robotsに指定できる主な指示は以下となります。
※デフォルト値を使用する場合は、あえて明示的に指定する必要はありません。

index

ページをインデックスさせる（デフォルト）

noindex

ページをインデックスさせない

follow

ページのリンクを辿らせる（デフォルト）

nofollow

ページのリンクを辿らせない

archive

ページをキャッシュさせる（デフォルト）

noarchive

ページをキャッシュさせない

Google検索エンジンではインデックスしないページは検索結果に表示されないだけではなく、存在しないページとして扱われます。
つまり、Googleのペナルティを受けたページや受けそうなページ（質が低い、重複ページ）には、noindexを指定して対処します。

viewport

レスポンシブサイト（PCやスマートフォンなどの様々なデバイスに対応させたサイト）のために、ビューポート（画面の幅）に応じてどのようにページをレンダリングさせるかを指定します。
ビューポートの指定は、name属性にviewportを指定し、content属性にレンダリング方法を指定します。
通常は以下のようにwidth=device-widthを指定しておけば問題ありません。

<meta name="viewport" content="width=device-width">

http-equiv

Content-Type

http-equiv属性でページのコンテンツタイプや文字コードを指定します。
具体的には以下のように、http-equiv属性にContent-Typeを、content属性にtext/html; charset=UTF-8を指定します。（文字コードとしてUTF-8を使用する場合）

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

charset

HTML5では、以下のようにcharset属性を使用してシンプルに文字コードを指定することができます。
※HTML5ではhttp-equiv属性を使用した従来の記述方式もサポートしているため、修正する必要はありません。

<meta charset="UTF-8">

W3Cによるmeta要素の説明

meta要素は、title、base、link、style、およびscript要素を使用して表現できないさまざまな種類のメタデータを表します。
meta要素は、name属性を持つドキュメントレベルのメタデータ、http-equiv属性を持つプラグマディレクティブ、およびcharset属性でHTMLドキュメントが文字列形式にシリアル化（例えば、ネットワークを介した送信またはディスクストレージ）されたときのファイルの文字エンコード宣言を表すことができます。
name、http-equiv、およびcharset属性のうちの1つを指定する必要があります。

公開日時：2018年01月28日 20:12:26
最終更新日時：2022年03月12日 07:16:42