メタタグとは？SEO効果を高める書き方と主要タグを完全解説

「メタタグって何？」「SEO対策で重要って聞いたけど、どう使えばいいの？」と疑問に思っていませんか？

メタタグは、Webページの情報を検索エンジンやブラウザに伝えるために、HTMLファイルの中に記述する特別なタグのことです。ページには表示されませんが、検索結果での表示やSNSでのシェア時など、様々な場面で活躍しているんです。

この記事では、メタタグの基本から主要なタグの種類、SEOに効果的な書き方まで、分かりやすく解説していきます。

メタタグとは
メタタグの基本的な書き方
1. 基本の構文
2. 記述場所
主要なメタタグの種類
OGP（Open Graph Protocol）タグ
SEO対策で重要なメタタグ
1. 直接的にSEO効果があるタグ
2. 間接的にSEO効果があるタグ
メタタグ設定のベストプラクティス
よくある間違いと注意点
メタタグの確認方法
WordPress等のCMSでの設定方法
1. WordPressの場合
2. 手動で設定する場合
まとめ：メタタグでSEOとユーザー体験を向上
1. 必須のメタタグまとめ
2. 設定のポイント

メタタグとは

メタタグの基本

メタタグとは、HTMLファイルのタグ内に記述する、ページの情報を定義するタグのことです。

「meta」は「~について」という意味のギリシャ語由来の言葉で、メタタグはWebページについての情報（メタ情報）を記述するものなんですね。

メタタグの役割

メタタグは主に以下のような役割を果たします。

検索エンジンへの情報提供
GoogleやYahoo!などの検索エンジンに、ページの内容や重要なキーワードを伝えます。

ブラウザへの指示
文字コードの指定や、モバイル端末での表示方法などをブラウザに伝えます。

SNSでの表示設定
TwitterやFacebookでシェアされたときに、どのように表示されるかを制御します。

表示されないけど重要

メタタグはページ上には表示されませんが、検索結果に表示されたり、SNSでシェアされたときの見た目を決めたりと、ユーザーがサイトにたどり着く前の段階で重要な働きをしています。

メタタグの基本的な書き方

メタタグは、HTMLファイルのセクション内に記述します。

基本の構文

<meta 属性名="値">

メタタグは通常、閉じタグ（）を必要としません。1つのタグで完結します。

記述場所

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="ページの説明文">
  <meta name="keywords" content="キーワード1, キーワード2">
  <title>ページタイトル</title>
</head>
<body>
  <!-- ページの内容 -->
</body>
</html>

との間に、複数のメタタグを記述できます。

主要なメタタグの種類

Webサイト制作でよく使われる重要なメタタグを紹介します。

charset（文字エンコーディング）

文字化けを防ぐために必須のタグです。

<meta charset="UTF-8">

日本語サイトの場合、ほぼ100%「UTF-8」を指定します。これを記述しないと、日本語が正しく表示されない可能性があります。

タグ内の最初の方に記述するのが一般的です。

viewport（表示領域の設定）

スマートフォンやタブレットで正しく表示するために必要なタグです。

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

これを記述すると、モバイル端末でもパソコンと同じように快適に閲覧できます。レスポンシブデザインのサイトでは必須です。

各属性の意味：

width=device-width：横幅を端末の画面幅に合わせる
initial-scale=1.0：初期表示倍率を100%にする

description（ページの説明文）

検索結果に表示される説明文を指定するタグです。

<meta name="description" content="この記事では、メタタグの基本から主要なタグの種類、SEOに効果的な書き方まで分かりやすく解説します。">

Googleの検索結果で、タイトルの下に表示される文章がこのdescriptionです。

書き方のポイント：

文字数は120文字程度が目安
ページ内容を簡潔に説明する
自然な文章で書く
重要なキーワードを含める
ページごとに異なる説明文を設定する

keywords（キーワード）

ページに関連するキーワードを指定するタグです。

<meta name="keywords" content="メタタグ, SEO, HTML, Webサイト">

ただし、現在のGoogleはこのタグをランキング要因として使用していません。記述しても害はありませんが、SEO効果は期待できないと考えられています。

robots（検索エンジンへの指示）

検索エンジンにページをどう扱うか指示するタグです。

<meta name="robots" content="index, follow">

主な値：

index：このページを検索結果に表示してもいい
noindex：このページを検索結果に表示しないでほしい
follow：このページ内のリンクをたどってもいい
nofollow：このページ内のリンクをたどらないでほしい

通常は何も記述しなければ「index, follow」として扱われます。会員専用ページなど、検索結果に表示させたくないページで使います。

OGP（Open Graph Protocol）タグ

SNSでシェアされたときの見た目を制御する重要なタグです。

OGPとは

FacebookやTwitterなどでURLがシェアされたとき、タイトル・説明文・画像などを表示するための規格です。

OGPを設定しないと、SNSでシェアされたときに適切な情報が表示されず、クリック率が下がってしまいます。

基本的なOGPタグ

<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="サイト名">

各タグの意味：

og:title：SNSでシェアされたときのタイトル
og:description：SNSでシェアされたときの説明文
og:image：SNSでシェアされたときに表示される画像のURL
og:url：ページの正規URL
og:type：コンテンツの種類（article、website など）
og:site_name：サイト全体の名前

Twitter専用タグ

Twitterでは、独自のメタタグも使えます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="記事のタイトル">
<meta name="twitter:description" content="記事の説明文">
<meta name="twitter:image" content="https://example.com/image.jpg">

twitter:cardの主な値：

summary：小さい画像付きカード
summary_large_image：大きい画像付きカード

大きい画像の方が目立つので、summary_large_imageの使用が一般的です。

SEO対策で重要なメタタグ

検索順位に影響するメタタグについて解説します。

直接的にSEO効果があるタグ

実は、メタタグで直接SEO効果があるものは限られています。

titleタグ（厳密にはメタタグではありませんが）

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

検索順位に最も影響する重要なタグです。30文字程度で、分かりやすいタイトルを付けましょう。

meta description
検索順位には直接影響しませんが、クリック率に大きく影響します。魅力的な説明文を書くことで、検索結果からの流入を増やせます。

間接的にSEO効果があるタグ

viewportタグ
モバイルフレンドリーなサイトはGoogleから高く評価されます。viewportタグを正しく設定することで、モバイルでの評価が上がります。

canonical（カノニカル）タグ

<link rel="canonical" href="https://example.com/page.html">

重複コンテンツを避けるために、正規のURLを検索エンジンに伝えるタグです。

例えば、以下のURLがすべて同じ内容を表示する場合：

https://example.com/page
https://example.com/page/
https://example.com/page?utm_source=twitter

canonicalタグで正規URLを指定することで、検索エンジンの評価が分散するのを防げます。

メタタグ設定のベストプラクティス

効果的にメタタグを活用するためのポイントです。

ページごとに異なる内容を設定

特にtitleとdescriptionは、ページごとに内容を変えましょう。

同じ説明文を使い回すと、検索エンジンから重複コンテンツとみなされる可能性があります。

適切な文字数を守る

titleタグ：30文字前後
長すぎると、検索結果で途中で切れてしまいます。

descriptionタグ：120文字前後
パソコンの検索結果では120文字程度、スマートフォンでは50〜80文字程度が表示されます。

キーワードを自然に含める

titleやdescriptionには、ページの内容を表す重要なキーワードを含めましょう。

ただし、キーワードを詰め込みすぎると不自然になり、逆効果です。あくまでも読みやすい自然な文章を心がけてください。

OGP画像のサイズに注意

SNSでシェアされたときの画像は、推奨サイズがあります。

Facebookの推奨サイズ：

1200 × 630ピクセル

Twitterの推奨サイズ：

1200 × 628ピクセル（summary_large_image）
120 × 120ピクセル以上（summary）

画像が小さすぎると、ぼやけて表示されてしまいます。

よくある間違いと注意点

メタタグ設定でやってしまいがちな失敗例です。

同じdescriptionをすべてのページに使う

ページごとに異なる説明文を設定しましょう。テンプレートをコピーしただけで、descriptionを変更し忘れるケースがよくあります。

keywordsタグにキーワードを詰め込む

前述の通り、keywordsタグはSEO効果がありません。無理に設定する必要はありませんし、設定する場合も5個程度に抑えましょう。

OGP画像のパスが間違っている

OGP画像は絶対URL（https://から始まるフルパス）で指定する必要があります。

相対パス（/images/photo.jpgなど）では正しく表示されません。

charsetタグの位置が遅い

charsetタグは内のできるだけ早い位置に記述しましょう。

遅い位置にあると、それより前に日本語が含まれている場合、文字化けする可能性があります。

メタタグの確認方法

設定したメタタグが正しく機能しているか確認する方法です。

ブラウザの開発者ツール

ページ上で右クリック
「検証」または「要素を検証」を選択
タグ内を確認

メタタグが正しく記述されているか、直接HTMLを確認できます。

Google検索結果

実際にGoogleで検索して、自分のサイトがどう表示されるか確認しましょう。

titleとdescriptionが意図通りに表示されているかチェックしてください。

OGPの確認ツール

Facebook シェアデバッガー
https://developers.facebook.com/tools/debug/

URLを入力すると、Facebookでシェアされたときの表示を確認できます。

Twitter Card Validator
https://cards-dev.twitter.com/validator

Twitterでシェアされたときの表示を確認できます。

WordPress等のCMSでの設定方法

WordPressなどのCMSを使っている場合、プラグインで簡単に設定できます。

WordPressの場合

Yoast SEOやAll in One SEOなどのプラグインを使えば、管理画面から簡単にメタタグを設定できます。

記事編集画面に、titleやdescriptionを入力する欄が表示されるので、HTMLを直接編集する必要はありません。

手動で設定する場合

テーマのheader.phpファイルのタグ内に、メタタグを記述します。

ただし、テーマのアップデート時に上書きされる可能性があるので、プラグインの使用が推奨されます。

まとめ：メタタグでSEOとユーザー体験を向上

メタタグは、検索エンジンやSNSとの橋渡しをする重要な要素です。

必須のメタタグまとめ

すべてのページに必要：

<meta charset="UTF-8">：文字コード指定
<meta name="viewport" content="width=device-width, initial-scale=1.0">：モバイル対応
<meta name="description" content="ページの説明">：検索結果の説明文
<title>ページタイトル</title>：検索結果のタイトル

SNS対策に必要：

<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="画像URL">
<meta name="twitter:card" content="summary_large_image">

設定のポイント

ページごとに異なる内容を設定する
適切な文字数を守る（title:30文字、description:120文字）
キーワードは自然に含める
OGP画像は推奨サイズで用意する
定期的に検索結果やSNSでの表示を確認する

メタタグを適切に設定することで、検索順位の向上やSNSからの流入増加が期待できます。この記事を参考に、自分のサイトのメタタグを見直してみてくださいね！