metaタグの種類と使用例

2013/11/20

metaタグについて

概要

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

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

構成

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

属性説明
name項目の名前
http-equivHTTPヘッダ名
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タグを記述することもあるのです。

  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る