ウェブサイトを運営していると、「メタタグを設定してください」と制作会社から言われることがあります。でも、そもそもメタタグって何のこと?どんな意味があるの?と疑問に思う方は少なくありません。
この記事では、メタタグの基本的な意味から、SEOとの関係、具体的な種類と役割まで、Web制作をプロに任せている方にも理解しやすいように丁寧に解説します。
メタタグとは何か
メタタグとは、ウェブページの「情報カード」のようなものです。ページを開いたときに画面には表示されませんが、HTMLの中に書き込まれていて、検索エンジンやブラウザに対してそのページの内容・特性・設定を伝える役割を持ちます。
本で言えば、表紙や裏表紙のようなイメージです。本の内容はページをめくって読むものですが、カバーには「タイトル」「あらすじ」「著者情報」が書かれていて、手に取る人の判断を助けます。メタタグもそれと同じで、ページ本文とは別のところで、機械(検索エンジン)が理解しやすい形で情報を提供しています。
メタタグはどこに書かれているか
メタタグはHTMLの <head> タグの中に記述されます。ユーザーがブラウザで見ているコンテンツエリアは <body> タグの中にありますが、メタタグはその前の <head> に書かれているため、画面には表示されません。
「自分のサイトにメタタグがあるかどうか確認したい」という場合、ブラウザ上で右クリックして「ページのソースを表示」を選ぶと確認できます。<head> から </head> までの間に <meta と書かれた行があれば、それがメタタグです。
メタタグとSEOの関係
「メタタグをしっかり設定するとSEOに有利になる」という話を聞いたことがある方も多いと思います。ただ、これは少し正確ではありません。
Googleは公式に「メタタグが直接的に検索順位を上げる効果はない」としています。つまり、メタタグを丁寧に設定したからといって、それだけで検索結果の上位に表示されるわけではありません。
ただし、間接的にSEO成果に影響する部分は大きいです。以下の2点が特に重要です。
クリック率(CTR)への影響
検索結果に表示されるページタイトルや説明文は、メタタグの内容をもとに作られています。魅力的なタイトルと説明文が設定されていれば、同じ順位でもクリックされやすくなります。クリック率が上がれば、結果としてSEOの評価にも良い影響が出てくることがあります。
クローラーへのコントロール
「このページはインデックスしないでください」「このリンクをたどらないでください」というような指示もメタタグで伝えることができます。これにより、検索エンジンのクローラーの動きをコントロールでき、サイト全体のSEO戦略を整えやすくなります。
重要なメタタグの種類と役割
メタタグにはいくつかの種類があります。それぞれの役割を順番に見ていきましょう。
titleタグ(タイトルタグ)
厳密にはメタタグとは区別されることもありますが、SEOを語る上でセットで扱われることが多いです。ページのタイトルを定義するタグで、ブラウザのタブや検索結果のリンク部分に表示されます。
適切な文字数は30〜35文字程度が目安です。長すぎると検索結果で途中で切れてしまうため、伝えたい情報は前半に込めるのがポイントです。
このタグはSEOの中でも重要度が高く、対策したいキーワードを含めることが基本となります。
meta descriptionタグ(メタディスクリプション)
検索結果でタイトルの下に表示される説明文のことです。「スニペット」と呼ばれることもあります。
このタグの内容は、ユーザーがクリックするかどうかを判断するための材料になります。100〜120文字程度で、ページの内容を端的に・魅力的に伝えることがポイントです。
ただし、Googleが独自に判断してmeta descriptionの内容ではなく、ページ本文から適切と判断した部分を抜き出して表示することもあります。それでも設定しておくことで、検索エンジンへの「意図の伝達」という意味で効果があります。
charsetタグ(文字コード)
ページの文字コードを指定するタグです。「文字コードって何?」と思われるかもしれませんが、簡単に言うと「文字の種類やルールを定めた規格」のことです。
現在のウェブでは UTF-8 という文字コードが標準となっており、日本語を含む多くの言語に対応しています。これが正しく設定されていないと、ページの文字が文字化けして正しく表示されないことがあります。
多くの場合、制作時に自動で設定されるため、担当者が意識して変更することは少ないですが、役割として知っておくと良いでしょう。
viewportタグ(ビューポート)
スマートフォンやタブレットなど、さまざまな画面サイズに対してページをどのように表示するかを指定するタグです。
スマートフォンでサイトを開いたとき、文字が小さすぎて読めなかったり、横にスクロールしないといけなかったりする経験はありませんか?それはビューポートの設定が適切でない場合に起きることがあります。
現在では <meta name="viewport" content="width=device-width, initial-scale=1"> という設定が標準で使われており、スマートフォン対応(モバイルフレンドリー)の基本的な設定のひとつです。Googleもモバイル対応をSEO評価の基準にしているため、モバイルフレンドリーの観点でも重要なタグです。
OGPタグ(Open Graph Protocol)
FacebookやX(旧Twitter)などのSNSでページのURLをシェアしたとき、タイトル・画像・説明文をカード形式で表示させるための設定です。
OGPを正しく設定しておくと、SNSでシェアされたときに見栄えが良くなり、クリックされやすくなります。逆に設定していないと、シェア時に画像が表示されなかったり、タイトルがおかしく表示されたりすることがあります。
SNSでの情報拡散を意識するなら、OGPタグの設定はぜひ確認しておきたい部分です。
noindex・nofollowタグ(robotsメタタグ)
検索エンジンに対して「このページをインデックスしないでください」「このリンクをたどらないでください」という指示を出すためのタグです。
noindex を設定すると、そのページは検索結果に表示されなくなります。「社内向けのページ」「テスト用のページ」「内容が重複しているページ」など、検索結果に出てこなくていいページに設定します。
nofollow を設定すると、そのページ内のリンクをたどってほしくないときに使います。スパムに近い外部リンクが多いページなどに設定することがあります。
意図せずnoindexが設定されていると、検索結果に表示されなくなってしまいます。「サイトをリニューアルしたら検索から来る人が急に減った」というケースでは、noindexが誤って設定されていることが原因のひとつとして疑われます。
メタタグの確認方法
自分のサイトのメタタグが正しく設定されているか確認したい場合、以下の2つの方法があります。
HTMLソースで直接確認する
ブラウザでサイトを開き、右クリックして「ページのソースを表示」を選択します。<head> から </head> の間に、<meta で始まる行が複数あれば、それがメタタグです。各タグの内容(content属性の値)を読むことで設定を確認できます。
Chrome拡張機能やSEOツールで確認する
Google Chromeの拡張機能(例:「META SEO inspector」など)を使うと、メタタグの内容を視覚的にわかりやすく確認できます。また、Google Search Consoleを使えば、インデックス状況やnoindexが意図せず設定されていないかなども確認できます。
制作会社に任せている場合でも、定期的に確認できるとベストです。「設定しているつもりが実は空白だった」というケースは意外と多く、ツールを使った定期チェックの習慣があると安心です。
メタタグの設定方法
実際にメタタグを設定・変更する方法は大きく2つあります。
WordPressのプラグインを使う
WordPressでサイトを作っている場合、プラグインを使うことでプログラミング知識なしにメタタグを設定できます。代表的なプラグインとして「All in One SEO」や「Yoast SEO」があります。
これらのプラグインを使うと、各ページの編集画面にSEO設定のエリアが追加され、そこにタイトルやdescriptionを入力するだけで設定できます。担当者が自分で更新できるようになるため、制作会社に都度依頼する手間が省けます。
HTMLを直接編集する
ホームページ制作会社がHTMLを直接管理している場合、担当者に依頼してメタタグを更新してもらう形になります。
「ページを追加したときにmeta descriptionを設定してほしい」「タイトルを変更したい」という場合は、制作会社に依頼しましょう。変更履歴や設定内容は都度共有してもらえると理想的です。
メタタグ設定で気をつけたいこと
キーワードを詰め込みすぎない
SEO対策をしようとするあまり、タイトルや説明文に無理やりキーワードをたくさん詰め込むのは逆効果です。Googleはキーワードの過剰な詰め込みをスパムとみなすことがあり、評価が下がる可能性があります。
自然な文章の中で、対策キーワードが含まれている状態がベストです。
metakeywordsタグは設定不要
以前は「meta keywords(メタキーワード)」というタグに、ページに関連するキーワードを列挙することが一般的でした。しかしGoogleは現在、このタグを一切評価していないと明言しています。
設定しても意味はないですし、競合サイトにキーワード戦略を見せてしまうリスクもあります。現在では設定不要と理解しておいてください。
各ページで重複させない
同じサイト内で複数のページに同じタイトルやdescriptionを設定してしまうことがあります。検索エンジンはページごとに別々のものとして認識したいため、重複した設定はなるべく避けることをおすすめします。
ページ数が多いサイトでは管理が大変ですが、少なくとも重要なページ(トップページ・サービスページ・ブログ記事など)は個別に設定できているとベストです。
OGPタグは画像サイズに注意する
OGPで設定する画像のサイズや比率が適切でないと、SNSでシェアされたときに画像が見切れたり、表示されないことがあります。各SNSが推奨するサイズ(例:1200×630ピクセルなど)に合わせて設定しましょう。
まとめ
メタタグとは、ウェブページの情報を検索エンジンやブラウザに伝えるHTMLの設定です。画面には表示されませんが、検索結果への見え方・クリック率・クローラーの動き・SNSでのシェア時の表示など、さまざまな面でサイトの成果に影響します。
直接的に検索順位を上げる魔法のタグではありませんが、適切に設定されていないと機会損失につながる重要な要素です。制作会社に依頼している場合でも、以下のポイントは意識しておくとよいでしょう。
- titleタグとmeta descriptionは各ページで個別に設定されているか
- noindexが意図せず設定されていないか
- OGPタグが設定されSNSシェア時に画像が表示されるか
- WordPressの場合、SEOプラグインが導入されているか
「言われたままにしている」状態から、少しでも仕組みを理解した上で制作会社とコミュニケーションが取れるようになると、ウェブサイトの改善がスムーズに進みます。気になる点があれば、ぜひ担当者に確認してみてください。