更新中。

次々と増える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

2014年頃にAnTytleを設立。当初はプログラミング記事を書いていたが、2016年にYouTubeチャンネルのゲーム動画がヒットし、以来ゲーム分野にピボットした。

コメントComment

ログインするとサムネや名前を表示できます。