メタタグとは? 見方・設定方法・必要性とSEO効果をわかりやすく解説

公開日:2023-12-11 更新日:2024-03-28 by SEデザイン編集部

目次

メタタグとは? 見方・設定方法・必要性とSEO効果をわかりやすく解説Webサイトの情報を記載するメタタグにSEO効果があるのか、疑問に思っているWeb担当者は多いでしょう。
メタタグを設定しても明確な変化が出にくいため、具体的に何の役に立つのか理解するのは難しいかもしれません。

今回はメタタグの見方や設定方法、SEOとの関係性、SEOと関連するメタタグとその効果を紹介します。

メタタグとは

「メタタグ」とは、Webサイトの情報を記載するタグのことです。検索エンジンやブラウザにサイト内容を伝える役割があります。

コンテンツとして表示されないものが多いため、実際にユーザーがメタタグの情報そのものを見る機会はほとんどありません。ここでは、メタタグの見方や設定方法、必要性について解説します。

メタタグの見方

メタタグを確認したいときは、ページのソースを表示する必要があります。

  1. 該当ページをブラウザで表示する
  2. ページ内を右クリックし、コンテキストメニューを出す
    (Shift+F10、アプリケーションキーでも可)
  3. 「ページのソースを表示」を選択し、htmlコードを表示する
  4. headタグの中から<meta〇〇>と記述されたタグを探す

該当ページを表示した状態で「Ctrl+U」を押すと、すぐにソースを表示できます。

目的のメタタグを見つけづらいときは、ページ内検索機能を使うと便利です。Ctrl+Fで検索窓を呼び出し、「meta」あるいは探したいメタタグの文字列(titleなど)を入力すると、スムーズに見つけられるでしょう。

メタタグの設定方法

メタタグはHTMLに直接記述することで設定が可能です。
CMSは、仕様または機能によって設定方法が異なります。一方、WordPressの場合はプラグインを用いて設定するのが一般的です。

HTMLで設定する方法

メタタグの設置場所はHTMLの<head>セクション内です。これ以外の場所に設置すると正常に機能しないため、必ず守るようにしましょう。

具体的には、以下のように記述します。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">←①

<metaname="description"content="Author:A.N.Author,Illustrator:P.Picture,Category:Books,Price:£9.24,Length:784pages">←②

<metaname="google-site-verification"content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=">←③

<title>ExampleBooks-high-qualityusedbooksforchildren</title>←④

<metaname="robots"content="noindex,nofollow">←⑤

</head>
</html>

Googleがサポートしているmetaタグと属性」より引用

上記の記述例では、以下のメタタグが使用されています。

  1. 文字コード
  2. メタディスクリプション
  3. Googleのサイト所有権の認証
  4. タイトルタグ
  5. noindex,nofollowタグ

WordPressで設定する方法

WordPressではプラグインを導入すると簡単にメタタグを設定できます。メタタグが設定可能なプラグインとして、代表的なものは以下の5つです。

  • YoastSEO
  • AllinOneSEOPack
  • TheSEOFramework
  • MetaManager
  • AllMetaTags

テーマによっては、プラグインを導入しなくても一部のメタタグ(タイトルタグやメタディスクリプションなど)を設定できる機能があります。しかし、その他のタグを設定したいときは「テーマファイルエディター(テーマエディター)」を開いて編集しなければなりません。

テーマファイルエディター(テーマエディター)は「外観」メニューにあり、設定方法はテーマによって異なります。

メタタグの必要性

以下に挙げるメタタグの機能は、Webサイトの運用において特に重要です。

タイトルタグ:検索エンジンやユーザーにWebサイトの内容を伝える

タイトルタグやメタディスクリプションは、記事の内容を簡潔、魅力的に伝えられます。クリック率を高める効果も期待できるでしょう。

noindex/nofollowタグ:検索エンジンに指示を与える

noindex,nofollowタグによって、インデックスやリンク先の巡回を拒否できます。意図しないサイト評価を回避する際に有効です。

ビューポートタグ:ブラウザに表示方法を指定する

ビューポートタグはモバイル端末、OGPタグはSNSにおいて見やすいページ表示になるように指定できます。文字コードを適切に指定することによって文字化けを防ぎます。

メタタグとSEOの関係

メタタグとSEOの関係メタタグの設定は内部SEOの一環として実施されます。つまり、メタタグを整備することによってSEO対策になると考えるのが一般的です。

Googleの検索結果は、クローラーが巡回してページを読み込み、評価・ランク付けすることによって決定されます。そのため、ページの構造や情報を検索エンジンのクローラーに分かりやすく伝えなければなりません。

