8年弱前

次々と増えるmeta,linkタグの種類と役割について整理しよう！

見たことがないようなmetaタグの種類も含めて、なるべく多くの情報を集積しました。覚える必要なんてないですので、眺めるように読み進めて頂きたいと思います。

環境の共通化

文字コードの指定

ブラウザにサイトの文字コードを教えるための情報です。ユーザーによって文字化けを起こすのを防ぎます。

<meta charset="文字コード(通常はutf-8)">

スマホサイズに画面を最適化

機種によって画面幅が異なるゆえに、サイトのレイアウトが崩れるのを防ぎます。contentには様々なパラメータを設定できますが、これだけで十分です。

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

IEのレンダリングモードを指定

「IE11でHTML5デザインが崩れる現象を対策する」で詳しいことは書いていますが、ユーザーによってはIE6などの古いモードを使っている場合があり、そのデザイン崩れを防ぎます。

<meta http-equiv="x-ua-compatible" content="IE=バージョン(edgeやIE10)">

イメージツールバーを無効化(IE6用)

IE6の仕様で、画像にカーソルをのせるとツールバーが表示される機能を無効にします。IE6も視野に入れたWEB開発をするときに役立ちます。

<meta http-equiv="Imagetoolbar" content="yesまたはno">

自動遷移

サイトのURLが変わった場合など、自動で別のURLにジャンプさせたいときに有効です。

ただし、ログインシステムなどセキュリティが重要なリダイレクトの場合は、これは使わないようにしてください。きちんとPHPなどのサーバーサイドスクリプトでリダイレクトするようにしてください。

<meta http-equiv="refresh" content="数秒(5や10); url=ジャンプ先のURL">

情報の明示

検索で引っかけたいキーワード

カンマで複数指定する形となります。

<meta name="keywords" content="キーワード1,キーワード2,...">

ページのカテゴリ

keywordsとの違いが曖昧です。

<meta name="classification" content="カテゴリ名1,カテゴリ名2">

検索一覧でのサイト説明文を指定

文字数は100~160文字と大雑把の認識で問題ありません。

<meta name="description" content="サイトの説明文">

著作権情報

<meta name="copyright" content="© 2014-2015 AnTytle">

ページの作成者

<meta name="author" content="作者名(AnTytle)">

ページの最終更新日

<meta name="date" content="2015-11-08T15:24:55+09:00">

ページの作成日

<meta name="creation_date" content="作成日時">

管理者のメールアドレス(非推奨)

スパムメールが増えることがあるので非推奨です。

<meta name="reply-to" content="連絡先(メールアドレス)">

サイト制作に使用したソフトウェア

<meta name="generator" content="ソフトウェア名(メモ帳やDreamweaver)">

サイトの対象年齢

<meta name="rating" content="general, child, safe for kids, adult">

サイトを提供している国・地名

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

サイトを提供している地理的範囲

基本的にはcoverageと同じになります。

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

meta情報の対象範囲

他のmetaタグが外部に対するものか内部に対するものかを表します。基本的にGlobalを指定します。

<meta name="distribution" content="GlobalまたはLocal">

クローラー制御

検索エンジンに登録させないようにする

検索エンジンに登録されないため、当然検索でそのURLが引っかかることはありません。

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

Googleクローラーの制御

<meta name="Googlebot" content="index,nofollow,nosnippet">

Yahoo!クローラーの制御

<meta name="Slurp" content="noindex,follow,noydir">

MSNクローラーの制御

<meta name="msnbot" content="noindex,nofollow,noarchive">

クローラーの再訪問日数を指定

各クローラーがこれを考慮してくれるかどうかは不明です。

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

更新チェッカー制御

はてなアンテナの制御

ユーザーのはてなアンテナの一覧に表示させないようにします。

<meta name="hatena" content="difflength=100,noindex">

はてなブックマークの制御

はてなブックマークのエントリーページに表示させないようにします(詳細説明)。

<meta name="Hatena::Bookmark" content="noindex">

更新チェックソフト「WWWC」の制御

WWWCを利用しているユーザーの利便性を向上します。

<meta name="WWWC" content="更新を伝える日付や文言">

サイトのブランディング

ファビコンの指定

ブラウザ、お気に入り用のアイコンを指定するものですが、サイトのブランディングとしても重要な情報です。

<link rel="shortcut icon" href="画像URL">

スマホのホーム画面に表示するアイコンを指定

