メタタグとは？SEO効果は？metaタグ一覧と書き方まとめ

記事内に商品プロモーションが含まれる場合があります

今回のテーマは、Webサイトに書くmetaタグ（メタタグ）について。初心者の方でも分かるように丁寧に解説していきます。

1. metaタグ（メタタグ）とは？

メタタグとはWebページの情報を、検索エンジンやブラウザなどに伝えるタグのことです。HTMLのheadタグ内に書きます。
…と言ってもなかなか分かりづらいと思うので、いくつかのポイントに分けて説明します。

1-1. メタタグは検索エンジンやブラウザに向けて書く

まず、メタタグは「Googleなどの検索エンジン」や「ブラウザ」、「Facebook、Twitterなどのソーシャルメディア」などのシステムに向けて書きます。

1-2. 訪問者がメタタグを見ることはほとんどない

基本的にWebページに見に来てくれた人がメタタグを見ることはありません。あくまでも、システムのためのタグなのです。

ただし、見ようと思えば、誰でも簡単に見ることができます。「このブログはどんなメタタグを使ってるのか調査しよう」という理由で見られることも。

1-3. メタタグは検索エンジンやブラウザなどに指示を出したり、情報を提供したりする

メタタグが何をするかというと、指示を出したり、情報を提供したりします。例えば「文字コードはコレを使って！」とか「このページは検索エンジンにはインデックス（掲載）しないで！」みたいな指示を出すわけですね。

1-4. メタタグはheadタグ内に書く

みなさんが普段ネットサーフィンをするときに見ているページはHTMLというコードで書かれています。そして、HTMLで作られたページは大きく「headタグに囲まれた部分」と「bodyタグに囲まれた部分」に分けられます。

headタグの中にはWebページには表示されない（訪問者には見えない）タグを書きます。メタタグもこの中に書きます。
一方、文章や画像などWebページに表示される部分はbodyタグ内に書きます。

HTMLの基本的な書き方はこちらの記事が参考になるはずです。

初心者向けHTML入門：書き方の基本とタグの使い方

1-4. 書き方の例

のちほどメタタグの一覧を紹介しますが、ここでは1つだけ例を紹介します。

メタディスクリプション

検索エンジンに対して「この記事の内容を簡単にまとめると、こんな感じだよ」と伝えるメタタグです。

<meta name="description" content="サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ！">

↑ こちらは実際にサルワカのトップページのheadタグ内に書かれているものです。

メタディスクリプションとして書かれたものは、検索結果に表示されることがあります（必ずしも表示されるとは限りません）。

つまり、ページの内容を表す魅力的な文章をメタディスクリプションに書いておけば、クリックされやすくなるわけですね。

1-5. ページごとにいちいちタグを書かないといけないの？

上で紹介したようなタグを記事ごとに書くのは面倒ですよね。書き間違えしてしまいそうだし。

とはいえ心配は不要です。人気のブログサービスでは、必須のメタタグは自動で表示されるようになっています。
また、メタディスクリプションなどは記事ごとに指定できるようになっていたりします。

WordPressの場合には、テーマ次第ですね。例えばサルワカのテーマ「SANGO」では書いておくべきメタタグは全て自動表示＆簡単に設定できるようになっています。

1-6. ちゃんとメタタグが書かれているかを確認して、必要であれば設定をしよう

なんだか難しそうに感じられるかもしれませんが、やるべきことは以下の3ステップです。

現在「何のメタタグが書かれているのか」をチェックトップページと記事ページ両方を確認するのがおすすめです。
書かれるべきメタタグが抜けていないか確認
必要なメタタグをheadタグ内に書き足す

というわけで1つずつ解説していきます。

2. メタタグの確認方法

現在「何のメタタグが書かれているのか」をチェックする方法は簡単です（ただしパソコンから見る必要があります）。調べたいページを開き、ページのどこかを右クリックします。

↑ 表示されるメニューの中から「ページのソースを表示」をクリックします。これは人気のブラウザであれば、あらかじめ備わっている機能です。

↑ ページを構成するHTMLタグが表示されます。この中のheadタグ内にメタタグが書かれています。

検索ショートカットで探そう

Ctrl + F（Macの場合には⌘+F）のショートカットを使えば、好きな文字列をサクッと検索できます。
「meta」で検索すれば、メタタグを見つけやすいのではないかと思います。

3. 知っておきたいメタタグ一覧と書き方

ここからは、書いておきたいor知っておきたいメタタグの一覧を紹介していきます。ご自分のサイトのタグと照らし合わせながら「ヌケモレがないか」チェックしていくと良いのではないかと思います。

3-1. 文字コード

<meta charset="utf-8">

必須文字コードを指定するためものです。日本語のサイトであれば、必ず書く必要があります。<head>タグのすぐ下に書くようにしましょう。

3-2. IE向け最適化

<meta http-equiv="X-UA-Compatible" content="IE=edge">