メタタグを適切に設定することで、検索エンジンのクローラーに認識されやすく、インデックスから評価を受けるまでの流れもスムーズになります。逆に、メタタグの設定に問題があると、クローラーが正しくページの情報を認識できず、検索結果に悪影響が出てしまう可能性があるので注意しましょう。

また、検索結果に反映させたくないページを設定にも「noindex」や「nofollow」などのメタタグが活用できるため、意図せずサイト評価が下がるリスクが回避できるでしょう。たとえば、SEO的にはマイナスになると分かっていても、サイトの構成として必要なページを残したい場合などに役立ちます。

以上のようにメタタグを効果的に使うことで、SEO上の恩恵を得ることができます。

SEOと関連する6種類のメタタグ

ここでは、SEOとの関連性が高い6種類のメタタグを紹介します。

  • タイトルタグ(title)​​
  • メタディスクリプション(metadescription)
  • noindex,nofollowタグ
  • ビューポートタグ
  • OGPタグ​​
  • ​​文字コード

これらはGoogleの公式サポートが明言されており、ユーザビリティにも影響があるメタタグです。以下、それぞれを詳しく解説します。

タイトルタグ(title)

タイトルタグは、記事の内容を30文字程度で表したものです。タイトルタグで設定された文言がブラウザタブや検索結果上でページタイトルとして表示されます。検索結果として、ユーザーがひと目でコンテンツを知るために重要です。

メタタグのTitleタグを説明する画像

▼タイトルタグの記述方法

<title>タイトル名</title>

基本的にはh1と同じ文言を設定しますが、タイトルタグとh1タグの役割は以下のように異なります。

  • タイトルタグ:ページにアクセスする前に、検索結果の記事タイトルとして表示する。
  • h1タグ:ページにアクセスした後に、記事のタイトルまたは見出しとして表示する。

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

メタディスクリプションとは、ページの内容を要約した文章のことです。ただし、端末によって表示できる文字数が異なることに注意が必要です。PCやスマートフォン、タブレットなどの各端末で、どのように表示されるか確認しておきましょう。

メタタグのMetadiscriptionタグを説明する画像

▼メタディスクリプションの記述方法

<metaname="description"content="説明文">

メタディスクリプションそのものは、検索結果に直接的な影響はありません。クローラーには記述内容の良し悪しが判断できないためです。

しかし、ユーザーに読みたいと思わせる説明文はクリック率を高め、サイト訪問数を増加させます。結果的に順位上昇につながることから、SEOとして有効であるといえます。

メタディスクリプションについて書き方や設定方法を知りたい方は、あわせて以下の記事もご参考ください。
メタディスクリプションとは?設定方法や書き方のコツ

noindex,nofollowタグ

noindex,nofollowタグは、robotsメタタグのcontent属性に記述します。
noindexとnofollowの機能は以下のとおりです。

  • noindex:検索エンジンに登録しないWebページを設定する。
  • nofollow:リンク先の外部ページと関連させないようにする。

【記述方法1】分割して記述する場合

<metaname="robots"content="noindex">
<metaname="robots"content="nofollow">

【記述方法2】まとめて記述する場合

<metaname="robots"content="noindex,nofollow">

※記述方法1・2のどちらでも、"robots"を"googlebot"と記述するとGoogleのクローラーのみが対象となります。

一般的には、クローラーに不要なページを評価させたくない場合などに使用します。
ただし、noindexではクロール自体を拒否できないことに注意が必要です。

ページへのクロール拒否をする場合はクローラーによるブロック解除を指示できる「robots.txt」を設定します。なお、robot.txtの編集やテストをGoogleが提供するrobots.txtテスターで実施できます。

noindexの書き方や設定方法を知りたい方は、あわせて記事もご参考ください。
noindexとは?SEO対策における正しい設定方法と注意点を解説

ビューポートタグ

ビューポートタグは、モバイル端末でページ表示を最適化するメタタグです。
表示が崩れて見にくいページはユーザーの離脱率が上昇してしまい、ページ評価が下がる可能性が高まります。SEOへの悪影響を避けるためにも、ビューポートタグで見やすさを調整することは重要です。

メタタグのviewportタグを説明する画像

ビューポートタグの記述方法

<metaname="viewport"content="width=device-width,initial-scale=1″>

"width=device-width"は端末の画面幅に合わせる指示です。
"initial-scale"では表示倍率を指定します。"initial-scale"以外の属性として"minimum-scale"、"maximum-scale"、"user-scalable"が設定可能です。

「モバイルフレンドリー」はGoogleの重視する評価指標の一つです。現状では、ビューポートタグの設定は必須の内部対策といえます。

OGPタグ

OGPタグは、FacebookやX(旧Twitter)などのSNSにページをシェアされたときに見やすくなるよう、レイアウトを調整するために用います。OPGタグは、ページURLやサイト名、ページタイプなど複数の要素から構成され、それぞれを個別のタグで記述します。