ユーザーは、お気に入りサイトをホーム画面に貼り付けることで、ネイティブアプリのような感覚でサイトにアクセスできます。

<link rel="apple-touch-icon" href="画像URL">

Windows8のスタート画面にピン留め用アイコンを指定

ユーザーは、まるでネイティブアプリを開くかのような感覚でサイトにアクセスできます。

<meta name="msapplication-TileImage" content="画像URL">
<meta name="msapplication-TileColor" content="背景色(#ffffffや#000000など)">

SNS・その他サービスの制御

OGP(Facebook等)

Facebookでシェアされたときに、綺麗なデザインで共有できるので、興味を持つ人が増えます。
注意点は、これらを動作させるためにhtmlタグに「prefix="og: http://ogp.me/ns#"」を追加することを忘れないでください！

<meta property="fb:app_id" content="123456789012345">
<meta property="og:type" content="ページの種類(website,article...詳細はhttp://ogp.me/#types)">
<meta property="og:url" content="シェアするURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:image" content="サムネイル画像URL">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="article:publisher" content="ページ作成者のFacebookのURL">

Twitterカード

Twitterカードは、URLをツイートするとFacebookのようにテンプレート化されて共有される仕様です。利用審査が必要という記事がありますが、現在は審査不要です。基本的にOGPと組み合わせます。

<meta name="twitter:site" content="@ツイッターID">
<meta name="twitter:card" content="summary">

Googleウェブマスターツール認証

Googleが提供するウェブ管理ツール「ウェブマスターツール」でmetaタグによる認証を選択した場合に使用します。

<meta name="google-site-verification" content="認証ID">

今後も次々と新しい仕様が出現する！

metaタグの考え方は、サイト、記事、単語の一つ一つまで、それぞれコンピュータが理解できるように整備して、世界の蜘蛛の巣をさらに強固なものにしようというセマンティック思想に基づいています。ここで紹介したものはそのごく一部にすぎません。

スマホの発明によって「apple-touch-icon」が、Twitterの出現によって「twitter:card」が登場したように、発明や新しいサービスが出てくるたびに、新しい仕様が出現してきます。今後もあらゆるmeta,linkタグが出現することは想像に容易いでしょう。

コンプリートパック

<meta charset="文字コード(通常はutf-8)">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=バージョン(edgeやIE10)">
<meta http-equiv="Imagetoolbar" content="yesまたはno">
<meta name="keywords" content="キーワード1,キーワード2,...">
<meta name="description" content="サイトの説明文">
<meta name="classification" content="カテゴリ名1,カテゴリ名2">
<meta name="copyright" content="© 2014-2015 AnTytle">
<meta name="author" content="作者名(Yosuke)">
<meta name="date" content="2015-11-08T15:24:55+09:00">
<meta name="creation_date" content="作成日時">
<meta name="reply-to" content="連絡先(メールアドレス)">
<meta name="generator" content="ソフトウェア名(メモ帳やDreamweaver)">
<meta name="rating" content="general, child, safe for kids, adult">
<meta name="coverage" content="worldwide, japan">
<meta name="Targeted Geographic Area" content="japan">
<meta name="distribution" content="GlobalまたはLocal">
<meta name="revisit_after" content="10 days">
<meta name="WWWC" content="更新を伝える日付や文言">
<meta name="msapplication-TileImage" content="画像URL">
<meta name="msapplication-TileColor" content="背景色(#ffffffや#000000など)">
<meta property="fb:app_id" content="123456789012345">
<meta property="og:type" content="ページの種類(website,article...詳細はhttp://ogp.me/#types)">
<meta property="og:url" content="シェアするURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:image" content="サムネイル画像URL">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="article:publisher" content="ページ作成者のFacebookのURL">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ツイッターID">
<meta name="google-site-verification" content="認証ID">

<link rel="shortcut icon" href="画像URL">
<link rel="apple-touch-icon" href="画像URL">

<!--▼どうしても必要なときのみ記述▼-->
<meta name="robots" content="noindex, nofollow, noarchive">
<meta name="Googlebot" content="index,nofollow,nosnippet">
<meta name="Slurp" content="noindex,follow,noydir">
<meta name="msnbot" content="noindex,nofollow,noarchive">
<meta name="hatena" content="difflength=100,noindex">
<meta name="Hatena::Bookmark" content="noindex">
<meta http-equiv="refresh" content="数秒(5や10); url=ジャンプ先のURL">