次々と増えるmeta,linkタグの種類と役割について整理しよう！
見たことがないようなmetaタグの種類も含めて、なるべく多くの情報を集積しました。覚える必要なんてないですので、眺めるように読み進めて頂きたいと思います。
環境の共通化
<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 http-equiv="refresh" content="数秒(5や10); url=ジャンプ先のURL">
情報の明示
<meta name="keywords" content="キーワード1,キーワード2,...">
<meta name="classification" content="カテゴリ名1,カテゴリ名2">
<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">
<meta name="Targeted Geographic Area" content="japan">
<meta name="distribution" content="GlobalまたはLocal">
クローラー制御
<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="revisit_after" content="10 days">
更新チェッカー制御
<meta name="hatena" content="difflength=100,noindex">
<meta name="Hatena::Bookmark" content="noindex">
<meta name="WWWC" content="更新を伝える日付や文言">
サイトのブランディング
<link rel="shortcut icon" href="画像URL">
<link rel="apple-touch-icon" href="画像URL">
<meta name="msapplication-TileImage" content="画像URL"> <meta name="msapplication-TileColor" content="背景色(#ffffffや#000000など)">
SNS・その他サービスの制御
<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:site" content="@ツイッターID"> <meta name="twitter:card" content="summary">
<meta name="google-site-verification" content="認証ID">
今後も次々と新しい仕様が出現する！
metaタグの考え方は、サイト、記事、単語の一つ一つまで、それぞれコンピュータが理解できるように整備して、世界の蜘蛛の巣をさらに強固なものにしようという<span style="color:red;font-weight:bold;">セマンティック思想</span>に基づいています。ここで紹介したものはそのごく一部にすぎません。
スマホの発明によって「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">
おすすめパック
<meta charset="文字コード(通常はutf-8)"> <meta http-equiv="x-ua-compatible" content="IE=バージョン(edgeやIE10)"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="keywords" content="キーワード1,キーワード2,..."> <meta name="description" content="サイトの説明文"> <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 name="twitter:site" content="@ツイッターID"> <meta name="twitter:card" content="summary"> <link rel="shortcut icon" href="画像URL">
執筆者Writer
AnTytle
コメントComment