カテゴリー

metaタグとは?SEO効果を高める設定方法をわかりやすく解説

ブランディング

メタタグ(metaタグ)は、Webページの情報を検索エンジンやブラウザに伝えるための重要なHTML要素です。

metaタグの設定は、サイトの検索順位やユーザーのクリック率に大きな影響を与えることもあるので、SEO効果を維持・向上させるためにも欠かせません。

本記事では、metaタグの基本的な概念や記述方法、さらにはSEO効果を高めるための具体的な設定方法について詳しく解説します。

初心者でも分かりやすい実践的な内容ですので、ぜひ参考にしてみてください。

メタタグ(metaタグ)とは?

metaタグは簡単に言えば、Googleやブラウザに伝える情報のことです。

まず、metaタグの説明と形式について紹介します。

metaタグは検索エンジンやブラウザに伝える情報
メタタグ(metaタグ)とは、HTML文書の<head>と</head>の間に挿入されるタグの一種で、Webページの情報を検索エンジンやブラウザに伝える目的で使用されます。
ユーザーがmetaタグを直接目にすることはありませんが、中にはSEO(検索エンジン最適化)において重要な役割を果たすタグも存在します。
例えば、meta descriptionタグは検索結果に表示されるページの概要を指定し、クリック率(CTR)の向上をサポートしてくれるでしょう。
適切なmetaタグの設定は、検索エンジンによるクロールとインデックスの効率を高め、ウェブサイトのパフォーマンスを向上させるために不可欠です。

metaタグの記述形式
metaタグは、以下のようにHTMLでは<head>と</head>の間に書きます。

<html>
<head>
*ここにmetaタグを書く
</head>
<body>
</body>
</html>

metaタグは種類によって形式が様々ですが、一例としては以下の通りです。

<title></title>
<meta name="属性名" content="値"></meta>

ここで、属性が情報の種別、値はその具体的な内容を表し、属性が複数の場合はカンマで区切って記述します。

SEOに役立つmetaタグの種類や形式などの詳細については後ほど解説します。

metaタグ設定の確認方法

metaタグ設定の確認方法は、次の2つです。

● ソースコードから確認する方法
● ツールを使う方法

それぞれ解説します。

ソースコードから確認する方法
ソースコードからmetaタグを見る方法は簡単で、次の3ステップを実行することで確認できます。

1. ブラウザを開く
2. metaタグが見たい箇所で右クリックし「ページのソースを表示」
3. HTMLの中で「<meta」を探す

metaタグの設定を確認するには、まずブラウザの開発者ツールを使用します。
具体的には、確認したいウェブページを開いた状態で、metaタグを見たい箇所で右クリックして「ページのソースを表示」を選びます。
次に、表示されたソースコード内で「<meta」と検索すると、すべてのmetaタグを見つけることができます。
この方法は特別なツールを必要とせず、直接HTMLソースコードを確認できるため、手軽で便利です。

ツールを使う方法
META SEO Inspector
META SEO Inspectorは、閲覧しているウェブページのmetaタグを簡単に確認できる便利なツールです。
このツールはGoogle Chromeの拡張機能として提供されており、インストール後はウェブページのmetaタグ情報を瞬時に表示してくれます。
このツールを使えば、metaタグの内容や設定が正しく行われているか簡単に確認できます。また、対応するmetaタグも多いのが特徴です。

META SEO Inspectorが対応しているタグは以下の通りです。
● titleタグ
● meta descriptionタグ
● meta keywordsタグ
● robotsタグ
● hタグ
● OGP設定
● canonical属性
● 構造化データ

設定方法は簡単で、Chrome ウェブストアより「META SEO inspector」と検索し、無料登録すれば完了です。
登録後はChrome画面右上のMETA SEO inspectorの電球アイコンをクリックすると、表示されているサイトのメタデータが表示されます。
タグの設定ミスや重複があれば赤字で表示されるため、正しく設定されているか即座に発見することも可能です。
metaタグが正しく設定されているか確認する際、目視だと追いつかないという方は、META SEO inspectorを使ってみると良いでしょう。

参考:META SEO inspectorとは?Chrome拡張機能でSEO分析をしよう|AI analyst Blog

メタタグ確認ツール
このようなツールの中でも特に便利なのが、SEO FREEが出している「メタタグ確認ツール」です。

このツールを使うと簡単にウェブサイトのメタタグをチェックできます。
● タイトルタグ
● メタディスクリプション
● メタキーワード
● viewportタグ
● robotsタグ
● format-detection
● referrer
● msapplication-TileImage

手順はとてもシンプルで、まずツールのサイトにアクセスします。
次に、確認したいウェブページのURLを入力すると、それだけでメタタグの情報がすぐに表示されます。
確認できるmetaタグは多くありませんが、タイトルや説明文、キーワードなどのSEOに直結するメタタグを確認する際は役立つでしょう。
SEO対策を強化するためにも、ぜひ活用してみてください。

参考:メタタグ(meta タグ)確認ツール - SEO FREE

metaタグの書き方・作成方法

metaタグの書き方や作成方法は大きく分けて次の3つです。

● HTMLに直接書く方法
● Wordpressのプラグインを使用する方法
● ツールを使う方法


それぞれ順番に解説します。

HTMLに直接書く方法
metaタグを記述する時の最も基本的な方法は、テキストファイルなどを使ってHTMLを直接書くというやり方です。
まず、HTMLファイルを開き、headタグ内にmetaタグを記述しましょう。
HTMLに直接タグを書く方法は、手動でタグを一つずつ追加する必要がありますが、細やかなカスタマイズが可能といったメリットもあります。
また、書き方のルールさえ理解することができれば、初心者にも比較的簡単に理解できるため、すぐに作成や修正をすることができます。

Wordpressのプラグインを使用する方法
WordPressでmetaタグを効果的かつ楽に設定したいなら、プラグインを活用する方法が最もおすすめです。
定番のプラグインとしては次のようなものがあります。

● Yoast SEO
● All in One SEO Pack
● The SEO Framework

これらを使えば専門的な知識がなくても、視覚的な操作でmetaタグを簡単に追加・管理できます。
このプラグインはSEOにおいても役に立つので、Wordpressを使う場合は設定してみると良いでしょう。

ツールを使う方法
metaタグを効率的に設定するためには、専門のツールを使用する方法があります。
ツールを使えば手動でHTMLコードを編集する手間がなく、簡単かつ正確にmetaタグを生成することができます。
例えば、「Meta Tag Generator」「メタタグ作成ツール」などのツールが便利です。
これらのツールは必要な情報を入力するだけで、自動的に適切なmetaタグを生成してくれます。
ただし、生成されたmetaタグをHTMLやWordpressプラグインの決まった場所にコピペするという手間はあります。
とはいえ、このツールはHTMLに慣れていない初心者でも使いやすく、SEO効果を高めるために役立つので、ぜひ活用してみることをおすすめします。

参考:メタタグ作成ツール|リュウム株式会社

SEOにおけるmetaタグ設定メリット5選

metaタグの設定はSEO的にも有利に働くことがあります。

● クリック率(CTR)の向上
● 画面表示や動作の最適化
● 検索エンジンによるクロール促進
● 検索エンジンによるインデックス促進
● SNSからのアクセスアップ

それぞれ順番に解説します。

クリック率(CTR)の向上
titleタグやdescriptionタグなどのmetaタグを適切に設定することで、検索結果に表示されるページのタイトルや説明文がより魅力的になります。
その結果、ユーザーの興味を引きやすくなるので、クリックされる確率が高まります。
とりわけdescriptionタグにわかりやすく魅力的な説明を記載すると、ユーザーの関心を引いてCTR(クリック率)が向上するでしょう。
また、検索エンジンはユーザーのクリック率を評価基準の一つと捉えているため、CTRの向上はSEO効果にも繋がり、ページやサイト全体の評価が向上する可能もあります。

画面表示や動作の最適化
metaタグを活用するとWebページの表示や動作の最適化が可能となります。
中でもviewportタグは特に重要で、ページの表示方法を制御し、モバイルデバイスでの閲覧性を向上させる時に有効です。
適切な設定はユーザーフレンドリーなレイアウトを実現させ、ページの読み込み速度も上がります。
結果としてユーザー体験が向上し、直帰率の低減や滞在時間の延長といった効果も期待できるでしょう。
また、キャッシュ設定を最適化することで、ページの再読み込みを効率化し、訪問者もストレスを感じにくくなります。

検索エンジンによるクロール促進
ウェブサイトを検索エンジンに効率よく認識させるためには、metaタグの設定が重要です。
robotsタグで「index、follow」と設定すれば、ページを検索エンジンにインデックス登録させ、リンク先も巡回するように指示できます。
サイトごとのクロール数は予算のように決まっており、クロールバジェットと呼ばれています。
お問い合わせページなどのインデックスさせたくない記事や外部リンクを「nofollow」にすると、クロールバジェットが節約されて他の記事がクロールされやすくなります。 SEOに役立つrobotsタグの設定方法については、この後で別途解説しますので参考にしてみてください。

参考:index robots metaタグや follow robots metaタグはGoogle検索に何ら影響しない、あってもなくても同じ|海外SEO情報ブログ
参考:クロールバジェットとは何か&ほとんどのSEO担当者が心配しない理由|Ahrefsブログ

SNSからのアクセスアップ
SNSでの拡散を狙うなら、metaタグの設定がカギです。
特にOGPタグはSNSでシェアされた時、記事の魅力を最大限に引き出してくれます。
OGPタグを適切に設定すると記事のタイトルや画像、説明文が自動的に表示されるため、ユーザーの目を惹きつける効果をもたらし、クリック率の向上に繋がります。
見栄えの良いサイトを見た読者によって情報のシェアが増えれば、自然とサイトへのアクセス数も増加するでしょう。
最大限の効果を引き出すためには、各SNS(Twitter、Facebook、Instagramなど)の推奨フォーマットに沿った設定をすることが重要です。

SEOに役立つmetaタグ一覧と設定方法

次に、SEOに役立つ8つのタグとその役割や設定方法について解説します。

① titleタグ
② keywordsタグ
③ descriptionタグ
④ OGPタグ
⑤ viewportタグ
⑥ robotsタグ
⑦ 文字コード
⑧ ブラウザの互換性指定

それぞれ順番に解説します。

① titleタグ
titleタグは、ページのタイトルを検索エンジンやブラウザに伝えるための非常に重要なmetaタグです。
以下は、基本的なtitleタグの設定例です。
<head>
<title>タイトル名</title>
</head>
titleタグはSEOにおいて最も影響力が大きく、検索結果のページに表示されるタイトルとしてユーザーに認識されます。
ページごとにオリジナルなtitleタグを適切に設定すると、検索エンジンのランキングが上がってユーザーのクリック率も高まります。
また、タイトルをパソコンとスマートフォンで切れずに表示させるためには、主要なキーワードを含めて全体で30文字以内に収めることが理想です。
タイトルタグを正しく設定することで、検索エンジンがページの内容を正確に理解し、ユーザーに対して魅力的に見せてくれます。

参考:SEOに効果的なタイトルタグとは?編集部で共有している設定方法|ferret One

②keywordsタグ
keywordsタグは、ウェブページに関連するキーワードを検索エンジンに伝えるためのメタタグです。
以下は、基本的なkeywordsタグの設定例です。
<head>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
</head>
キーワードが複数の場合は「,」で区切って設定します。
5年以上前まではkeywordsタグもSEOで重要視されていましたが、現在のGoogle検索エンジンにおいてその効果は限定的です。
また、Google、Yahoo、Bingではkeywordsタグを使用しないことを表明しています。
しかし、適切な設定によって一部の検索エンジンがページ内容を理解しやすくなる場合もあります。
例えば、シェアは少ないですが、中国の大手検索エンジンBaidu、ロシアの検索エンジンYandexなどは、keywordsタグを使用する可能性があると公表しています。
SEOに対する効果は薄いとされていますが、サイト運営者が目標キーワードを意識してコンテンツを作成するためにも設定しておいて損は無いでしょう。

参考:メタキーワードのSEO効果は?不要とされる理由も解説【2024年版】|Webma

③descriptionタグ
descriptionタグは、検索エンジンの結果に表示されるページの要約を指定するmetaタグです。
以下は、基本的なdescriptionタグの設定例です。
<head>
<meta name="description" content="ページ要約を記述">
</head>
descriptionタグというのは検索結果のタイトルの下に出てくる説明文のことで、これを適切に設定すると検索結果でのクリック率(CTR)を向上させる効果をもたらします。
descriptionタグを書く時は記事の内容を正確に言い表し、ページ独自の書き方にする必要があります。そうすることでSEO効果が高まったり、読了率が上がったりするようになります。
また、各ページをオリジナリティーのあるものにする必要があります。異なるページで内容が重複しているとSEOではペナルティを受ける可能性があるため注意しましょう。
通常、descriptionタグはページの内容を要約してスマホで80文字以内、PC場合は120文字以内に収めると途中で切れずに表示されます。
また、適切なキーワードを組み込むことで、検索エンジンがページの内容を正確に把握し、関連性の高い検索結果として表示することを促します。

④OGPタグ
OGP(Open Graph Protocol)タグは、SNS上でシェアされる時に表示される内容を制御するためのmetaタグです。
OGPタグでは、タイトル、画像、説明文などを指定できます。
以下は、基本的なOGPタグの設定例です。
<head>
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:url" content="ページのURL">
</head>
このタグを使用するとFacebookやTwitterの投稿がより視覚的に魅力あるものとなり、クリック率を向上させる効果を生むことが期待できます。
例えば、Twitterでブログをシェアした際に、シェアしたブログのアイキャッチ画像などが表示されるなどです。
OGPタグを設定するとユーザーの関心を引きやすくなり、結果的にSNSからのアクセスも増加する可能性があります。
ブログのアクセスは「人気度」に影響し、SEO的にも良い影響が得られるため、OGPタグも必ず設定したいmetaタグの一つと言えます。

⑤viewportタグ
viewportタグは、Webページが表示されるデバイスの画面サイズに応じて、表示方法を調整するためのmetaタグです。
以下は、基本的なviewportタグの設定例です。
<head>
<meta name="viewport"content="width=device-width,initial-scale=1.0">
</head>
viewportタグは、いわゆるレスポンシブデザインの基本設定を行うために使用します。
例えば、上記の設定ではデバイスの画面に合わせてページの幅を調整し、初期スケール(ズームレベル)を1.0に設定しています。
スマートフォンやタブレットなど、様々なデバイスでの閲覧が可能な現代では、このタグを設定することが非常に重要です。
viewportタグの使用によってユーザーがページを見やすくするためのスケーリングやレイアウトの調整が可能となります。
適切な設定がユーザーエクスペリエンスを向上させ、直帰率の低下や滞在時間の増加といったSEO効果も期待できます。

⑥ robotsタグ
robotsタグは検索エンジンのクローラーに対し、特定のページをクロール(巡回)するかどうか指示するためのmetaタグです。
このタグを適切に設定すると検索エンジンに見られたくないページを除外できます。
「noindex」指示をすると検索エンジンのインデックスから除外されるので検索結果に表示されなくなります。
検索結果に表示させたくないページや重複したページなど、意図的に隠したいページがある場合に使用されます。
また、「nofollow」指示は検索エンジンがリンクをたどって他のページに移動することを防ぐためのもので、ページランクの流出やアクセスの流出を阻止する目的で使われます。
例えば、次のように設定すると、そのページは検索結果に表示されず、リンクもたどられません。
<head>
<meta name="robots" content="noindex,nofollow">
</head>
robotsタグを適切に設定すると重複コンテンツやプライベートページが検索エンジンに認知されず、検索順位に悪影響を与えなくて済みます。
また、リンクジュースの外部流出を防ぐことにより、自サイトのドメインパワーが流出することも防ぐといった使い方ができます。
そういった意味でrobotsタグは、SEOにおいても一定の役割を果たします。

⑦文字コード
Webページを様々な環境で正しく表示するためには、文字コードを指定する必要があります。

文字コードというのはコンピューターが文字を認識するためのルールのようなものです。

例えば次のように記述することで、UTF-8の文字コードを指定できます。

<head>
<meta charset="UTF-8">
</head>

UTF-8は世界中の多くの言語に対応しており、Webページを作成する際の標準規格として広く利用されています。

ただし、文字コードを正しく設定しないと文字化けが発生し、ユーザーがWebページの内容を理解できなくなるなど、ユーザーエクスペリエンスに影響を与える可能性があります。

そのため、Webページを作成する時には、metaタグで適切な文字コードを正しく設定することが重要です。

⑧ブラウザの互換性指定
metaタグのブラウザ互換性指定は、特にInternet Explorer (IE) において重要です。
IEの各バージョンではレンダリング方法が異なるため、表示崩れなどが起こる場合もあり、互換表示と標準表示を適切に設定する必要があります。
WebページがIEで正しく表示されない場合の多くは互換モードになっていることが影響しています。
常時、標準モードにするためには、以下のmetaタグを使用します。

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

このタグはSEO効果に直接的な影響を与えませんが、ページの表示が正確であることはユーザー体験の向上につながり、結果的にはSEOにプラスとなります。

metaタグ設定の注意点

metaタグを設定する際にはいくつかの注意点があり、設定を間違えると狙った効果が得られないだけでなく、SEO的な観点から見て不利になる場合もあります。

metaタグ設定の具体的な注意点は次の6つです。

● 入力間違いを避ける
● 適切なキーワードを選定する
● キーワードの過剰使用を避ける
● 重複したmetaタグを避ける
● 適切な文字数を守る
● ページ内容との一貫性を保つ

それぞれ、順番に見ていきましょう。

入力間違いを避ける
metaタグはWebサイトの表示やSEOに影響を与えるため、設定時の入力ミスは避けたいものです。
タグの種類や属性(name、content、http-equivなど)にはそれぞれの役割があり、正確な入力が求められます。
スペルミスや引用符の閉じ忘れ、属性値の誤りなどがあると、未設定と同じになることが多々あります。
その結果、意図した表示やSEO効果を妨げる可能性があります。
metaタグを設定した後は、先ほど紹介した検証ツール「META SEO Inspector」や、Wordpressプラグイン「Yoast SEO」などを記述内容を確認し、問題があれば修正しましょう。

適切なキーワードを選定する
適切なキーワードを選定することは、SEO効果を高めるためにも重要です。
まず、記事を作成する前にターゲットとなる読者や目標のキーワードを設定しましょう。
次に、見つけたキーワードをmetaタグに組み込みます。
titleタグやdescriptionタグに自然な形でキーワードを含めると、検索エンジンの結果ページ(SERP)におけるクリック率が向上します。

キーワードの過剰使用を避ける
キーワードの過剰使用、いわゆる「キーワードスタッフィング」は、SEO対策として避けるべきです。
検索エンジンは自然な文章を評価し、ユーザーにとって有益なコンテンツを優先します。
キーワードを過剰に詰め込むと、検索エンジンからペナルティを受ける可能性がありますし、読者に読みにくさや不快感を与える原因となります。
titleタグは1回ずつ、descriptionは1〜2回まで、それぞれキーワードを入れることでSEO効果を発揮します。
したがって、適切な量のキーワードを違和感のない形で配置し、文章全体の流れや質を重視することが重要です。

重複したmetaタグを避ける
重複したmetaタグを避けることはSEOの観点からとても重要です。
metaタグの重複は次の2パターンが考えられます。
● 同一ページ内での重複(robotsタグなど)
● 異なるページ間での重複(titleタグ、descriptionタグなど)
同一のページ内に重複したmetaタグが存在すると、検索エンジンがどの情報を優先すべきか判断しにくくなり、結果としてサイトの評価が下がる可能性があります。
例えば、robotsタグで「nofollow」と「follow」、「index」と「noindex」が両方設定されていた場合は、「nofollow」「noindex」が優先されます。
意図しない形で重複して「noindex」設定されると、ページへのアクセスが途絶え、機会の損失が発生するでしょう。
また、titleタグ、descriptionタグの内容が異なるページ間で重複していると、SEOに悪影響を及ぼします。
metaタグを設定する際はページごとに適切なタグを付与し、titleタグやdescriptionタグの重複は避けましょう。

参考:indexタグとnoindexタグを同時に記述したらどうなる?

適切な文字数を守る
metaタグには適切な文字数を守ることでSEOに影響を与えるものもあります。
特にtitleタグとdescriptionタグは、検索結果に直接影響を与えるため、慎重に設定しましょう。
途中で切れずに表示できる文字数はサイトの視聴環境によって異なります。文字が途中で切れる文字数の目安は以下の通りです。

titlleタグ descriptionタグ
PC文字数 30文字以内 80文字以内
スマホ文字数 35文字以内 80文字以内

ただし、Googleは表示できる文字数の上限を過去に何度も変更してきたため、今後も変わる可能性があります。
以上のようなことから考えて、titleタグは30文字以内、descriptionタグは120文字以内(完全に切れない文字数は80文字)に収めるのが良いでしょう。 適切な文字数を守ればクリック率(CTR)やSEO効果を最大限に引き出すことが可能です。

ページ内容との一貫性を保つ
metaタグを設定する際は、Webページの内容を的確に表す必要があります。
ページの内容とmetaタグの記述が一致していないと、検索エンジンはページの内容を正しく把握できず、検索結果で表示順位が下がってしまう可能性があります。
例えば、descriptionタグなら、ページの要約やテーマを簡潔に記述しましょう。
また、titleタグにはページのタイトルを分かりやすく記述し、キーワードを含めるように意識すると効果的です。
titleタグやdescriptionタグと内容に乖離があると、Googleは勝手にtitleタグやdescriptionタグを書き換えてしまうことがあり、クリック率が下がる恐れがあります。
スパム的な考えで書くのではなく、正しい内容で、読者にとってサイトを訪問したくなるような記述を心がけましょう。

metaタグに関するよくある質問

最後にmetaタグに関するよくある質問をまとめましたので、ぜひ参考にしてみてください。

metaタグはサイト全体に適用されますか?
基本的にmetaタグは各ページに対して個別に適用されます。
例えば、descriptionタグやkeywordsタグはページごとに異なる内容を設定するとSEO効果を最大限に引き出すことができます。
ただし、サイト全体に共通するmetaタグもあります。例えば、charsetタグはサイト全体で共通の文字コードを指定します。
したがって、metaタグごとに対象が各ページなのか、全体共通の設定なのかを把握しておきましょう。

metaタグで最もSEO効果が高いものは?
metaタグの中で最もSEO効果が高いとされるのはtitleタグとdescriptionタグです。
このタグは検索結果に表示されるタイトルと、その説明文として使用されるため、検索結果からユーザーがページの内容を理解する際に注視します。
適切なdescriptionタグを設定するとクリック率(CTR)が向上し、結果的に検索順位の向上にも繋がることが期待できます。

metaタグの設定を間違った場合の影響は?
metaタグの設定を間違えると、検索エンジンがサイトの内容を正確に把握できず、検索結果に悪影響を及ぼす可能性があります。
また、これによってクリック率や訪問者数が減少することもあるので、それぞれの記述ルールを把握して適切に設定しましょう。

metaタグを適切に設定してSEO効果を高めよう!

metaタグの適切な設定はSEO効果を高めるために重要です。
metaタグは検索エンジンやブラウザに対してWebページの情報を伝える役割を果たします。
特にtitleタグやdescriptionタグは適切に設定することで、検索結果に対するクリック率(CTR)を向上させることができます。
また、robotsタグやviewportタグの設定により、検索エンジンのクロール効率やモバイル表示の最適化が図れます。
適切なmetaタグの設定はWebサイトのパフォーマンス向上とユーザーエクスペリエンスの改善に繋がるでしょう。
ぜひ、この記事で紹介した方法を参考にしてmetaタグを正しく設定し、SEO効果を最大限に引き出してみてください。

ライタープロフィール

神澤 肇(カンザワ ハジメ)
リボンハーツクリエイティブ株式会社 代表取締役社長

創業40年以上の制作会社リボンハーツクリエイティブ(RHC)代表。
企業にコンテンツマーケティングを提供し始めて約15年。
数十社の大手企業オウンドメディアの企画・制作・運用を担当。
WEBを使用した企業ブランディングのプロフェッショナル。
映像業界出身で、WEB、紙媒体とクロスメディアでの施策を得意とする。
趣味はカメラとテニス、美術館巡り、JAZZ好き。

あなたのおすすめ記事