メタタグとは?見方・書き方・SEO対策に効果的な設定をわかりやすく解説

メタタグの基礎知識を解説

更新日:

SEO対策でお悩みの方へ

無料で資料をダウンロードいただけます!SEO対策に役立つノウハウや具体的な施策、最新の成功事例をまとめた3つの資料をご用意しました。これからSEOに取り組む方にも、すでに実践中の方にもお役立ていただける内容です。

 資料を無料でダウンロード

ドメイン診断レポートをご希望の方へ

無料でドメイン診断レポートをダウンロードいただけます!あなたのドメインの強みや改善点を明確にするための詳細な分析レポートをご用意しました。初心者から上級者まで、幅広い方に役立つ内容です。

ドメイン診断レポートを無料でダウンロード

要約:

  • メタタグは、ウェブページの情報を検索エンジンSNSへ正しく伝えるために使うHTMLタグ。
  • タイトルや説明文、OGPなどを適切に設定することで、検索結果の表示やクリック率向上が期待できる。
  • キーワードの詰め込みや不自然な設定は避け、他のSEO対策とあわせて運用すると効果的。

メタタグとは

メタタグ(metaタグ)は、HTMLファイルの<head>内に記述することで、ウェブページの内容や特性を検索エンジンやブラウザ、SNSへ伝える役割を持つタグです。クローラーはページ内容を正しく理解し、検索結果やSNSでのシェア時に適切な情報が表示されます。

たとえば、タイトル(titleタグ)、ディスクリプション(descriptionタグ)、キーワード(keywordsタグ)などの情報をメタタグとして記述することで、検索エンジンがページをスムーズにインデックスできるようになり、ユーザーにも必要な情報がわかりやすく伝わりやすくなります。また、OGPタグを用いると、SNSでシェアされた際にページのタイトル・説明文・画像を正しく表示できます。

以下はmetaタグを用いたHTMLコードの一例です。

メタタグを使用する際は、そのページの内容に合ったキーワードを選び、ページの主旨が伝わる説明文を書きましょう。検索エンジンを通じてユーザーが自分に合った情報を得やすくなり、アクセス増加につながることが期待できます。

SEO対策でメタタグが重要である理由

メタタグは、内部SEO対策の一環として非常に重要な役割を果たします。ただし、キーワードを過剰に詰め込んだからといって必ず上位表示されるわけではありません。なぜメタタグ設定が重要なのか、その理由や仕組みを見ていきましょう。

検索エンジンに内容を正しく伝える

検索エンジンのクローラーは、ページを巡回してタイトルやディスクリプション、キーワードなどのメタ情報を取得し、インデックスに登録します。適切なメタタグがないと、検索エンジンに正しい情報が伝わらず、正当な評価を受けにくくなってしまいます。

クローラビリティやクローラー(GoogleBot)の仕組みを理解することで、メタタグ設定の重要性がより明確になります。

検索画面に表示されるようにする

正しくメタタグを設定すると、検索結果画面(SERP)でページ専用のタイトルや説明文が表示されやすくなります。ユーザーは訪問前にページ概要を把握でき、より適切なアクセスを行いやすくなります。

例:HTMLファイルの<head>内に記述する場合

上記の例では、<title>タグでページタイトルを指定し、<meta name="description">タグでページの要約を記述しています。これらは検索結果画面に表示されやすく、ユーザーがクリックするかどうかを判断する重要な手がかりとなります。なお、<title>タグはメタタグではありませんが、メタタグと密接に関わるため、合わせて解説されることが多いです。

こうしたテキスト情報は、自動的に検索結果画面やSNSでのシェア時に表示される基本情報となるため、ユーザーのニーズを意識した、わかりやすく魅力的な文面を考えて記載しましょう。たとえページコンテンツが優れていても、タイトルやディスクリプションが不鮮明・魅力不足であれば、ユーザーが興味を持たず、クリックされない可能性があります。その結果、アクセス増加のチャンスを逃してしまうこともあるのです。

適切かつ魅力的なメタタグやタイトルの設定は、SEO対策や集客アップを図るうえで欠かせないポイントといえます。

クローラーのインデックスを拒否できる

メタタグを活用すると、検索エンジンのクローラーが特定のページをインデックス(検索結果への表示)から除外したり、そのページ内のリンクをたどらないよう指示したりできます。クローリングの設定を行うことで、意図しないページが検索結果に出てしまうことを防ぎ、サイト内の重要なコンテンツへクローラーの注目を集めやすくなります。

