SEO 公開日: 2023.04.27 更新日: 2024.03.26

metaタグ（メタタグ）とは？SEOに効果的な書き方・設定方法を解説

metaタグ（メタタグ）とは、Webサイトの情報を示すためのタグのことです。metaタグは、SEOにおいて検索順位に影響を与える重要な要素と考えられています。

metaタグを誤って設定してしまうと、SEOや検索順位に悪影響を与えてしまうこともあります。

本記事では、metaタグの正しい書き方・設定方法を解説します。metaタグのSEO効果やSEOにおいて重要なmetaタグの種類も紹介します。ぜひ参考にしてください。

metaタグとは？

metaタグとは、Webサイトの情報を記載するタグのことです。metaタグは、メタ要素やメタデータ、メタ情報などと呼ばれることもあります。また、metaタグは、meta要素の総称（meta description, noindex , nofollowなど）として、その名前が使われています。

metaタグを使用すれば、Webページのタイトルやキーワード、全体説明、著者、言語などを定義できます。これにより、検索エンジンはWebページの内容を正確に理解し、適切な情報を検索結果に表示できます。また、ブラウザはWebページを適切に表示するために必要な情報を取得しやすくなります。

そのため、metaタグを記述することで検索エンジンに、サイトの全体的なテーマや記載されている情報などを明確に伝えられます。

metaタグのSEO効果とは？

metaタグは、正しく設置することでSEOに良い効果を与えることができます。metaタグを正しい方法で設定することで、ページのコンテンツ情報がクローラーに正しく伝わり、Googleから評価されやすくなります。その結果、クローラビリティ向上やインデックス促進、検索順位上昇が期待できます。

しかし、逆に不適切な方法でmetaタグを設置してしまうと評価されづらくなったり、インデックスされなかったりすることもあります。
たとえば、meta descriptionを設定しない場合は、Googleが自動的にページの内容から説明文を生成するため、自分たちが掲示したいな説明文が表示されない可能性があります。（ただし、descriptionは適切に設定しても無視される場合があります。）

metaタグを正しく設定することでSEOに良い影響を与えることができますが、誤った設定をすると、逆にSEOに悪影響を与える可能性があるため、注意が必要です。

SEOに効果的なmetaタグの設定方法

metaタグを設定する方法は、主に2種類の方法があります。

HTMLに直接設置する場合

HTMLファイルを作成している場合は、headタグの中にmetaタグを記述することで、簡単に設置できます。metaタグを記述するときは、meta要素を指定したうえで、属性や属性値をマークアップしていきます。

meta要素の属性と属性値の種類に合わせて適宜content属性を付与しながら記述していくことが、metaタグの基本的な設定方法となります。HTMLに慣れない方は、少し難しいと感じるかもしれませんが、次の記述を参考に自社のmetaタグ情報を設定してみてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="ページの説明文を記述">
  <meta name="keywords" content="検索で上位にしたいキーワード1, 検索で上位にしたいキーワード2, 検索で上位にしたいキーワード3">
  <title>ページタイトルを記述</title>
</head>
<body>
  ページの本文を記述
</body>
</html>

【補足情報】
charset属性: 文字エンコーディングを指定するmetaタグ
description属性: ページの説明文を指定するmetaタグ
keywords属性: ページのキーワードを指定するmetaタグ

それぞれ、metaタグのname属性を指定して、属性値に該当する内容を記述します。
また、titleタグを使用してページのタイトルを設定することもできます。なお、metaタグはタグ内に設置する必要があります。

WordPressで管理画面から設定する場合

WordPressでサイトを作成している場合、metaタグの種類によってはWordPressの管理画面から設定することができます。

ただし、WordPressテーマによっては、meta設定ができないテーマもあります。その場合には、専用のプラグインが必要です。たとえば、「All in One SEO」や「Yoast SEO」などのプラグインを利用すれば、記事別にdescriptionやrobots、keywordなどのmeta設定ができます。記述したmetaタグは、自動的にheadタグにマークアップされます。

SEOにおいて重要なmetaタグの種類

SEOにおいて重要とされているmetaタグが複数ありますので、ご紹介します。

titleタグ（タイトルタグ）

titleタグとは、サイトやページにタイトル（題名）をつけるためのタグです。
titleタグの内容は、検索結果上で一番大きく表示されます。そのため、ユーザーの目に止まりやすく、ページの内容を端的に表わしているものとして、ユーザーが検索結果上でどのページにアクセスするかを決める時にtitleタグの内容は重要な判断基準となります。