必須 IEのために書いておくのがベターです。IEには過去のバージョンで表示させる「互換モード」という機能があります。これが厄介で、訪問者が互換モードをよく分からないまま使っていた場合に、ページのデザインが崩れてしまう可能性があります。このメタタグを使うことで、常に標準モードで表示させることができます。

3-3. レスポンシブデザイン用

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

必須レスポンシブデザイン（スマホやタブレットでも表示を最適化）を実現するために書いておく必要があります。

3-4. タイトルタグ

<title> そのページのタイトル </title>

必須こちらは厳密にはメタタグではないのですが、とても重要なものなので合わせて紹介しておきます。titleタグの中には、検索エンジンやブラウザに認識してもらうページのタイトルを書きます。

titleタグ内に書かれたテキストは、ブラウザのタブに表示されたり…

検索エンジンのタイトルとして使われたりします（Googleの判断により使われないこともあります）。

どのブログサービスでも、投稿画面で書いた「記事タイトル」がtitleタグ内に出力されるようになっています。
しかし、titleタグ内のテキストは、実際にユーザーの目に入る記事のタイトルと一致している必要はありません。つまり「検索エンジンなどで表示されるタイトル」と「ページ内に表示されるタイトル」は別にすることができるのです。

はてなブログなんかだと「高度なタイトル設定」欄でtitleタグを自由に決めることができます。WordPressでもテーマによっては、titleタグを記事タイトルと別に設定できます。SANGOでも可能です。

3-5. メタディスクリプション

<meta name="description" content="ページの内容を表す文章">

さきほども触れたメタディスクリプションです。さきほど説明した通り、検索結果の記事タイトル下に表示されます。ただし、こちらは必須ではありません。直接的なSEO効果もありません。
しかし、そのページの内容を簡潔に表す文章を書けば、クリックされる確率が上がります。また、ユーザーの動きが改善されれば、間接的なSEO効果があるかもしれません。

テキトーに書くよりは全く書かない方がマシ

2013年にGoogleのマット・カッツさん（既にGoogleを退職していますが）が正式にメタディスクリプションの効果について触れています。

かなりざっくりと要約すると

メタディスクリプションはクリック率を上げるために重要
テキトウに書いたり自動抽出するくらいなら全く書かない方がマシ
（Googleが自動で本文から抽出する）

というわけですね。ちなみにマット・カッツさんのブログではメタディスクリプションは書かれていません。

メタディスクリプションは簡潔に。100字以下にするのがおすすめです。

3-6. 検索避け

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

こちらは検索エンジンに対して「このページをインデックス（掲載）しないで！」という指示をするためのタグです。低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめです。

noindex,followも便利

noindexの方を少し変えて、<meta name="robots" content="noindex,follow">と書くと「このページを掲載しないで！けどページの巡回はして！」という指示になります。この場合、Googleのクローラー（ページを巡回するシステム）は、そのページを検索結果に掲載しないものの、リンクを辿ったりはしてくれます。

meta robotsの使いどころ

低品質なページ⇒noindex,nofollow
検索結果ページ⇒noindex,nofollow
タグ/日付別ページ⇒noindex,follow
トップページやカテゴリーページの2ページ目以降⇒noindex,follow

↑これはあくまでも一例です。ちなみに、普通にインデックスもクロールもして欲しい場合には、このメタタグは全く何も書かなければOKです。index,followとしているサイトもありますが、書いても書かなくても全く違いはありません。

3-7. OGPタグ

<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">

facebookでtwitterでシェアされたときに、アイキャッチ画像などやタイトルを魅力的に表示してくれる設定です。ソーシャル流入を重視するのであれば必須ですね。
基本的にはてなブログやライブドアブログなどの人気ブログサービスでは設定済みです。OGPを設定するメリットや、WordPressでの設定方法は下の記事にまとめました。

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

3-8. メールアドレスや電話番号をリンクに変換しない

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

ブラウザによっては、ページ内の電話番号やメールアドレス、住所を自動でリンクに変換してくれます。勝手にリンクにして欲しくないという場合には、こちらのメタタグを書いておくと良いでしょう。

3-9. Windows向けのアイコン

<meta name="msapplication-TileImage" content="画像のURL" />
<meta name="msapplication-TileColor" content="カラーコード（例：#F89174）"/>

Windows8〜登場した「ピン留め機能」のためのメタタグです。ピン留めされたときの、タイルの画像や色を指定できるというものですね。WordPressでは画像（msapplication-TileImage）の方は、サイト基本情報でアイコンを登録しておけば、自動出力されるようになっています。

Windows8のピン留め機能

4. あまり使う機会がない/不要なメタタグ

4-1. メタキーワード

<meta name="keywords" content="キーワードを,で区切って指定">

不要そのページの内容を表すキーワードを半角カンマ（,）区切りで書きます。ただし、Googleは検索順位を決めるうえでメタキーワードを一切見ていません。Googleがサポートしているメタタグ（公式ページ）にも、掲載されていません。
そのうえ、キーワードを書き並べすぎると検索エンジンによってはスパム判定されてしまうこともあるようなので、基本的に書かないことをおすすめします。

4-2. ページ遷移させるタグ