たとえば、以下のようなメタタグを<head>内に記述すると、クローラーはこのページをインデックスしなくなります。

このタグがあるページは、検索結果に表示されません。また、内部リンクをたどらせたくない場合には、nofollow属性を追加します。

「noindex,nofollow」を組み合わせることで、そのページを検索結果から除外しつつ、内部リンクをクローラーが追わないように制御できます。こうした設定は、管理用のページや重複コンテンツ、表示したくない情報が含まれるページなどに有効です。

noindexやnofollowといったメタタグを上手に使うことで、クローラーがどのページを重視し、どのリンクを辿るべきかを明確に示し、サイトの評価や検索結果表示をコントロールしやすくなります。

メタタグの確認方法

ここでは、メタタグを実際に確認するための代表的な方法をご紹介します。ウェブページのHTMLソースコードを直接見る方法から、ブラウザの拡張機能を使った方法まで、環境に合わせて選んでみてください。

ブラウザでHTMLソースコードを確認する方法

まずは、パソコンのブラウザを使ってソースコードを確認する方法です。たとえば、Google Chromeの場合は以下のような手順で確認できます。

  1. メタタグを確認したいウェブページを開きます。
  2. ブラウザ上部のメニューから「表示」→「開発/デベロッパーツール」→「ページのソースを表示」もしくは「ソースの表示」を選択します。
  3. 表示されたソースコードの<head>タグ内にある<meta>タグを探してください。

この手順で、metaタグにどのようなdescription、keywords、OGPタグなどが書かれているか確認できます。

Android端末でのソースコード確認

Android端末では、アドレスバーに表示されているURLの前に「view-source:」を付けるだけで、そのページのソースコードを直接表示することができます。

この方法を使えば、パソコンを使わなくても、スマートフォン上で手軽にメタタグをチェックできます。

iPhoneでHTMLソースを確認する方法

iPhoneでは、Androidのように「view-source:」を付けても直接ソースコードは表示できません。そのため、別途アプリを利用する必要があります。

おすすめは「HTML Viewer Q」というアプリです。このアプリを使えば、iPhone上でHTMLソースコードを閲覧できるだけでなく、コード内の検索や、複数タブの管理など、PCに近い感覚で作業が可能になります。評価も高く、多くの実績があるので、メタタグを頻繁にチェックする方にとっては便利なツールといえます。

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

パソコンのChromeブラウザをお使いの場合は、拡張機能を活用することで、より簡単かつスピーディーにメタタグを確認できます。その代表例が「META SEO Inspector」という無料の拡張機能です。

インストール方法は以下のとおりです。

  1. Chromeウェブストアにアクセスし、「META SEO Inspector」を検索します。
  2. 「Chromeに追加」をクリックして拡張機能をインストールします。
  3. メタタグを確認したいウェブページを開いた状態で、ブラウザ上部に表示される拡張機能のアイコンをクリックします。

すると、そのページで使われているメタタグが一覧表示され、descriptionやkeywords、OGPタグ、Twitterカード情報などを簡単に確認できます。特定のメタタグをクリックすれば、さらに詳しい情報も見られるため、設定内容の不足や誤りに素早く気付くことができます。

この拡張機能を使うメリットは、複数ページをまとめて分析したい場合に効率が大幅に向上する点です。通常はページごとにソースコードを開いて探す手間がありますが、「META SEO Inspector」を使えば、ページを開いてアイコンをクリックするだけでメタタグを一括してチェックできるので、作業時間が短縮できます。

メタタグの種類

ここでは、代表的なメタタグの種類と、その役割や設定のポイントについて解説します。メタタグは、検索エンジンやSNS、ブラウザに対してページ情報を正しく伝えるために欠かせない要素です。目的や設定方法を理解することで、ユーザーに適切な情報を届け、ページの評価やクリック率向上につなげることができます。

メタディスクリプション(meta description)

メタディスクリプションは、ウェブページの概要や特徴、コンテンツのポイントを短い説明文として示すメタタグです。検索エンジンやソーシャルメディアがページ内容を解釈する際、このタグを参照してページの要約を表示します。これにより、ユーザーは検索結果やSNS上で、そのページがどのような情報を提供しているかを事前に把握できます。

なお、メタディスクリプションを長く書けば良いわけではありません。一般的には約160文字程度が適切と言われており、この範囲に収まる簡潔な説明文を心がけることが効果的です。

文字コード指定(meta charset)