また、検索エンジンにとってもtitleタグは重要とされ、検索順位を決める上での判断要素となっています。titleタグは、内に記述します。

次のようにページタイトルを～というタグで囲むことで、その内容がページタイトルであることを示せます。

<title>ページタイトルを記述</title>

meta description（メタディスクリプション）

meta descriptionは、SEOに直接の影響を与えないとGoogleが発表していますが、検索結果画面などで使われることもあるため、できるだけ設定しておくのが望ましいでしょう。

meta descriptionとは、Webページの概要を説明するHTMLタグの1つです。Webページのタイトルとともに検索エンジンの検索結果に表示され、ユーザーが該当ページにアクセスする前に、そのページの内容や関連性を把握するのに役立ちます。

これにより、ユーザーが検索結果を見て、該当ページが自分の求めている情報に関連しているかどうかを判断できるようになるため、表示の仕方によってはページのクリック率に影響を与えます。

【meta description記述例】
metaとは、どのようなタグなのか、SEOへの影響や具体的な記述方法をご説明します。集客率を上げる記述のポイントを解説するので、ぜひ参考にしてください。

このように、ユーザーの抱える問題を解決できるような記述の仕方がおすすめです。

meta descriptionは、PCの場合120文字ほど、スマートフォンの場合60文字ほどが実際の検索結果画面に表示されます。
Googleは、meta descriptionの文字数には言及していませんが、デバイスごとに表示される文字数は異なるため、どのデバイスのユーザーをターゲットとするのかによっても考え方は変わります。

PCでもスマートフォンでも伝わりやすいようにするには、最初の60文字以内にページ概要を説明する文章を入れるようにして、後半部分に補足説明を入れると、どちらのデバイスで表示されても、伝えたい内容を表示することができます。

viewportタグ（ビューポートタグ）

viewportタグとは、Webページ上で表示されるコンテンツの表示領域を設定するためのHTMLのmetaタグのことです。ユーザーの使用デバイスは、PCや携帯、タブレットと多種多様です。そのため、画面サイズが異なるデバイスごとに表示領域を設定する必要があります。

viewportタグを使用することで、Webページがモバイルデバイスの画面に最適化され、読みやすくなります。下記のタグは、画面の幅をデバイスの幅に合わせ、拡大率を初期状態（1倍）に設定します。

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

このように設定することで、モバイルデバイスでの閲覧時にWebページが自動的に最適化され、拡大縮小が必要なくなります。特に、レスポンシブデザインにおいて表示崩れを解消するための、欠かせないタグ設定となります。

モバイルフレンドリーなサイトはGoogleに評価されやすくなるため、必要に応じてタグの設定の仕方を覚えていきましょう。

▼参考記事
モバイルフレンドリーとは？Googleの考えと対応方法を知り、SEOに活かそう！
[テンプレあり]レスポンシブ対応は必須条件!?実装方法・ポイントまで徹底解説

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

文字コードとは、Webページの文字化けを防ぐタグのことです。Webページにおいては、HTMLやCSSなどのコードによって、文字を表現するための文字コードが指定されています。

文字コードが正しく指定されていない場合、言語が混ざりあってしまい文字化けが発生する可能性があります。文字化けが起こる原因は、Webページを閲覧するブラウザやコンピュータの設定によって、文字コードが異なる場合があるためです。

文字化けするとクローラーが正しく情報を読み取ることができずSEOに悪影響を与えてしまいます。基本的に、下記のように全言語共通で利用するUTF-8で記述していれば、文字化けを起こしづらいです。

<META http-equiv="Content-Type" content="text/html; charset=utf-8" />

OGPタグ

OGPタグとは、SNSでシェアしたときに、タイトルや説明文、画像などを正しく表示するために使用されるコンテンツレイアウトを調整するタグのことです。OGPタグは、SEOに直接影響を与えるわけではありませんが、ユーザーの拡散シェアなどにより被リンクやサイテーション獲得につながるため、設定しておくことで間接的な効果が期待できます。

次のように、OGPタグを正しく設定することでURLやアイキャッチ画像、タイトルを最適化できます。

<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:type" content="Webページの種類">
<meta property="og:url" content="WebページのURL">

noindexタグ・nofollowタグ

