Webサービスを作るにあたって、SEO対策のためのdescriptionなどの設定や、SNSシェア、はたまたスマホで起きる予期しない動作回避のために、いろんなWebサイトに埋め込まれたメタタグと意味を調べたときのまとめです。
※ 「意味」欄など、もろもろざっくりと書いてますので、念のために再確認してから使ってください。
基本的なメタタグ（PC/SP共通）
どのサイトでも設定する可能性のある項目です。特にdescriptionはソーシャルシェア／SEOの観点から、重要な要素になります。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| charset | ★★★ | 文字コードの指定 | <meta charset="utf-8"> |
| description | ★★★ | ページの説明文。検索エンジンやSNSシェアで説明文として使われる。特にSEO対策を意識するなら重要。この場合、googleの表示欄に合わせて、120文字くらいで記載するのがよいとされるが、環境（PCかスマホかなど）で表示される文字数が違うことがあり、後半が切れても意図が伝わる文章にすることが大事 | <meta name="description" content="あなたのぴったりがここにあります。株式会社ジャストシステムのウェブサイトです"> |
| pragma | － | ブラウザにキャッシュのコントロールを指示する。 cache-controlと併記されているパターンが多い（注1 |
<meta http-equiv="pragma" content="no-cache"> |
| cache-control | － | ブラウザにキャッシュのコントロールを指示する。 pragmaと併記されているパターンが多い（注1 |
<meta http-equiv="cache-control" content="no-cache"> |
| expires | － | ブラウザーにキャッシュの期限を指示する（注1 | <meta http-equiv="Expires" content="Tue, 16 Feb 2016 14:25:27 GMT"> |
| author | － | 著作者を指定する。 最近の検索エンジンは無視するので指定してもほぼ効果ない |
<meta name="author" content="JustSystems Corporation"> |
| generator | － | 該当のWebサイトを生成したアプリ名が入る 指定しても効果はない |
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.0.2 Trial for Windows"> |
| refresh | － | 一定の時間が経過するとリダイレクトする。 googleでは301リダイレクトを使うようにオススメしている(注2 |
<meta http-equiv="refresh" content="3; URL=https://example.com"> |
※ 注1）：キャッシュはメタタグ以外でも制御できる
参考）キャッシュについて整理してみた
http://qiita.com/karore/items/2dc6ab8347c940ea4648
※ 注2) ：https://support.google.com/webmasters/answer/79812?hl=ja
SP／レスポンシブサイト向けのメタタグ
レスポンシブサイトやスマホ専用サイトなどで使うタグです。スマホやタブレットをサポートする場合、viewportの指定はほぼ必須になるかと思います。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| viewport | ★★★ | 画面サイズ、ピンチの有無などを定義。スマホサイトやレスポンシブルサイトでは、最重要設定項目 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| format-detection | ★ | 電話番号やメールなどと推定される文字列を自動でリンクに変換するか。 指定しないときのデフォルト挙動はOSにより異なる（※注 |
<meta name="format-detection" content="telephone=yes"> |
| HandheldFriendly | － | viewportが登場する前の旧仕様？ mobileoptimizedと合わせて設定 |
<meta name="handheldfriendly" content="True"> |
| mobileoptimized | － | viewportが登場する前の旧仕様？ HandheldFriendlyと合わせて設定 |
<meta name="mobileoptimized" content="320"> |
補足：fortmat-detection（電話番号などの自動リンク）が地雷になることがある
fortmat-detection（電話番号などの自動リンク）は、ブラウザやOSにより、デフォルトの動作が異なります。特に、デフォルトでONになっているiOSでは、「数値が電話番号に誤認識」され、タップすると予期しないところに電話をかけようとする地雷原とならないように注意が必要です。
■ fortmat-detectionを指定しなかったときに電話番号っぽい数値を見つけたときの挙動
・Android（のChrome）
デフォルトでは電話番号はリンクにならない
・iOS（のSafari）
デフォルトでは電話番号がリンクになる（要注意！）
検索エンジンのクローラー（SEO対策）向けのメタタグ
主にSEO対策やクローラーの制御のために設定されるタグです。特に"robots"は重要なタグとなります。
一方で、keywordsなど、現時点では各社のbotが見なくなってしまうなど形骸化した？ものもあります。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| robots | ★★★ | クローラーのアクセスやインデキシングを許可／禁止する。 設定をミスると、検索エンジンにでてこなくなり、販促チームに怒られる |
<meta name="robots" content="noindex,nofollow"> |
| keywords | － | ページのキーワード。 主要な検索エンジンのクローラーは無視するため指定する意味はほぼない |
<meta name="keywords" content="企業情報,ジャストシステム,JustSystems,JUSTSYSTEM,justsystem"> |
google専用のメタタグ
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| googlebot | － | google-botに対してのみ、インデキシングの許可／禁止を制御する robotsと同じ効果 |
<meta name="googlebot" content="noindex,nofollow"> |
| notranslate | － | 検索結果に翻訳のリンクの表示がでるのを禁止する | <meta name="google" content="notranslate"> |
| nositelinkssearchbox | － | 検索結果にサイト内検索が表示されるのを禁止する | <meta name="google" content="nositelinkssearchbox"> |
ちなみに、googleがサポートしているmetaタグ一覧は以下に記載があります。
検索エンジン（SEO対策）を意識してメタタグを記述する場合、必ず一度参照しておくことをオススメします。
■ Google がサポートしているメタタグ
https://support.google.com/webmasters/answer/79812?hl=ja
OGP／SNSシェア向けのメタタグ
主に各種SNSでシェアしたときの見栄えなどを定義するタグです。
Twitter/facebook/Lineなどの各SNSについて、シェアボタンを押下したり、SNS上でページが拡散されたときの動作に影響します。
Open Graph protocol公式のメタタグ
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| og:title | ★★ | シェアする際の見出しを指定 | <meta property="og:title" content="ピタジョブ｜ぴったりが見つかる転職･就職･求人情報サイト"> |
| og:description | ★★ | シェアする際のタイトルを指定 | <meta property="og:description" content="あなたのぴったりがここにあります。株式会社ジャストシステムのウェブサイトです。"> |
| og:type | ★★ | websiteやarticleなど、ページの種類を指定 | <meta property="og:type" content="website"> |
| og:url | ★★ | シェア対象となるURL。（相対パスではなく、スキームから始まる）URLすべてを書く | <meta property="og:url" content="https://www.justsystems.com/jp/"> |
| og:image | ★★ | シェアする際に表示される画像のURLを指定。（相対パスではなく、スキームから始まる）URLすべてを書く | <meta property="og:image" content="http://www.justsystems.com/jp/lib/contents/og/justsystems.png"> |
| og:site_name | ★ | サイト名を指定 | <meta property="og:site_name" content="ピタジョブ"> |
※ その他のタグは公式サイトから
http://ogp.me/
Twitterに対して設定するメタタグ
Twitter向けのタグです。すべて設定する必要はなく、すでにog:xxxが設定されている場合は、twitter:cardとtwitter:siteを足すだけで、シェアの制御は問題なくできます。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| twitter:card | ★★ | Twitterで拡散されたときのカードの種類を指定する | <meta name="twitter:card" content="summary"> |
| twitter:site | ★★ | サイト所有者のtwitterアカウントを指定 | <meta name="twitter:site" content="@just_techtalk"> |
| twitter:title | － | 拡散したときの見出し。 og:titleで代用可能 |
<property="twitter:title" content="ピタジョブ｜ぴったりが見つかる転職･就職･求人情報サイト"> |
| twitter:description | － | 拡散したときの説明文。 og:descriptionで代用可能 |
<property="twitter:description" content="あなたのぴったりがここにあります。株式会社ジャストシステムのウェブサイトです。"> |
| twitter:image | － | 拡散したときの画像。 og:imageで代用可能 |
<property="twitter:image" content="http://www.justsystems.com/jp/lib/contents/og/justsystems.png"> |
設定したタグが正しいかは、以下のバリデーターでチェックできる。
https://cards-dev.twitter.com/validator
また、その他のタグは以下の公式サイトで。
https://dev.twitter.com/cards/markup
Facebookに対して設定するメタタグ
Facebookの場合、og:xxxが設定されていれば、追加のメタタグを設定しなくても、シェアの制御は問題なく出来ます。ただし、facebookドメインインサイトと呼ばれる分析ツールを使いたいときは、fb:app_idを追加で指定する必要があります。
※ 2017年01月現在、ドメインインサイトは新規登録を停止しているようです。
https://developers.facebook.com/docs/platforminsights/domains
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| fb:app_id | ★★ | アプリケーションIDを設定する。 主にfacebookインサイトを使うための設定 |
<meta property="fb:app_id" content="111111111111111"> |
| fb:admins | － | 管理者IDを設定する。 主にfacebookインサイトを使うための設定 fb:app_idで代用できる |
<meta property="fb:app_admins" content="111111111111111"> |
設定したタグが正しいかは、以下の公式サイトでチェックできます。
https://developers.facebook.com/tools/debug/
補足：facebookでシェアした時に、更新したメタタグが反映されない
facebookでは、サイトの情報をキャッシュするようです。
そのため、キャッシュクリアの申請をしておかないと、メタタグの変更が反映されないことがあります。
キャッシュクリアは、上記のタグを確認する公式サイトのURLから、Fetch new scrape information をクリックすると実行されます。
特定OS／ブラウザー向けのメタタグ
Windows向けのメタタグ
Windows8/10以降でピン留めしたときの挙動の定義と、IEの動作モードを設定するためのメタタグがよく設定されるようです。なお、Microsoft Edgeに対する動作モードの定義（X-UA-Compatible相当）は2017年1月現在では存在しないようです。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| msapplication-config | － | Windowsでサイトをピン留めしたときの見栄えを設定したXMLファイルのパスを指定 | <meta name="msapplication-config" content="/config/browserconfig.xml"> |
| msapplication-tilecolor | － | Windowsでサイトをピン留めしたときのタイルの色を指定 | <meta name="msapplication-tilecolor" content="#ABCDEF"> |
| msapplication-tileimage | － | Windowsでサイトをピン留めしたときの画像を指定 | <meta name="msapplication-tileimage" content="/contents/mstile-144_144.png"> |
| X-UA-Compatible | － | IEの動作モードを設定する | <meta http-equiv="X-UA-Compatible" content="IE=11"> |
Android向けのメタタグ
AndroidでChromeを使ったときの見栄えを制御するタグがあります。なお、Android4.x以下では機能しない（無視）されます。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| theme-color | － | AndroidのChromeのアドレスバーの色を変える | <meta name="theme-color" content="#123456"> |
iOS向けのメタタグ
※ iPhoneユーザーではないので、もろもろ未実験。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| apple-mobile-web-app-title | － | サイトをピン留め？したときの名前の指定 | <meta name="apple-mobile-web-app-title" content="ほげほげ"> |
| apple-itunes-app | － | Smart App Bannerを表示する（注） | <meta name="apple-itunes-app" content="app-id=111111111"> |
※注）smart app banner
Safariの画面上部にApp Storeへのリンクを置く機能（インストール済みの場合は、アプリ起動リンクに変化）。
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
ちなみに、Androidで同様のことをしたい場合、javascript(service worker)を使うと、アプリインストール用のバナーが表示できる。
https://developer.android.com/distribute/users/banners.html?hl=ja
その他のメタタグ
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| google-site-verification | － | Google系サービス（サーチコンソールなど）のサイトの所有権の確認コード | <meta name="google-site-verification" content="xxxxxxxxx"> |
| msvalidate | － | microsoft系サービス（bingのWebマスターツールなど）のサイト所有権の確認コード | <meta name="msvalidate.01" content="xxxxxxxxx"> |
これを見かけると、Webマスターが頑張っているサイトだな・・・ということがわかる（以外にメリットはない）