Web制作者がおさえておくべきmeta要素プロパティの種類

meta要素(メタタグ)は、ユーザーエージェント(ブラウザ、クローラーなど)がWebページを読み込んだ時の動作を決めるために使用されます。meta要素のプロパティ(設定項目)にはたくさんの種類がありますが、Web制作者として最低限知っておくべきものを解説します。

meta要素には、ページがどのようにできているかHTML文書自体の情報(メタデータ)を、指定します。

meta要素のプロパティの種類はたくさんありますが、ほとんど使われていないものや記述していても効果が不明のものも存在します。実際W3Cではプロパティの名前と値を定義しておらず、meta要素の中でどのプロパティをサポートするか、またどう解釈するかはユーザーエージェント次第です。サポートしないmeta要素の記述は無視されます。

HTML文書内でmeta要素の挿入する場所は、<head>~</head>の間です。
ここで解説する記述例はXHTMLを基準にしています。

【コンテンツ】

  1. meta要素属性
  2. ファイルタイプ・文字エンコーディングの指定
  3. スタイルタイプ・スクリプトタイプの指定
  4. ページ内容の説明
  5. ページのキーワード
  6. 検索エンジン(クローラー)の制御
  7. viewportの設定

meta要素属性

覚えておくべきは次の4つの属性です。

name属性

一般的なメタデータ用として、プロパティ名を指定します。
必ずcontent属性とセットで使用し、値はcontent属性に記述します。

http-equiv属性

当初はname属性の代わりとして働き、HTTPサーバーがHTTP応答メッセージヘッダに用いる情報収集のために使われるよう規定されました。現在はユーザーエージェントにとって、HTTP応答メッセージヘッダと同等の働きをするメタデータを記述するために使われています。
必ずcontent属性とセットで使用し、値はcontent属性に記述します。

content属性

name属性あるいはhttp-equiv属性で指定したプロパティの値を指定します。

charset属性

HTML5で追加された属性で、文書で使われる文字エンコーディングを指定します。
文書中にcharset属性を持ったmeta要素は2つ以上記述してはいけません。

ファイルタイプ・文字エンコーディングの指定

http-equiv属性を用い、文書で使われるファイルタイプと文字エンコーディングを指定します。
日本語が現れる前に指定する必要があるので、headタグの直後に書くのが良いでしょう。

【記述例】
日本で使用される文字エンコーディングは、だいたい以下の3種類のいずれかです。

なお、文字エンコーディングの値は大文字/小文字を区別しませんので、
'UTF-8'は、'utf-8'でも可です。

HTML5文書での文字エンコーディングの指定は、charset属性を用いて以下のように記述します。

スタイルタイプ・スクリプトタイプの指定

http-equiv属性を用い、デフォルトで使用されるスタイルシート・スクリプトを指定します。

【記述例】
通常はスタイルシートはCSS、スクリプトはJavaScriptですので、以下のように指定します。

HTML5ではデフォルトのスタイルシートはCSS、スクリプトはJavaScriptとなりますので、記述を省略する場合が多いです。

ページ内容の説明

Google検索結果のスニペットに表示されるなど、多くの検索エンジンで利用されますので、利用者から見て適切にページ内容を表すように、ページごとの文章を記述します。
ただSEO的には、現在ほとんど効果がないと言われています。

【記述例】

ページのキーワード

ページ内容に関連するキーワードを指定します。複数キーワードを指定する場合には、半角カンマ(,)で区切って指定します。
現在主要な検索エンジンでは、検索順位評価において考慮していません。

【記述例】

検索エンジン(クローラー)の制御

クローラーがどのようにそのページを扱って欲しいかを指定します。この指定に従うかはクローラーの処理次第です。

【記述例】

値としては、以下が設定できます。

index ページをインデックスに登録することを許可する
noindex ページをインデックスに登録することを拒否する
follow リンク先のページをたどることを許可する
nofollow リンク先のページをたどることを拒否する
archive ページのキャッシュリンクを表示することを許可する
noarchive ページのキャッシュリンクを表示することを拒否する
noodp 検索結果のスニペットにODP/DMOZの説明文を使用しない
all index,followと同じ
none noindex,nofollowと同じ

なお、GoogleのクローラーであるGooglebotだけを制御したい場合は、
「name="Googlebot"」とします。

viewportの設定

スマホ画面向けに、ページの表示領域を設定する場合に記述します。

【記述例】

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