Help us understand the problem. What is going on with this article?

サイトに埋め込まれたHTMLのmetaタグ(メタタグ)のまとめ

More than 3 years have passed since last update.

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マスターが頑張っているサイトだな・・・ということがわかる(以外にメリットはない)

imotoy
justsystems
日本語入力システム「ATOK」の開発会社。「スマイルゼミ」「BONNE」「Actionista!」を始め、今までにない新しいカタチのWebサービスの提供を目指しています。We are hiring!https://www.justsystems.com/jp/employ/career/
http://www.justsystems.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした