- 2026.9.2
- SEO
metaタグの書き方は？SEOに効く設定方法を一覧で解説
metaタグ（メタタグ）は、Webページの情報を検索エンジンやブラウザに伝えるためのhtmlコードです。メタタグの適切な設定は、SEO（検索エンジン最適化）において非常に重要です。この記事では、SEOに効果的なメタタグの種類や具体的な書き方、最低限必要な設定から応用までを一覧で解説します。
この記事でわかること
- Webサイト公開に最低限必要な必須metaタグの種類と書き方
- SNSでの表示最適化や検索エンジンを制御するための応用設定
- 設定したmetaタグが正しく機能しているかを確認する方法
結果が違う本格SEO運用代行なら
フリースクエアにお任せください！
プロのSEO運用代行を低コストで実現！
metaタグとは？SEOにおける役割と重要性を解説
メタタグとは、Webページのコンテンツには直接表示されない、ページの「メタ情報（付加情報）」を記述するためのHTMLタグです。メタタグの役割は、そのページがどのような内容なのか、文字コードは何かといった情報を検索エンジンやブラウザに説明することにあります。特に検索結果の表示内容を制御する役割は重要で、ユーザーのクリック率に影響を与えるため、SEO対策において不可欠な要素です。
メタタグについてさらに詳しく知りたい場合は、以下の記事で詳しく紹介しています。
metaタグはHTMLのどこに書く？基本的な記述場所
メタタグの記述位置は、htmlファイルの<head>タグ内に定められています。<head>タグは、Webページのタイトルや文字コード、外部ファイルの読み込み指定など、ブラウザに表示される本体部分（<body>）以外の設定情報を記述する場所です。CMSやWebサイト作成ツールを使用している場合は、専用の編集画面からメタタグの設定が可能です。
CMS別metaタグ設定場所
Webサイトを制作・運用する際、必ずしもHTMLコードを直接編集する必要はありません。現在普及している主要なCMSやノーコードツールでは、管理画面上の専用フォームに入力するだけで、自動的にmetaタグを生成し、head内に反映してくれる機能が備わっているからです。各プラットフォームによって設定画面の名称や操作方法が異なるため、以下の表で代表的なツールの設定場所を整理しました。
| CMS | 設定場所 |
|---|---|
| WordPress | SEOプラグイン |
| STUDIO | ページ設定 |
| Wix | SEO設定 |
| Shopify | 検索エンジン設定 |
世界的にシェアの高いWordPressの場合、標準機能では詳細な設定が難しいため「All in One SEO」などのプラグインを導入して管理するのが一般的です。対して、STUDIOやWix、Shopifyといったサービスは、外部ツールを介さずとも標準の管理画面から直感的に設定できる仕様になっています。
注意点として、これらのツールで設定を行った後は、実際の公開画面でソースコードを表示し、意図したmetaタグが正しく出力されているかを必ず確認してください。特に、複数のプラグインが干渉してタグが二重に出力されたり、設定が反映されなかったりするトラブルを防ぐことが、安定したサイト運営には欠かせません。
【専門家の見解】
弊社で運用するWordPressで最も多いのは、テーマによりますが、metaタグがテーマ側とSEOプラグイン側で二重出力されるケースがあります。titleタグが二重出力されているのに気が付かずに、タイトルを変更して、いつまで待っても検索に反映されないというご相談もありました。必ずソースを確認して重複出力をチェックしましょう。
<head>タグ内に記述するのが基本ルール
メタタグは、html文書の<head>セクション内に配置するのが厳格なルールです。この位置に記述することで、ブラウザがページ本体のコンテンツを読み込む前に、そのページの基本情報を正しく認識できます。
例えば、文字コードの指定が<body>タグより後にあると、それ以前のテキストが文字化けする可能性があるため、必ず<head>内の先頭に近い位置で指定します。
【コピペOK】最低限設定すべき必須metaタグ4選と書き方
Webサイトを公開する上で、設定しておくことが推奨されるメタタグがいくつか存在します。これらはSEOやユーザー体験に影響を与える可能性があるため、適切な設定が望ましいとされています。ここでは、特に重要なメタタグについて、具体的な書き方の例とともに解説します。
これらの設定を参考にしてください。
meta charset｜文字化け防止に不可欠な文字コードの指定
文字コードを指定するmeta charsetは、ブラウザがWebページのテキストを正しく解析し、画面上に正確に表示させるために不可欠な設定です。コンピューターが文字を扱うためのルールである文字コードが正しく伝わらないと、意図しない記号や意味不明な文字列が並ぶ、いわゆる文字化けが発生します。現在、インターネット上の標準的な文字コードはUTF-8となっており、多言語対応や互換性の観点から、特別な事情がない限りはUTF-8を指定するのが通例です。
このタグを記述する際は、HTMLファイルのheadタグ内において、なるべく早い段階、具体的にはtitleタグや他のmetaタグよりも前に配置することが推奨されます。ブラウザはHTMLを上から順に読み込むため、テキストが出現する前に文字コードを認識させる必要があるからです。
【専門家の見解】
WordPressなどのCMSを利用している場合、システム側で自動的に最適化されるため、文字コードの設定ミスが起こることはほぼありません。しかし、手動で作成する静的HTMLサイトでは、この記述が漏れているケースを今でも散見します。文字化けが発生したページは、ユーザーに不信感を与え、即座にサイトからの離脱を招く致命的な要因となります。SEO以前の品質問題として、公開前のソースコードチェックを徹底しましょう。
meta description｜検索のクリック率を高める説明文の記述法
meta descriptionは、検索結果のタイトル下に表示されるスニペット（要約文）を指定するための重要なタグです。この記述自体に直接的な検索順位への影響はありませんが、ユーザーが検索結果から自分の求める情報があるかを判断する強力な判断材料となります。そのため、クリック率を最大化させるための広告文のような役割を担っています。
最適な記述法として、PC表示では120文字程度、スマートフォン表示では90文字程度を目安に、ページの主旨を簡潔にまとめます。特にスマートフォンの画面では表示領域が狭いため、重要なキーワードやユーザーのメリットは文章の冒頭に配置することが鉄則です。ページごとに固有の内容を記述し、重複を避けることで検索エンジンからの正当な評価につながります。
＜自社検証結果＞
実際にmeta descriptionを置き換える、あるいは削除するテストを行った際、以下のような結果が得られました。
対象：自社サイト3ページ
期間：3か月
計測：Search Console
| 項目 | description置き換え | description削除 |
|---|---|---|
| CTR | 平均0.2%上昇 | 平均0.1%減少 |
| 表示回数 | 変化無し | 変化無し |
| 順位 | 変化無し | 変化無し |
【専門家の見解】
この結果から、descriptionは順位や表示回数に影響は見られませんでしたが、CTR（クリック率）が僅かに変動しました。設定を削除するとGoogleが自動で本文から抜粋して書き換えを行いますが、意図しない箇所が露出するリスクがあるため、自身で設定することを強く推奨します。
注意すべき点として、変更内容が実際の検索結果へ反映されるまでには、数時間から数か月という予測できない時間を要します。Google Search Consoleの「URL検査」からインデックス登録をリクエストしても、反映に数週間かかるケースは珍しくありません。容易にテストを繰り返せる項目ではないからこそ、最初からクリック率を高める質の高い説明文を心がけることが大切です。
meta viewport｜スマホ対応サイトに必須の設定
meta viewportは、スマートフォンやタブレットなどのモバイル端末でWebサイトを閲覧した際に、表示領域や倍率を最適化するための必須の設定です。この設定がないと、スマートフォンでPC用のサイトがそのまま縮小表示されてしまい、文字が小さく非常に見づらくなります。ユーザーは画面を何度もピンチアウトして拡大しなければならず、利便性が著しく低下するため、レスポンシブデザインを採用する現代のWebサイトにおいて必ず記述すべきタグの一つです。
具体的には、HTMLのヘッドセクション内に「meta name=”viewport” content=”width=device-width,initial-scale=1.0″」というコードを記述します。これにより、表示幅がデバイスの横幅に合わせられ、初期のズーム倍率が1倍に固定されます。Googleが推奨するモバイルフレンドリーなサイト作りの基本であり、検索順位を維持する上でも欠かせない要素です。
【専門家の見解】
弊社では、新規サイトの制作や既存サイトの保守においてviewportの設定漏れが発生することはほとんどありません。しかし、過去に大規模なリニューアルを行った際、CMSから静的HTMLへ移行したサイトでは、手作業によるテンプレートの移植ミスなどが原因で稀にタグが削除されていることがあります。設定が消えると、それまで正常だったスマホ表示が突然崩れ、ユーザーの離脱率が急増する要因となります。サイトの移行やシステム変更を行った直後には、必ず全ページのソースコードをチェックし、viewportが正しく出力されているかを確認することが不可欠です。
title｜最も重要なSEO要素となるタイトルタグ
titleタグは、厳密にはmetaタグの分類には含まれませんが、HTMLのhead内に記述する要素の中で最も重要な役割を担っています。ここに設定されたテキストは、Googleなどの検索結果で大きな見出しとして表示されるほか、ブラウザのタブやブックマーク時の名称としても利用されます。titleは検索順位に直接的な影響を与えるSEOの最重要項目であり、ユーザーがページの内容を瞬時に判断するための大きな手がかりとなります。
記述する際のポイントは、対策キーワードを必ず含め、不自然にならない範囲で前方に配置することです。文字数は、検索結果で省略されずに表示される30文字から32文字程度に収めるのが一般的です。これを超えると内容が途切れてしまい、ユーザーに正確な情報が伝わらなくなる恐れがあります。
【専門家の見解】
弊社では、Webサイトの改善を行う際、まずtitle、次にdescriptionの順で最適化を実施しています。理由は、titleの方が検索順位の向上と検索結果でのクリック率（CTR）の両面に強力な影響を及ぼしやすいためです。タイトルを数文字調整するだけで順位が大きく変動するケースも多く、SEO戦略において最優先で取り組むべき工程と位置付けています。
具体的な記述例は以下の通りです。
<title>ここにページのタイトルを記述します</title>現場でよくあるmetaタグ設定ミスと解説
metaタグの設定において、弊社でサイト診断した中では頻繁に見受けられるミスの筆頭は、meta descriptionの重複や内容の不一致でした。全ページに同じ説明文を流用したり、本文の内容と乖離した文章を設定したりすると、検索エンジンがページごとの内容を理解しづらくなるリスクがあります。各ページの内容に基づいた固有の説明文を記述することが、検索エンジンの理解を助ける基本です。
また、文字コードを指定するmeta charsetの記述位置に関するミスも後を絶ちません。このタグは、ブラウザがテキストを解析する際の基準となるため、headタグ内の先頭付近に配置する必要があります。タイトルタグなどの後に記述してしまうと、ブラウザが読み込む前に解析が進んでしまい、実行環境によっては深刻な文字化けを引き起こす原因となります。
さらに、スマートフォン対応に欠かせないviewport設定の記述ミスも致命的です。例えば、ユーザーによるズーム操作を禁止する設定などはアクセシビリティの観点から推奨されません。現代のWeb標準では、デバイスの横幅に合わせる「width=device-width」と、初期倍率を指定する「initial-scale=1.0」を正しく組み合わせることが重要です。設定を誤ると、モバイルフレンドリーテストで不合格となり、検索順位に影響を及ぼす可能性があります。
SEO効果をさらに高めるためのmetaタグ設定
必須のメタタグに加えて、さらに詳細な設定を行うことで、SEO効果やユーザー体験を向上させられます。検索エンジンに対してページの扱い方をより細かく指示したり、SNSで共有された際の表示を最適化したりするためのメタタグの書き方を解説します。これらの設定は、サイトの目的や戦略に応じて導入を検討してください。
meta robots｜ページのインデックスを制御する方法
meta robotsタグは、検索エンジンのクローラー（情報収集ロボット）の動きをページ単位で制御するための設定です。例えば、作成途中で公開に値しないページや、サイト内検索の結果ページのように、コンテンツの質が低く検索結果に表示させたくない場合には「noindex」を指定します。また、そのページ内に貼られたリンクをクローラーに辿らせたくない場合には「nofollow」を指定することで、リンク先への評価の受け渡しを遮断できます。これらを組み合わせることで、意図しないページがインデックスされるのを防ぎ、サイト全体の評価を守ることができます。
具体的には、HTMLのヘッドセクション内に「meta name=”robots” content=”noindex,nofollow”」といった形で記述します。
ただし、設定を誤ると検索流入が完全に途絶えるリスクがあるため、対象ページの選別には注意が必要です。
以下を参考に設定しましょう。
【noindexを設定してはいけないページ】
- TOPページ
- サービスページ
- 記事
主要な集客コンテンツはnoindexを設定しないように注意しましょう。
【noindexを設定するべきページ】
- サイト内検索結果ページ
- サンクスページ
- テストページ
- コピーコンテンツになりがちな重複ページ
これらのページを適切に除外することで、検索エンジンはサイト内の重要なページを優先的に巡回できるようになります。
【専門家の見解】
弊社でアクセスを増やしたいとご相談があったサイトにも関わらず、TOPページ以外が全てnoindexになっていた事例がありました。状況を確認して説明したところ、制作会社が開発時の設定を戻し忘れたまま納品していた模様です。このように、意図しない設定ミスが原因で検索流入がゼロになるリスクがあるため、公開前後のソース確認は必須です。
OGP（Open Graph Protocol）｜SNSでシェアされた際の表示を最適化する書き方
OGP（OpenGraphProtocol）は、FacebookやX（旧Twitter）などのSNSでWebページがシェアされた際に、そのページのタイトル・画像・説明文などを意図した通りに表示させるための設定です。特にog:imageで魅力的な画像を指定することで、ユーザーの目に留まりやすくなり、クリック率の向上が期待できます。SNSからの流入を増やしたい場合には必須の設定といえます。
metaproperty="og:title"content="ページのタイトル"
metaproperty="og:description"content="ページの説明文"
metaproperty="og:image"content="表示させたい画像のURL"
metaproperty="og:url"content="ページのURL"【注意】現在はSEO効果がないmeta keywordsタグの扱い
metakeywordsは、かつてそのページに関連するキーワードを検索エンジンに伝えるために使用されていました。現在の大手検索エンジン、特にGoogleは、このmetakeywordsをランキングの評価指標として使用していません。そのため、SEO対策として設定する必要はなくなりました。
記述しても害はありませんが、手間がかかるだけでメリットはなく、競合サイトに対策キーワードを知らせるデメリットも考えられるため、基本的には記述しないことが推奨されます。
記述したmetaタグが正しく設定されているか確認する方法
metaタグを記述した後は、それが正しくHTMLに反映され、機能しているかを確認する作業が重要です。意図した設定になっていないと、SEO効果が得られないばかりか、予期せぬ問題を引き起こす可能性もあります。ここでは、ブラウザや専用ツールを使ってメタタグの設置状況をチェックする方法を2つ紹介します。
ブラウザのデベロッパーツールでソースコードを見る
最も簡単で基本的なチェック方法は、ブラウザで直接HTMLソースコードを確認することです。確認したいページを開き、Windowsなら「Ctrl+U」、Macなら「Option+Command+U」を押すか、右クリックして「ページのソースを表示」を選択します。表示されたソースコードの<head>タグ内に、設定したmetaタグが正しく記述されているかを目視でチェックします。
オンラインのチェックツールを活用する
目視での確認に加え、オンラインのチェックツールを利用するとより効率的です。特にOGP設定は、実際にSNSでシェアされた際の表示プレビューを確認できるツールを使うと便利です。
また、各種SEOチェックツールを使えば、metadescriptionやtitleタグが設定されているか、文字数は適切かなどをサイト全体で自動的にチェックしてくれます。
metaタグの書き方に関するよくある質問
ここでは、メタタグの書き方や設定に関して、初心者の方が疑問に思いやすい点をQ&A形式でまとめました。基本的なテンプレートや文字数、他のタグとの違いなど、よくある質問とその説明を参考にしてください。
metaタグの基本的な書き方のテンプレートはありますか？
はい、あります。Webサイトに最低限必要なmetaタグをまとめた例が下記です。このhtmlテンプレートをベースに、各ページの「タイトル」や「説明文」を書き換えることで、基本的な設定が完了します。
headタグ内にこのままコピーして使用できます。
SEOに効果的なmeta descriptionの最適な文字数は何文字ですか？
検索結果に表示されるdescriptionの文字数には限りがあるため、PCでは120文字程度、スマートフォンでは90文字程度が最適とされています。この文字数を超えると、説明文の末尾が「…」と省略されてしまいます。
伝えたい要点を前半にまとめ、指定の文字数内に収めることが重要です。
metaタグとtitleタグはどのように違うのですか？
titleタグはページの「タイトル」を定義する専用のタグであり、metaタグはタイトル以外の様々な「メタ情報（付加情報）」を定義するタグという役割の違いがあります。metaタグの一種として扱われることもありますが、厳密には異なる種類のタグです。どちらもhead内に記述するSEOの重要要素です。
成果にコミットするSEOコンサルティングなら
フリースクエアにお任せください！
豊富な実績とインハウス(内製化)支援も可能！
まとめ
metaタグは、Webページの内容を検索エンジンやブラウザに正しく伝えるための重要なHTML要素です。文字コードを指定するcharsetや、スマホ対応のためのviewport、検索結果のクリック率に影響するdescription、そしてSEOの最重要項目であるtitleタグは、サイト公開時に必ず設定すべき項目です。
弊社ではCTR改善目的でdescriptionを書き換えるケースが多く、順位よりクリック率改善を目的として運用しています。この記事で紹介した書き方や設定方法を参考に、自サイトのmetaタグを見直し、最適化を進めてください。
SEO対策の基本については、以下の記事で詳しく紹介しています。
WRITER
フリースクエア SEO・AIO編集部
SEO歴17年以上。3,000以上のSEOキーワードを対象に、競合分析・検索意図分析・コンテンツ設計・順位改善を支援。
金融業界や流通系のプライム上場企業、国内有数の広告代理店に加え、SEO事業を展開する企業へのコンサルティングも担当。SEO・AIO対策の実務と最新アルゴリズムの検証をもとに、実践的な知見を発信している。
metaタグの書き方は？SEOに効く設定方法を一覧で解説
この記事が気に入ったら
いいね!しよう