<meta http-equiv="refresh" content="秒数;url=リンク先のURL">
例：<meta http-equiv="refresh" content="3; url=https://saruwakakun.com">

不要ページ遷移までの秒数とURLを指定することで、他のページへとリダイレクト（転送）することができます。例えば、content="3; url=https://saruwakakun.com"と書けば3秒後にサルワカのトップページへ自動的に飛ぶようになるわけですね。

ただし、SEO的にも色々と問題がありそうですし、あまり使う機会はないかもしれないですね。

4-3. 検索結果に検索ボックスを表示しないようにする

<meta name="google" content="nositelinkssearchbox" />

サイトによってはGoogleの検索結果に「検索ボックス」が表示されることがあります（Googleが判断します）。

上のメタタグを書いておくと、この検索ボックスを非表示にすることができます。個人で運営しているメディアでは、検索ボックスが表示されることは滅多にないと思いますが・・・。

4-4. 他の言語に翻訳しないようにする

<meta name="google" content="notranslate" />

英語のページを見たときに「翻訳しますか？」とボタンが表示されることがありますね。このメタタグを書いておくと、他の言語のユーザーがページにアクセスしてきても、翻訳オプションが表示されなくなります。

4-5. 言語の指定

<meta name="language" content="Japanese" />

不要多言語サイトでなければ全く不要です。また、多言語サイトであったとしても、Googleはコンテンツを見て言語を判断するため、書かなくても問題はありません。

4-6. 著者の明記

<meta name="author" content="著者名" />

信頼性の面で有効そうに見えますが、SEO的な効果は期待できません。まぁスパム業者でも著者名は書けますからね。嘘の著者名も書けてしまうし・・・。

4-7. コピーライト

<meta name="copyright" content="©著作者" />

不要コピーライトは、フッターなど訪問者に見えるところに書いておきましょう。

4-8. その他不要なメタタグ

<meta name="summary" content="ページ概要">
<meta name="subject" content="ページの主題">
<meta name="abstract" content="ページの要約">
<meta http-equiv="content-language" content="ja" />
<meta name="revisit_after" content="クロール再訪問日を指定" />
<meta name="reply-to" content="連絡先" />

↑どれも不要です。書くことでペナルティになることはないと思いますが、SEO効果は全く期待できません。

5. メタタグをheadタグ内に追加する方法

では、メタタグをheadタグ内に追加するにはどのようにすれば良いのでしょうか。

5-1. WordPressの場合

主に２つの方法があります。1つめはheader.phpを直接編集すること。このファイル内にheadタグがあるはずなので、その中に追記します。

２つめは、header.phpは触らずにfunctions.phpからheadタグへの追加設定を行うことです。子テーマのfunctions.phpだけ触れば良いので、テーマのアップデートのことを考えると、こちらの方がおすすめです。
書き方は以下のようになります。

functions.php

//headにmeta tagを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
	echo 'ここにhead内に出力したい内容';
}
//END headにmeta tagを追加

↑「ここにhead内に出力したい内容」を<meta ~>に置き換えます。複数書く場合は、echo '<meta ~><meta ~>';というように並べればOKです。詳しくはこちらの記事をどうぞ。

【WordPress】functions.phpからhead内にタグを追加する方法

記事ごとに指定したい場合

上で紹介した方法だとサイト内の全ページに同じメタタグが挿入されることになります。記事ごとに指定する「メタデスクリプション」などには使えないので要注意ください。

WordPressテーマでメタデスクリプションの設定機能が予め備わっていない場合には「All in One SEO Pack」というプラグインを使うのが良いかと思います。

5-2. はてなブログの場合

全ページ共通のメタタグであれば、詳細設定の「headに要素を追加」欄から追加することができます。この中に書かれたタグは、そのままhead内に出力されます。

5-3. ライブドアブログの場合

「ブログ設定デザイン／ブログパーツ設定のPC カスタマイズタブ」から編集ができます。トップページ・個別記事ページ・カテゴリーページ・月別アーカイブページそれぞれ個別にカスタマイズできるのが良いですね。
この中でheadタグを見つけて、その中にメタタグを貼ればOKです。

6. その他知っておきたいこと

6-1.直接的なSEO効果があるメタタグはない

「書くだけでSEO的に強くなるメタタグ」なんてものは（今となっては）存在しません。逆に言えば、「◯◯のメタタグを書いていないから、検索順位が上がらない」ということはまずありません。

ただし「meta robots」でクローラーをブロックしたり、文字コードを間違えたりすれば、検索順位に影響が出てくるはずです。

6-2.body内に書いても良い？

メタタグは本来headタグ内に書くものです。しかし、辻正浩さんのブログによると、body内でも「meta robots（noindexの指定）」は機能したそうです。
headタグ内に書くに越したことはありませんが、ブログサービスなどでどうしてもheadタグは編集出来ない場合には、bodyタグに書いてみるのもアリかもしれませんね。

6-3. 大文字と小文字は区別されない

ほとんどのメタタグでは英語の大文字と小文字は区別されません。基本的には、小文字で書いておけば良いと思います。