メタタグとは、HTMLの中に書き込むタグの一種です。Webサイトの内容をクローラーに正確に伝えるための注釈のような役割を担っています。
メタタグによって、Webサイトの正しい情報がインデックスされることで、検索エンジンによる評価が上がり、検索順位やクリック率の向上など多くのSEO効果が期待できます。まさに、WebサイトのSEO対策には欠かせないものといえるでしょう。
この記事では、メタタグの書き方と設定方法、SEO効果についてわかりやすく解説します。加えて、6種類の重要なメタタグと、運用する際の注意点も紹介しますので、ぜひ最後までお読みください。
メタタグとは
メタタグとは、Webサイトに関する説明書のようなもののことです。Webサイトの運営者が、検索エンジンに対して「コンテンツの概略をまとめると、このようになる」というように、コンテンツの情報を端的に説明しているもの、ととらえるとよいでしょう。
また、「Webページはこのように扱ってほしい」という指示書の役割も担っています。例えば、「検索エンジンに登録しないでほしい」「クローラーにこのWebページを見なかったことにしてほしい」といった依頼を出すこともできるのです。
他にも、ブラウザに対してサイトを表示する際に「このような文字を使ってほしい」「このようにレイアウトしてほしい」といった、Webページのコンテンツ表記に関する指示もメタタグで出すことができます。
これによりクローラーは、より正確にWebページの内容を理解でき、ユーザーは整ったWebページを見られるのです。
メタタグを書く場所
メタタグの詳しい書き方については後述しますが、ここではまず、メタタグを書く場所について解説します。
HTMLファイル内でメタタグを書く場所
<html><head>
メタタグはこの位置に記述
</head>
<body>
</body>
</html>
メタタグは基本的に、Webページを構成するHTMLファイル内にある<head> </head>の中に記述します。
メタタグの書き方で気になる「アルファベットは大文字と小文字どちらで書くの？」という質問については、基本的にどちらでも同じく機能します。ただし、一般的には小文字で書かれることのほうが多いです。
<head>内でメタタグを書く際の基礎知識
<head>内に記述するメタタグは、「meta＋タグ」という書き方が基本です。上記はWebページの概要を記載する「descriptionタグ」に対するメタタグの書き方の例です。
メタタグを書く際の注意点
メタタグは、コンテンツの文章とは異なる一種の「プログラムコード」です。そのため、アルファベットのスペルミスや、ダブルクォーテーションのつけ忘れなど、小さなミスでもエラーにつながってしまいます。細かい点まで注意して書くことが大切です。
※例外として「meta」というコードを使わない場合もあります。
メタタグの確認方法
通常のブラウザでWebサイトを表示しただけでは、メタタグが表示されることはありません。しかし、ブラウザ上で簡単な操作をすればすぐに、メタタグを確認することができます。ここでは、その方法を見ていきましょう。
ブラウザでHTMLのソースを表示して確認する
ブラウザでHTMLソースを表示させる手順は、以下のとおりです。
- ブラウザで目的のWebページにアクセス
- マウスを右クリック（あるいは「control」キーを押しながらマウスをクリック）
- 表示されたメニューの「ページのソースを表示」を選択する。Webページのソースが表示される。（あるいは、Google ChromeでWebページを表示した後→メニュー「表示」→「開発／管理」→「ソースを表示」と進んでも同様に表示）
- 表示されたHTMLコードのソースの中にある<head>タグに注目。その中にある「meta」と書かれた場所が、メタタグ
メタタグのSEO効果
メタタグを設置したとしても他のSEO対策と同様に、絶対に検索順位が上がるといった保障はありません。
しかし、メタタグを設置することにはメリットがあり、SEO対策として有効であることがわかかっています。メタタグを設定することで期待できる効果について、いまいちど確認していきましょう。
1.検索結果のクリック率を高められる
ユーザーが何かを検索するとき、「自分の希望にあったWebサイトなのか」「実際にクリックする価値があるのか」と、これらを判断する際の決め手となるのが、タイトルです。
メタタグには、検索ユーザーに対して表示する内容を指示できる機能があります。例えば「タイトルタグ」であれば、Webページのタイトルを指定することが可能です。
また、「ディスクリプションタグ」であれば、検索結果でタイトル下に表示されるWebページの要約を指定できます。
なお、メタタグを適切に設定していないと、Webページ内の文章が部分的に切り取られたり、意図しない要約文が表示されたりするため、ユーザーの目に留まりにくいものとなってしまいます。
メタタグを適切に設定することで、クリック率を高められる可能性があるなどのSEO効果に期待できます。
2.検索エンジンに意図を伝えられる
前述したメリット「検索結果のクリック率を高められる」は、ユーザーに対するアピールでしたが、メタタグには、検索エンジンに対しても効果があります。
Webサイトを「このように見てほしい」「このように扱ってほしい」という指示をメタタグによってアピールすることができるからです。
タイトルやディスクリプションについてメタタグを設定すると、Webページのテーマを適切に伝えられるのと同時に、ユーザーに見せてほしい内容を確実に伝えることができるのです。
また、noindex／nofollowというメタタグでは、検索結果に表示しない、かつクローラーに巡回されないことを指定できます。
noindexとnofollowとは？違いや正しい書き方、確認方法
なお、メタタグはブラウザに対してもこちら側の指示を伝えることができます。ユーザーが使っているブラウザで、Webページをどのように表示するかを指定できるため、例えば、「使ってほしいフォントの種類」「デバイスや画面の大きさによってどのようにレイアウトを変えるか」といったことが指定できます。
メタタグを通して検索エンジンやブラウザの動きを誘導することで、ユーザーにとって便利でわかりやすいWebサイトに整えることができるのです。
メタタグの種類を紹介
メタタグには多くの種類がありますが、ここではSEO対策の観点から見て欠かせない6種類を紹介します。最初に設定すべき重要なメタタグのため、ぜひチェックしてください。
1.メタディスクリプション（meta description）
メタディスクリプションとは、Webページの内容を要約した文章のことで「ディスクリプション」と略されることもあります。
メタディスクリプションで設定した内容は、検索結果で表示されるタイトルの真下に「サイトの説明文」として表示されます。
■ポイント
メタディスクリプションによるSEOの効果は直接的ではないものの、Googleのガイドラインによれば「検索トラフィックの質と量の改善に大いに役立つ可能性があります」とされ一定以上の効果が期待できます。
ただし、力を入れすぎて長くなってしまうのは禁物です。長すぎるディスクリプションは検索エンジンによって自動的にカットされてしまうからです。メタディスクリプションは120文字程度で記述することが望ましいとされています。要点をつかんだ質の高い要約文を設定するのがポイントです。
description(ディスクリプション)とは？書き方や確認方法を解説
2.タイトル（title）
タイトルは、名前のとおりWebページのタイトルを設定するためのタグです。厳密にいえば、記述形式が異なるためメタタグではないとする意見もありますが、重要な役割を果たします。
タイトルタグ内で設定した内容が、「検索結果のタイトル」または「ブラウザのタグ」に表示されます。
■ポイント
タイトルタグでWebページのテーマとキーワードを的確に埋め込むと、SEO効果が望めます。特に重要なキーワードは、タイトルのはじめのほうに集中させると効果が出やすいとされています。
また、ユーザーの目を引くタイトルを設定することも重要です。検索結果に並んだWebページの中で、興味を持ってもらい、クリックしたくなるようなタイトルを設定しましょう。
タイトルも思いのままに長くなるのはNGです。検索結果に表示されるタイトル部分は概ね30〜40文字程度としましょう。
SEO対策に効果的なタグの使い方！title、description、hタグそれぞれ解説
記事タイトルとは？例や文字数、SEOに効果的な付け方のコツを解説
このページでは、ユーザーがコンテンツに興味を持つかどうか左右される記事タイトルについて、作り方や注意点などを解説しています。タイトル作成に役立つツールやキーワードの選定方法などについてもまとめているので、SEOにお役立てください。
3.文字エンコーディング
こちらは、「文字エンコーディング」あるいは「文字コード」と呼ばれるメタタグです。Webページを表示する際に、ブラウザに使ってほしい文字コードを指定するものとなります。
文字コードは複数存在するため、異なる文字コードを使ってしまうと文字化けを起こすことがあるため注意が必要です。
■ポイント
特に日本語を用いたWebページでは、半角アルファベットと併用する形になり、文字化けなどが起こりやすいため、メタタグの設定は必須です。
Webページ内で文字化けが発生していると、ユーザーがコンテンツを読むことができません。それだけでなく、検索エンジンのクローラーも情報を読み取れず、SEOの面でも悪影響が出てしまうので注意しましょう。
4.ビューポート（viewport）
ビューポートとは、モバイル端末で表示する際に最適化するためのメタタグです。スマートフォンからのアクセスが過半数もしくはそれ以上である現代では、必ず設置すべきものといえます。
■ポイント
パソコンに比べ、スマートフォンやタブレットでWebサイトを表示する場合は、テキストや画像などのサイズをメタタグで調整しておかないとレイアウトが崩れてしまいます。
モバイル端末でも見やすく操作しやすいWebページであることは、Googleの評価要素の一つとなっています。そのため、ビューポートはSEO対策においても重要です。Webページのスマートフォン対応の一環として必ず確認しましょう。
モバイルフレンドリーとは？対応方法やテストツール、エラーの対処法を解説
5.OGPタグ
<meta property=”og:title” content=”ページのタイトル” /><meta property=”og:type” content=”ページの種類” />
<meta property=”og:url” content=”ページのURL” />
<meta property=”og:image” content=”サムネイル画像のURL” />
<meta property=”og:site_name” content=”サイト名” />
<meta property=”og:description” content=”ページのディスクリプション” />
OGPタグは、WebページがSNSでシェアされた際に、どのように表示してほしいかを設定するためのメタタグです。
タイトルやディスクリプションなど、それぞれを設定するために、上記のように複数の項目に分かれています。
■ポイント
WebページがSNSでシェアされた場合、従来のタイトルタグやメタディスクリプションタグの内容は反映されません。そのため、OGPタグが設定されていないと、SNS上で見たユーザーに対して、Webページの内容が正しくきれいに伝わらないことが想定されます。
SNSユーザーにも興味を持ってもらい、クリック率を高めるためにもOGPタグを設置しておきましょう。
OGPとは？HTMLの書き方やfacebookでの設定方法も解説
6.ノーインデックス ノーフォロー（noindex,nofollow）
noindex（ノーインデックス）は、Webページを評価してほしくないときや、Webサイト全体の評価から除外してほしいときに使用するメタタグです。主に、作成途中のページや、重複コンテンツと判断されるおそれのあるページなどに設定します。
nofollow（ノーフォロー）は、Webサイト内に設置したリンク先の評価が良くないと判断したときに使用します。クローラーに対して、無関係であることを宣言しておくためのメタタグです。
■ポイント
noindexによる効果は、SEO効果が出ずに評価の上がらない低品質コンテンツに対して設定し、それらのページを評価から除外させることで、Webサイト全体の評価向上を狙うところにあります。
nofollowによる効果は、サイト内に設定したリンク先が信用できないサイトだった場合、こちらにまで悪影響が及ぶことを避けることにつながります。また、広告リンクがWebページの内容と関連性が低いことによる低評価を避けるために使用するのも有効です。
noindexとは？SEO対策を正しく理解してインデックスをコントロールしよう
SEO対策の施策の1つとしてnoindexという言葉を聞いたことはありませんか？検索結果に特定のページを表示させないために設定するのがnoindexですが、なぜSEO対策になるのでしょうか？基本的なところから解説します。
メタタグの書き方と設置方法
メタタグは正しい位置に正しい書式で設置しなければ正常に機能しません。また、HTMLに直接設置する方法と、CMSを通して設置する方法があります。それぞれ具体的に見ていきましょう。
HTMLでメタタグを直接埋め込む方法
<head><title>タイトル</title>
<meta content=”要約文” name=”description”>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta property=”og:title” content=”ページのタイトル” />
<meta property=”og:type” content=”ページの種類” />
<meta property=”og:url” content=”ページのURL” />
<meta property=”og:site_name” content=”サイト名” />
<meta property=”og:description” content=”ページのディスクリプション” />
</head>
まず、HTMLにメタタグを直接埋め込み設置する方法を紹介します。
HTMLに直接メタタグを埋め込む書き方
- 対象のHTMLファイルをテキストエディタなどの専用ソフトで開く
- 開いたHTMLファイルの中の<head>タグを探す
- <head>タグ内に設置したいメタタグを書き込む（上記記述例を参考）
ポイント
HTMLファイルに直接書く方法は、目的にあったメタタグを複数埋め込むことができるのがポイントです。
一方でWebサイトを構成する全てのページのHTMLファイルにメタタグを追加しなくてはならいため、情報量が多いサイトではやや手間のかかる作業になります。
これまでの仕組みを理解できれば思ったほど難解ではないので、上記の記述例を参考にさっそく埋め込んでみましょう。
CMSを使ってメタタグを設置する方法
WordPressなどのCMSを使ってWebサイトを構築している場合、メタタグ設置用のプラグインを導入する方法が便利でおすすめです。
WordPressなどのCMSでメタタグを設置する方法
- 「All in One SEO」や「Yoast SEO」などのプラグインをインストール
- 「有効化」すると、導入は完了
- 各投稿記事ごとに、ディスクリプションやOGP設定などのメタタグが設置できるようになる
- ここで設定したメタタグが、各Webページの<head＞タグ内に自動で埋め込まれ、一括設置される
ポイント
プラグインを利用すれば共通するものは一括で管理ができ、ページごとに変えたいものはその都度、ページごとに異なる設定を行うことが可能です。
メタタグを設置するためのプラグインは、SEO対策のために開発されたものが多く、導入して簡単な設定をするだけですぐにSEO効果を狙ったメタタグ対応ができるのがポイントです。
メタタグを設置する際の注意点
メタタグは多くの機能を持ち、検索エンジンにもユーザーにも、Webサイトの情報を正しく伝えるために大切なものです。しかし、実際には注意すべき点や意識しておきたい事柄があります。
メタタグを設置しただけで油断しない
メタタグの設置は主要なSEO対策として導入されています。しかし、メタタグを設置したからといって、確実に検索順位が上がるということではない点に注意が必要です。
メタタグを設置することで、クリック率向上、ビューポートの設定によりモバイルユーザーの回遊率の向上など多くの効果が期待できますが、このことだけが直接的なSEO対策となるわけではありません。
あくまで間接的な一つの効果としてとらえ、その先の対策やそのほかの施策と併用していくことが重要といえます。
メタタグの記述は正しい場所に正しく記述
検索エンジンやブラウザは、<head>タグの中にあるものだけをメタタグとして認識します。そのため、メタタグは必ず<head></head>の間に記述しましょう。
また、メタタグは一種のプログラムコードです。正しく記述しなければ、いっさい機能してくれないだけでなく、コンテンツの表示やレイアウトにも乱れが生じ、ユーザの離脱につながる恐れもあります。
メタタグの設置後は必ず、実際のサイトをパソコンとスマートフォンの両方で確認し、ミスやレイアウト崩れなどがないか確認しましょう。
メタキーワードはなくてもよい
メタキーワードとは、Webページのテーマや内容を表すための「キーワード」を設置するメタタグのことをいいます。
メタディスクリプションは、Webページの概要を約120文字程度でまとめた文章のことでしたが、メタキーワードは「りんご,バナナ,ぶどう」といったように、検索エンジンに対しWebページのテーマを表す「キーワード」を伝えるためのメタタグです。
かつてはSEOの観点で効果が期待できるものでしたが、現在Googleのクローラーは、メタキーワードをほぼ参照していないと考えられています。
AIによるページ内容の読み取り精度が向上し、テーマやキーワードを正確に抽出することができるようになったため、重要度が下がったと考えられています。
また、メタキーワードがSEO対策の一環として乱用されたことも、メタキーワードの重要度が下がったとされるのも一因です。
メタキーワードの設定はあってもいいのですが、以前ほどの効果が見込めるわけではないという点を意識しておきましょう。
メタタグに関するまとめ
メタタグは、検索エンジンやブラウザに対して、Webページの内容を正しく伝えるための説明書や指示書のような役割を持っています。
せっかくユーザーのニーズを満たす優良なコンテンツを作成しても、メタタグを設置していなかったり、正しく設置できていないことで評価につながらないこともあります。
一方で適切に正しく設置すれば、Web上の検索順位が上がったり、ユーザーのユーザビリティが向上するなどの効果を見込めます。
Webサイトの情報を適切に伝え、多くのユーザーに届けるためにも、メタタグを正しく設定しながら活用していきましょう。
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社を起業。その後、株式会社オプトでWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社でゲームプロデューサーとしてスマホゲームアプリの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスに入社。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善～ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。
■経歴
2003年 ISD株式会社/起業
2009年 株式会社オプト/SEMコンサルタント
2011年 株式会社メタップス/シニアディレクター
2013年 ライブエイド株式会社/執行役
2016年 ワンダープラネット株式会社/プロデューサー・BizDev
2018年 株式会社ニュートラルワークス/取締役CMO
■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告
■保有資格
Google アナリティクス認定資格（GAIQ）
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格