メタタグのOGPタグを説明する画像

▼OGPタグの記述方法

<metaproperty="og:url"content="ページURL"/>
<metaproperty="og:site_name"content="サイト名"/>
<metaproperty="og:type"content="ページタイプ"/>
<metaproperty="og:title"content="ページタイトル"/>
<metaproperty="og:description"content="サイトディスクリプション"/>
<metaproperty="og:image"content="画像URL"/>

SNSでのクリック率、すなわちサイトへの流入数には直接的なSEO効果はありません。

しかし、SNSの拡散により、企業名やサイト名、サービス・商品名が、Web上で第三者のメディアから引用・言及される「サイテーション」の効果が期待でき、外部メディアから大量の被リンクが発生する可能性があります。検索結果の順位上昇と同時に集客力アップも見込めるため、SNS対策を万全にしておきましょう。

OGPやサイテーションについて知りたい方は弊社の記事も参考ください。

OGPとは?設定するメリットや具体的な記述の方法について
サイテーションとは?SEO効果やMEOへの影響、獲得方法を紹介

文字コード

文字コードは、Webページで文字のエンコーディングを指定するために必要なメタタグです。日本語サイトでは「utf-8」「shift_jis」「euc-jp」の3種類がおもに使用されています。

メタタグの文字コードを説明する画像

▼文字コードの記述方法

<metacharset="文字コード">

適切な文字コードが指定されていなければ、多言語版のブラウザでは文字化けが起きる可能性があります。また、検索エンジンのクローラーが文字化けによって情報を正しく読み取れない場合、正当なサイト評価が得られません。結果的にSEOへ悪影響を及ぼすことが懸念されるので注意しましょう。

メタタグ設定の注意点

メタタグ設定の注意点SEOだけでなく、サイト運用やユーザビリティの面においても、メタタグは重要な役割を果たします。ページごとに設定するのは大変な労力が必要になりますが、怠ることのないようにしたいものです。ここでは、メタタグ設定で特に注意してほしいことを2つ紹介します。

キーワードを詰め込まないようにする

タイトルタグやメタディスクリプションなどで、ターゲットキーワードを盛り込むのはSEOに有効とされます。しかし、詰め込み過ぎれば逆効果になってしまうことにも注意しましょう。タイトルタグではメインキーワードをなるべく先頭に、1つだけ使用するのが基本です。

【NG例】メタタグとは?メタタグの見方・設定方法とメタタグのSEO効果を解説
【OK例】メタタグとは?見方・設定方法・必要性とSEO効果を分かりやすく解説

また、メタディスクリプションに検索クエリに関連しそうなキーワードをただ羅列するのも問題です。サイト説明文として不自然であればGoogleからの評価が下がるリスクもあるため、適切な範囲で盛り込むようにしましょう。

メタタグだけで順位上昇できるわけではない

この記事で紹介したSEOに関連するメタタグを設定しただけで、検索結果の順位上昇が実現するというわけではありません。

そもそもメタタグには直接的なSEO効果はなく、間接的な好影響が見込めるという性質のものです。あくまでも、コンテンツの質やサイトのユーザビリティ、被リンクといった要素がSEOにおける優先事項となります。

もちろん、メタタグが適切に設定されていないことが原因で、ユーザーの目に止まる機会が少ない結果として順位が下がる可能性はあります。どちらかといえば、マイナス評価や不利な評価を受けにくくするための施策と考えたほうが適切です。

SEO効果を高めるには、メタタグを適切に設定した上でコンテンツ戦略や被リンク獲得に注力する必要があります。

被リンクについては、以下の記事で詳しく紹介しています。
今さら聞けない被リンクとは?SEOとの関連性も紹介

SEO効果を狙うなら戦略的な取り組みが重要!

メタタグでWebサイトのさまざまな情報を記載し、検索エンジンやブラウザにサイト内容を伝えることができます。サイト運営に必要であると同時に、メタタグの種類によってはSEOと関連するものもあります。メタタグの記述方法や注意点を守って、正しく活用することが重要でしょう。

しかし、メタタグの設定だけでは直接的で十分なSEO効果は期待できません。検索結果の順位上昇を目指すのなら、コンテンツ企画やチャネル設計といった確かな戦略が必要となるでしょう。

SEデザインはIT分野のBtoBマーケティング、およびセールス支援の実績が豊富で、戦略の立案から一貫したサポートが可能です。高いコンテンツ制作力とIT分野の幅広い知見をもって、お客さまのWebビジネスの拡大と効率化を支援します。戦略や制作にお悩みをお持ちの方は、お気軽にご相談ください。

 

SEOの基礎
コンテンツ制作サービス

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方