meta charsetは、そのウェブページで使用する文字コードを指定するためのメタタグです。検索エンジンでのインデックス登録や、ソーシャルメディアでページがシェアされた際、文字コードが不適切に設定されていると、テキストが文字化けしてしまう可能性があります。文字化けが発生すると、ページ内容をユーザーや検索エンジンが正しく理解できず、閲覧性や評価に悪影響が及びます。

近年はUTF-8が標準的に用いられるようになりました。UTF-8は世界中の多言語に対応しており、日本語や英語など、幅広い言語圏のユーザーに正しく表示できるため、基本的にはUTF-8を指定することが推奨されています。

meta charsetで文字コードを正しく指定することは、ページ表示品質だけでなく、検索結果の精度やSNSでの適正な拡散にもつながる重要な要素といえます。

ビューポートタグ(viewportタグ)

ビューポートタグは、スマートフォンやタブレットなどのモバイル端末でウェブページを表示する際、画面サイズやレイアウトを調整するためのメタタグです。このタグを適切に設定することで、モバイル端末で表示した場合でもページが最適化され、ユーザーにとって見やすく操作しやすい環境が整います。

具体的な指定としては、width=device-widthで表示幅を端末の画面幅に合わせ、initial-scale=1.0で初期表示時の拡大率を100%(実寸)に設定することが一般的です。こうした設定によって、レスポンシブデザインがより確実に機能し、モバイルフレンドリーなページづくりに役立ちます。

OGPタグ

OGP(Open Graph Protocol)タグは、ウェブページがソーシャルメディアでシェアされた際に表示される情報を指定するメタタグです。当初はFacebookが提唱した規格ですが、現在ではTwitterやLinkedInなど、多くのSNSが対応しているため、ひとつの設定で複数のプラットフォームにわかりやすいプレビュー情報を提供できます。

代表的なOGPタグは以下の通りです。

  • og:title:ウェブページのタイトル
  • og:description:ウェブページの説明文
  • og:image:シェア時に表示される画像のURL

OGPタグを設定すると、シェア先のSNS上で魅力的なタイトルや説明文、適切な画像が表示され、ユーザーはページ内容を素早く理解できます。

OGPタグの記述例

上記の例では、og:titleでページタイトル、og:descriptionで説明文、og:imageでシェア時に表示する画像、og:urlでページのURL、og:typeでコンテンツ種別(この例では”website”)を指定しています。

また、Twitter用には「Twitterカード(TwitterCard)」という独自の規格があり、下記のようなタグを追加することで、Twitter上で要約カードや大きな画像表示が可能になります。

OGPタグの記述例

Twitterカードの記述例

twitter:cardでカードタイプ(summary_large_imageなど)を指定し、あとはtwitter:titletwitter:descriptiontwitter:imageでタイトル・説明文・画像を設定するだけで、Twitter上で見栄えの良い表示が可能になります。

ページの情報や具体的な内容を、SNS経由のユーザーにも効果的に伝えることができます。

robotsタグ

robotsタグは、クローラーに対して「このページをインデックス(検索結果に表示)するか」「リンクをたどるか」といった指示を与えるメタタグです。これにより、意図しないページの表示を防いだり、リンク構造の評価をコントロールしたりできます。

たとえば、管理画面や機密情報を含むページを「noindex」にすることで、検索結果から除外できます。逆にリンク先を認識させたい場合には「follow」を残し、検索結果には出さないけれど内部リンク構造を評価させる、といった柔軟な指定が可能です。

メタキーワード(meta keywords)

かつてはメタキーワードタグに適切なキーワードを設定することでSEO効果が期待されていましたが、現在では検索エンジンにほとんど評価されていません。むしろキーワードの過剰記述や無関連ワードの詰め込みはスパムとみなされ、逆効果となる可能性があります。

このタグを記述しても、実質的なSEO効果は期待できないと考えられているため、現在では特に必要なければ記載しないことが一般的です。重要なのはページ内容自体を充実させ、ユーザーや検索エンジンにとって有益な情報を提供することであり、メタキーワードに頼る時代は終わっています。

SEOに効果的なメタタグの書き方

メタタグは、HTMLファイルの<head>要素内に記述することで、検索エンジンやブラウザ、SNSにページ情報を正しく伝えることができます。ただし、ただ記述するだけでなく、適切なキーワード選定やディスクリプション(説明文)の最適化、モバイル向け表示を整えるビューポートタグの設定など、細かな工夫が求められます。
また、WordPressを使用している場合は、専用のプラグインを使うことで、メタタグ設定を簡略化できるなど、運用面でのメリットもあります。

ここでは、メタタグを設定する代表的な2つの方法を紹介します。1つ目はHTMLに直接記述する方法、2つ目はWordPressプラグインを活用する方法です。ウェブサイト制作や運用スタイルに合わせて、最適な方法を選んでみてください。

1.HTMLファイルに直接書き込む場合

もしHTMLファイルを自分で編集しているなら、メタタグは基本的に<head></head>タグ内に記述します。<head>要素は、ページタイトルやスタイルシート・スクリプトの読み込み、メタ情報の定義など、ページ全体に関する情報を記載する領域です。

以下はメタタグを記述するHTMLファイルの構造例です。

<body>要素内は、実際にユーザーに表示するコンテンツ部分であり、メタタグはクローラーやブラウザ用の情報なので、<body>内に記述しても効果がありません。必ず<head>部分に記述しましょう。
また、メタタグ内の属性名・値は基本的に大文字・小文字どちらでも機能しますが、一般的には小文字で統一することで可読性やメンテナンス性を高めることができます。

代表的なメタタグの例

ページタイトルを指定する場合(titleタグ)

ページの説明文を指定する場合(descriptionタグ)

キーワードを指定する場合(keywordsタグ)

文字コードを指定する場合(charsetタグ)

ロボット制御を指定する場合(robotsタグ)

WordPressのプラグインを利用する場合

WordPressサイトを運営しているなら、「Yoast SEO」や「All in One SEO Pack」といったプラグインを活用すると便利です。これらのプラグインをインストールすると、管理画面から簡単にメタタグを設定できるようになります。

プラグインの機能を使えば、各投稿や固定ページごとにdescriptionrobotskeywordsなどのメタ要素を個別に指定したり、OGP(Open Graph Protocol)タグの設定なども手軽に行えます。すべてWordPressが自動的に<head>タグ内にマークアップしてくれるため、わざわざFTPでファイルを編集する必要はありません。

さらに、プラグインによってはSEO効果を高めるための関連機能も搭載されているため、まとめて設定を行うことができます。これにより、HTMLコード編集に慣れていない人でもメタタグ管理が容易になり、サイト全体を効率的に最適化することが可能です。

メタタグ設置の際の注意点

メタタグはSEO対策で重要な役割を果たしますが、設置の方法を誤ると逆効果につながる恐れがあります。ここでは、メタタグを設置する際に注意すべき点を具体的に解説します。

メタタグの乱用は避ける

適切なキーワードの使用は検索エンジンでの評価向上に役立ちますが、過剰にキーワードを詰め込むとスパム行為とみなされる可能性があります。Googleは文脈や不自然な表現をチェックしており、titleタグやメタディスクリプション、見出しタグ(hタグ)などに不自然なキーワードを挿入する行為は、ペナルティの対象になる場合があります。

メタタグはページ内容に即した自然な文章であることが望ましく、複数のページで同じメタタグを使い回すことも避けましょう。同一メタタグを使い続けると、重複コンテンツと見なされ、検索エンジンやユーザーが混乱しやすくなります。メタタグが適切に使われているかどうか、常に点検することが大切です。

メタキーワードは使用しない

かつては、メタキーワードタグに重要なキーワードを記載することで検索順位が上がると考えられていました。しかし、現在ではほとんどの検索エンジンがメタキーワードを評価対象にしていません。むしろ、関連性のないキーワードの羅列はスパムと判断され、アルゴリズムによるペナルティを受ける可能性があります。

そのため、メタキーワードタグを使うことは、もはやSEO対策として効果的ではありません。むしろ無駄な労力となるうえ、ペナルティリスクを伴います。代わりに、コンテンツの品質向上や、キーワードを自然に含んだページタイトルやディスクリプション、画像のalt属性の適正化といった他の手段でSEO改善を図るほうが合理的です。

YouTubeのメタタグとは?

最後に、YouTubeにおけるメタタグについて触れておきます。

YouTube Studio上には、いわゆる「メタタグ」を直接設定する項目は存在せず、「タグ」を設定する項目のみが用意されています。これを「メタタグ」と混同する方もいるかもしれませんが、YouTubeでは一般的に「タグ」と呼ばれるものが、事実上メタタグとして機能している可能性があります。

ただし、視聴回数を増やすためにページ内容と無関係なタグを多用すると、YouTubeの規約に違反する可能性があるため注意が必要です。

ここでは、YouTube上のタグ設定方法や、設定したタグが実際どのように見えるかを確認する手順について解説します。

YouTubeのタグ設定方法

YouTubeのタグはYouTube Studioで設定できます。YouTube Studio画面の左側メニューから「詳細」をクリックすると、タグを入力できる欄が表示されます。人気のある動画に使用されているタグを参考にすれば、より効果的なタグを選びやすくなるでしょう。

YouTubeのタグ設定方法

YouTubeのタグ確認方法

YouTube動画のタグを確認するには、以下の2つの方法があります。

  • Chrome拡張機能「Tag for YouTube」の利用
    Chromeウェブストアで「Tag for YouTube」をインストール後、対象のYouTube動画ページを開いて動画の概要欄「もっと見る」をクリックします。ページを少しスクロールすると、青い文字でタグが表示され、使用されているタグを簡単に確認できます。

Chrome拡張機能「Tag for YouTube」の利用
  • ソースコードから確認する方法
    動画ページ上で「Ctrl + U」を押すと、HTMLソースコードを表示できます。ソース内にはmeta name="keywords"という形式で設定したタグが記載されています。ここで確認したタグは、YouTube上ではメタキーワードとして扱われている可能性がありますが、これが実際に検索順位や露出度にどの程度影響するかは明確ではありません。
ソースコードから確認する方法

YouTube Studioでタグを設定できる以上、何らかの内部的な評価や関連動画の表示などに影響がある可能性は否定できません。しかし、過度な期待は禁物であり、無関係なキーワードの羅列は規約違反や評価低下につながるリスクがあります。適切なタグを選び、コンテンツ内容と関連のある言葉をバランスよく設定することが大切です。

まとめ

この記事では、Webサイトにおけるメタタグの基礎知識や、その役割について解説しました。メタタグを適切に設定すれば、検索エンジンがページ内容をより正確に理解し、適切な検索順位の確保につながる可能性があります。

ただし、メタタグだけで検索順位を劇的に向上させることは困難です。他のSEO対策や、ウェブページ自体の改善も同時に行う必要があります。たとえば、MEO対策、競合サイトの分析、Googleアナリティクスを活用したアクセス解析などを組み合わせると、より効果的な集客が実現しやすくなります。

また、メタタグに限らず、検索アルゴリズムやユーザーニーズは日々変化しています。最新のSEO動向に目を配りながら、コンテンツの質やサイト全体の改善に努めることが欠かせません。メタタグが最適化されている競合サイトから学び、自社メディアコンテンツマーケティングにも積極的に応用していきましょう。

継続的な改善と情報収集を行うことで、より多くのユーザーにアプローチでき、ウェブサイト全体の価値向上につなげることができます。

よくある質問

📕 メタタグの種類と役割は何ですか?

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

  • タイトルを指定するタグ
  • ページ概要を示す<meta name="description">タグ
  • 文字コードを指定する<meta charset="UTF-8">タグ
  • ソーシャルメディア表示を整えるOGPタグ
  • モバイル表示を最適化するビューポートタグ

などがあります。これらを適切に設定すると、SEO効果やユーザー体験の向上が期待できます。

📕メタディスクリプションタグは重要ですか?役割は何ですか?

📖検索結果でページ内容を要約して表示するため、魅力的な説明文はクリック率の向上につながります。最近の検索エンジンは、必ずしもメタディスクリプションを採用しないこともありますが、質の高い説明文を用意すればユーザーの関心を引きやすくなります。

📕 YouTubeのメタタグとは何ですか?

📖 YouTubeでは、動画内容を示す「タグ」を設定できます。これらはユーザーに直接見えませんが、YouTube内部で検索や関連動画表示に影響します。一方、ハッシュタグは説明欄などに表示され、ユーザーが確認・クリックできる青いリンクとして機能します。

記事が気に入ったらシェアをお願いします!

記事は参考になりましたか?

ご意見・ご感想はこちら

はいいいえ

まずは簡単お見積り

あなたのサイトに最適なSEO対策をご提案します。検索順位の向上やアクセスアップにお悩みの方は、今すぐお見積りフォームからご相談ください。初めての方でも安心してお任せいただけるサポートをご提供します!

 SEO簡易お見積りフォーム

SEO対策にお悩みの方はお気軽にお電話にてお問い合わせください。

📞 03-6276-4579 : 株式会社コンテンシャル

平日 10:00~12:00 / 13:00~19:00