Webサービスを作るにあたって、SEO対策やSNSシェア、はたまたスマホで起きる予期しない動作回避のために、いろんなWebサイトに埋め込まれたメタタグと意味を調べたときのまとめです。
※ 「意味」欄など、もろもろざっくりと書いてますので、念のために再確認してから使ってください。
基本／ブラウザ設定（PC/SP共通）
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| charset | ★★★ | 文字コードの指定 | <meta charset="utf-8"> |
| description | ★★★ | ページの説明文。検索エンジンやSNSシェアで説明文として使われる | <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 | － | 一定の時間が経過するとリダイレクトする。 W3C非推奨(注2)（代替は301/302リダイレクト） |
<meta http-equiv="refresh" content="3; URL=https://example.com"> |
※ 注1）：キャッシュはメタタグ以外でも制御できる
参考）キャッシュについて整理してみた
http://qiita.com/karore/items/2dc6ab8347c940ea4648
※ 注2) ：https://www.w3.org/TR/WCAG10-HTML-TECHS/#meta-element
SP／レスポンシブサイト向け
レスポンシブサイトやスマホ専用サイトなどで使うタグです
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| 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（電話番号などの自動リンク）は、ブラウザやOSにより、デフォルトの動作が異なります。以下、数値が誤認識されて弊害の多い「電話の起動」のみ記載します。
○ fortmat-detectionを指定しなかったときに電話番号っぽい数値を見つけたときの挙動
・Android（のChrome）
デフォルトでは電話番号はリンクにならない。
・iOS（のSafari）
デフォルトでは電話番号がリンクになる。
たまに数値を誤認識して、タップすると予期しないところに電話をかけようとする地雷原を生み出す。
クローラー向け
主にSEO対策やクローラーの制御のために設定されるタグです。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| 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タグ一覧は以下に記載があります。
■ Google がサポートしているメタタグ
https://support.google.com/webmasters/answer/79812?hl=ja
OGP／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 | <meta property="og:url" content="https://www.justsystems.com/jp/"> |
| og:image | ★★ | シェアする際に表示される画像の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/
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
og:xxxが設定されていれば、シェアの制御は問題なく出来る。
facebookインサイトと呼ばれる分析ツールを使いたいときは、fb:app_idを追加で指定する。
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| 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/
特定OS／ブラウザー向け
■ Windows
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| 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
| タグ | 重要度 | 意味 | 設定例 |
|---|---|---|---|
| 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マスターが頑張っているサイトだな・・・ということがわかる（以外にメリットはない）