METAタグは結局何を入れたら良い?すぐ分かる最新META一覧

2017年9月29日 2019年6月3日 WEB

METAタグで、どれを入れたら良いのか忘れちゃった時に見返せるページがあったら良いな、と思ったので、最低限必要・不必要なMETAタグを集めて紹介します。

Googleがサポートしているメタタグ

google

charset

ページのコンテンツタイプと文字セットを定義します。

<meta charset="..." >
<meta http-equiv="Content-Type" content="...; charset=..." />

使用例

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

ブラウザの文字コードをUTF-8に設定します。
IEの自動互換表示切り替え機能対策で、ドキュメントモードを固定します。

description

ページの簡単な説明を表す文をcontentに入れます。
検索結果に表示されるスニペットの一部として使用されます。

SEO的に重要とされている部分で、複数のページに同じ内容が入れられていると「重複コンテンツ」と認識されるので要注意。

<meta name="description" content="ページの概要を説明する文章を入れる" />

robots

既定値は「index, follow」で特に指定する必要はありません。

<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." />

ページを検索エンジンに登録したくない場合はnoindex,nofollowを指定します。

noindex: ページをインデックスに登録しないようにします。
nofollow: Googlebot がページのリンクを追跡しないようにします。

noindex, nofollow と同じ意味のnoneでも可。

<meta name="robots" content="noindex,nofollow">
<meta name="googlebot" content="noindex,nofollow" />

google-site-verification

サイトの最上位のページにこのタグを挿入すると、Search Console(旧ウェブマスターツール)で所有権を確認できます。

<meta name="google-site-verification" content="..." />

contentにSearch Console指定のトークンIDをコピペしてください。

msvalidate.01

Bing Web マスター ツールで所有権を確認できます。

<meta name="msvalidate.01" content="..." />

contentに指定のトークンIDをコピペしてください。

http-equiv=”refresh”

一定の時間が経過するとユーザーを新しい URL にリダイレクトします。

<meta http-equiv="refresh" content="...;url=..." />

使用例

<meta http-equiv="refresh" content="300"> <!-- 300秒ごとに更新 -->
<meta http-equiv="refresh" content="30; URL=new.html"> <!-- 30秒でnew.htmlにリダイレクト -->

但しこれはW3C では非推奨

Google ではサーバーサイドの 301 リダイレクトを使用することをおすすめしています。

.htaccessの編集・設置が必要です。

Google がサポートしているメタタグ

スマホサイトやレスポンシブサイトで使うMETAタグ

スマホサイトやレスポンシブサイト

format-detection

連続した数字を電話番号と誤認識して自動リンクする機能を停止させます。

<meta name="format-detection" content="telephone=no">

viewport

推奨されるviewportの書き方は以下の通り。

<meta name="viewport" content="width=device-width, initial-scale=1">

下記ページでは、”minimum-scale、maximum-scale、user-scalable を避ける”とハッキリ言われています。
特に、user-scalableはiOS10以降無視されるようになり、iPhone等では効きません(ズーム可能)。

引用:ビューポートを設定する
https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=ja

METAタグまとめ

まとめると、以下のMETAタグはデフォルトで入れておいて良いと思います。

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="ページの説明" />
<meta name="google-site-verification" content="..." />
<meta name="msvalidate.01" content="..." />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">

google-site-verificationやmsvalidate.01は必要に応じて。

SEO的に非推奨のMETAタグ

もしこのタグを使っていたら、即削除したほうが良いでしょう。
誰かに「時代遅れ」と鼻で笑われているかも知れません。

<!-- <html lang="ja"> を使いましょう-->
<meta name="language" content="ja">

<!-- Googleは無視し、Bingはそれをスパムとみなしています -->
<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">

<!-- どの検索エンジンでも現在使用されているという証拠はありません -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">

<!-- スパムボットが電子メールアドレスを収集するだけです -->
<meta name="reply-to" content="email@example.com">

<!-- <link rel="author"> を使うか humans.txt を使いましょう -->
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
<meta name="owner" content="">

<!-- 検索ボットに期間の経過後にページを再訪するよう指示します。 これは、ほとんどの検索エンジンがWebページの再クロールにランダムな間隔を使用するため、サポートされていません -->
<meta name="revisit-after" content="7 days">

<!-- Googleはこれを使用しないことを強く推奨します。 代わりにサーバー側(Apache、nginxなど)のリダイレクトを設定することをおすすめします -->
<meta http-equiv="refresh" content="300;url=https://example.com/">

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?