noindexタグとは、検索エンジンに対して特定のWebページをインデックス化しないよう指示するHTMLのmetaタグです。これは、Webサイト所有者が、特定のページを検索エンジンのインデックスから除外したい場合に使用されます。たとえば、低品質ページをインデックスさせたくなければ、下記のようなタグをに記述することで、サイト全体の品質向上につながります。

<meta name="robots" content="noindex">

nofollowタグとは、ページ内のリンクを辿らせずリンク先にページの評価を渡さないためのタグのことです。下記のようにnofollowタグがある場合、そのリンクがあるページにリンクされた別のページへページ評価に関する情報が渡されなくなります。

<a href="自社URL" rel="nofollow">Example</a>

また、meta要素のname属性で「robots」の属性値を指定して、content属性で「noindex」と「nofollow」の属性値を同時に記述することもできます。

<meta name="robots" content="noindex, nofollow">

▼参考記事
noindex、nofollowとは？使い方を理解してSEOを強化しよう！noarchiveやrobot.txtについてもご紹介

metaタグの確認方法

meraタグを確認する方法として、「HTMLのソースで確認する方法」と「Google Chromeの拡張機能で確認する」の2種類があります。それぞれの方法についてみてきましょう。

HTMLのソースで確認する方法

metaタグは、Webサイト上に見える形で表示されるものではありません。そのため、metaタグが正しく設定されているかを確認する場合は、次の手順で確認できます。

ステップ1：見たいページを開く
ステップ2：右クリックで「ページのソースを表示」を開く
ステップ3：HTMLコードの＜meta　○○＞で確認

実際に、弊社のサイトでmetaタグを見つけてみます。このように、「meta」でページ内検索をすることで、そのサイトのmeta情報を簡単にチェックできます。

Google Chromeの拡張機能で確認する方法

Google Chromeをブラウザとして使用している場合、拡張機能「META SEO Inspector」を追加することで、簡単にmetaタグを確認することができます。

META SEO Inspectorでは、主に以下の要素を確認することができます。

タイトルタグ
メタディスクリプション
メタキーワード
hタグ
canonical属性
構造化データ

また画像にalt属性が設定されていない・OGPが適切に設定されていないといった問題をエラーとして発見することができます。なお、META SEO InspectorはChromeのウェブストアからインストールすることですぐに利用可能です。

metaタグを使用する際の注意点

metaタグはSEOに影響を与える重要なものですが、次のように使用時に注意すべき点があります。

meta keywordsの設定は不必要

meta keywordsとは、そのページがどのようなキーワードと関連しているのかを示すタグのことです。meta keywordsは、過去に検索エンジンのランキングに影響を与える要素でしたが、キーワードスタッフィングなどで悪用されることが多く、現在ではGoogleがサポートしているmetaタグから外れています。

わざわざmeta keywordsを設定せずとも、Googleはtitleやページ内容から重要キーワードを判別できるようになっているため、設定の必要がありません。

キーワードを羅列しない

もし仮にmeta keywordsタグを設定する場合は、キーワードを羅列するのは避けるべきです。なぜなら、自然な文章ではなくキーワードを詰め込む行為は、Googleからペナルティ行為としてみなされているためです。

またキーワードを詰め込みすぎると、ユーザーに読みにくさや違和感を与えてしまい、ユーザビリティを損ねる原因となります。ユーザーファーストを重要視するGoogleの理念とは異なるため、SEOにマイナス影響を与えかねません。

設定場所に注意する

HTMLファイルに直接メタタグを書く際には、設定場所に注意が必要です。HTMLは「head部分」と「body部分」に分かれており、検索エンジンに伝えるためにはhead部分に書き込む必要があります。

まとめ

metaタグとは、HTML文書内に記述されるタグの一つで、Webサイトのメタデータ（情報）を定義するために使用されます。metaタグには、Webページの説明文やキーワード、文字コード、作者、作成日時、最終更新日時など、Webページに関する情報を記述できます。

metaタグは、正しく設定すれば、SEO効果が期待できます。注意点に留意してGoogleのガイドラインに従って記述していきましょう。

株式会社ヒトノテでは、正しいmetaタグの設定をはじめ、SEOの効果を最大限に高めるためのSEOコンサルティングに関する支援を行っています。SEOに困っている・何の施策を打つべきかわからないといった課題を抱えている企業様はぜひご相談ください。

執筆者：山本卓真

株式会社ヒトノテのSEOコンサルタント。中小企業から大企業まで様々な規模、業種のサイトのSEOに携わる。WEBマーケティングの広い知見と経験をもとにクライアントと伴走することが得意です。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。