metaタグの種類と使用例

2013/11/20

metaタグについて

概要

metaタグとは、HTMLのページに関する情報をブラウザや検索エンジンのクローラーに知らせるためのタグです。
設定する項目をhttp-equivやname属性で定義して、content属性で値を指定します。
これらは、headタグ内に記述して使用します。

ページの表示に関するものやSEOで必要となるタグなど、多くの種類が存在します。
例えば、descriptionなどは、SEOでとても重要となる項目です。
また、中には一部のブラウザでしか有効ではないものもあります。

構成

いろいろな属性がありますが、基本的な構成は次のようになります。

属性	説明
name	項目の名前
http-equiv	HTTPヘッダ名
content	設定する値
scheme	詳細情報
lang	言語
title	タイトル

nameとhttp-equivの違いは、ブラウザやサーバーで処理を行うかどうかです。
nameの場合は、通常ブラウザやサーバーで処理を行いません。
主にSEOを目的として設定することが多いです。

一方http-equivでは、HTTPヘッダーに組み込んで情報をサーバーに送信します。
主にブラウザまたはサーバーで何らかの処理をするときに使われます。
例えば、Content-Typeではブラウザで表示する文字コードを指定します。

種類の紹介

http-equiv属性


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

Content-Typeでは、表示時の文字コードを指定します。
その文章がUTF-8の場合は、charsetに「utf-8」と記述してください。
この他に良く使われる文字コードは、shift_jis、euc-jp、iso-2022-jpなどでしょうか。


<meta http-equiv="Content-Language" content="ja" />

HTMLにおける主言語を指定します。
日本語ならja、英語ならenのように記述します。

<html lang="ja"> や <body lang="ja"> などHTMLタグにも記述できますが、metaタグで指定することが推奨されています。
また、metaタグが優先されます。


<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

スタイルシート言語とスクリプト言語を指定します。
今では標準で、スタイルは text/css、スクリプトは text/javascriptと定められているので、特に記載する必要はありません。


<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

2つともに、no-cache を指定することでページキャッシュを無効にします。
ブラウザが対応している場合のみ有効です。


<meta http-equiv="expires" content="Wed, 20 Nov 2013 01:59:18 GMT" />

キャッシュの有効期限を指定します。この時刻を過ぎるとキャッシュが削除されます。
過去の日付や、無効な値を指定するとキャッシュが無効になります。


<meta http-equiv="imagetoolbar" content="no" />

イメージツールバー（画像にマウスを乗せた時に表示されるツールバー）を無効にします。


<meta http-equiv="refresh" content="5; url=sample.html" />

自動でページ遷移します。このように指定すると、5秒後にsample.htmlへ遷移します。
urlを指定しない場合は、そのページが再読み込みされます。

name属性


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

表示の幅などを指定します。
たとえば、width=320 とすると320pxに設定されます。
こうすることで、この幅に調整して画面が表示されます。
レスポンシブWebデザインでは、width=device-widthと指定します。


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

ページの説明文を記述します。
検索エンジンのスニペットで使用されたり、SEOでとても重要なので、必ず記述しましょう。
GoogleやYahooでは、全角で100文字程度が良いとされています。


<meta name="keywords" content="キーワード">

ページの内容に関連するキーワードをカンマ区切りで記述します。
記述したワードがページに含まれていないと無効になります。


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

検索エンジンのクローラーの動きを制御します。
下記のような指定が可能です。

noindex：このページを検索エンジンにインデックスしない
nofollow：ページ内のリンクへアクセスしない
noarchive：ページをキャッシュしない


<meta name="copyright" content="Copyright(C)2013 hoge">

著作権を表記します。
著作権は特に明記する必要がないので、設定しなくても問題ありません。


<meta name="author" content="hoge">

著者を明記します。名前でなくメールアドレスを記述したりもします。


<meta name="generator" content="hoge">

HTMLを作成した時に使用したエディタ名を記述します。


<meta name="coverage" content="worldwide">

ページのサービス提供範囲を指定します。
worldwide、asia、japan などの地域名や国名を記述します。


<meta name="Targeted Geographic Area" content="Japan">

ページの地理的な対象範囲を指定します。
asia、japan などの地域名や国名を記述します。


<meta name="classification" content="general">

ページのジャンルを指定します。
business, computers, entertainment, internet, miscellaneous, personalなどを記述します。


<meta name="rating" content="general">

ページの閲覧対象年齢層を指定します。
safe for kids、adultなどがあり、閲覧制限のない場合は、generalを記述します。


<meta name="revisit_after" content="20 days">

検索エンジンのクローラーが次に訪れるまでに日数を指定します。
実際に訪れるかどうかは謎です。


<meta name="distribution" content="Global">

他のmetaタグの対象範囲が外部なのか、内部なのかを指定します。
通常は、トップページには Global、その他の各ページには Local を指定します。
全てのページをindexさせたい場合は Global で問題ありません。


<meta name="creation date" content="July 20, 2013">

ページの作成日を記述します。


<meta name="language" content="Japanese">

ページの使用言語を記述します。
Japanese、Englishなど英語で記述します。

その他にもいろいろあります


<meta property="og:title" content="タイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:type" content="タイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="こサムネイル画像のURL" />

これらはFacebookで使用する情報です。
ページがシェアされた時などに、そのページ情報をFacebookに伝えるために設定します。

このようにpropertyを使用して、一部アプリの用にmetaタグを記述することもあるのです。

PbTimes 情報誌