メタタグとは、検索エンジンに向けてWebサイトの情報を伝えるためのタグを指します。HTMLの一部に記載をし、表側には表示されないものが多いのです。

メタタグはSEOを意識する上で、欠かすことのできないテーマになりますので、しっかり理解しておきましょう。

メタタグとは?

6887b673c8e793639ca49b6b07e9900a

メタタグとは、ページや記事などコンテンツに関する情報を検索エンジンに伝えるためのタグのことです。

「このページは何を伝えようとしているのか」「どのようなテーマが書いてあるのか」を検索エンジンに伝えるための大切な要素です。

代表的なメタタグを挙げると、titleタグやdescriptionタグなどが該当します。

メタタグの見方

設置されているメタタグの見方として、デベロッパーツールの活用がおすすめです。

サイトを開いている状態で、Windows「Ctrl+U」、Mac「⌘+option+U」を押すとそのサイトのソースコードを確認することができます。

メタタグの書き方

メタタグはheadタグの中に記載されており、titleタグやcanonicalタグを除いて＜meta+〜〜＞という具合に記載することが多いです。

書き方を誤ってしまうとエラーになってしまいます。ただし規則性があり、決まった書き方をすることが大半なので、難しく考えなくても大丈夫です。

メタタグがSEOに及ぼす効果

eb5456b9f01e7b327a7157b741cd66df

メタタグはSEOに大きな効果を及ぼします。

表には見えないと思って、設定を疎かにしていると他のサイトに大きく差をつけられてしまいます。

メタタグがSEOに及ぼす効果1.ユーザビリティの向上

検索結果やSNSに表示されることから、titleタグとdescriptionタグはユーザービリティに関わってきます。

適切なtitleタグとdescriptionタグを設定することで、ユーザーのニーズや検索意図を突けるチャンスが広がりアクセスの数にも影響するでしょう。

メタタグがSEOに及ぼす効果2.検索エンジンのクローラビリティ向上

メタタグにはいくつか種類がありますが、中には検索エンジンにクロールの可否を指示するものもあります。

サイト内すべてのページが必要なものではないケースも多く、中には必要以上に検索エンジンのクロールに関するリソースを割いてしまうこともあります（クロールバジェットの無駄遣い）。

代表的なメタタグと、具体的な記述方法

c762cb631ec3bfe6c37e5efdfe6eb7bc

使用頻度が高い、代表的なメタタグと、最低限のメタタグにまつわる記述方法を押さえておきましょう。

title（タイトル）タグ

名前の通り、ページのタイトルつける際に使用する、SEOでも重要なタイトルタグです。

クローラーにページの内容を連想させるために、非常に大切なタグになるので適切なタイトルを考えて、必ず設置するようにしましょう。

▼記述例

<title>【2022年最新版】SEO対策とは？SEO初心者向けの基礎知識 | 株式会社ココログラフ</title>Code language: HTML, XML (xml)

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

ディスクリプションタグは、検索結果における説明文を担います。

直接的なSEOの要素にはなりませんが、文章の書き方次第でクリック率が左右されるため、非常に大切なタグになります。任意のディスクリプションタグを設定しなくても、検索エンジンが自動で保管してくれるケースがありますが、必ず適した説明文になっている保証はありません。

可能な限り、適切なディスクリプションタグを設定しましょう。

▼記述例

<meta name="description" content="インデックスカバレッジの問題は、Googleがそのページを正しくインデックスできていないことを意味しており、問題を解消しない限り、そのページはGoogleにインデックスされず、検索結果に表示されることもありません。">Code language: HTML, XML (xml)

▼ディスクリプションについてはこちらもご覧ください

https%3A%2F%2Fcocorograph
favicons?domain=cocorograph ディスクリプションとは？意味や適切な文字数を理解してSEOに有効な書き方を確認しましょう！
メタディスクリプションはSEOに直接影響したり、ランキング順位への影響を及ぼすものではありません。しかし、ユーザーのクリック率に大きく関わるため、間接的には大きく関わるものです。ディスクリプションに力を入れるポイントを見極めて、適切なディスクリプションを記述できるようにしましょう。

viewport（ビューポート）タグ

モバイル端末での表示をブラウザに指示するためのタグになります。レスポンシブデザインを意識する上では必要なメタタグになりますので、指定をしておきましょう。

▼記述例

<meta name="viewport" content="width=device-width, initial-scale=1.0">Code language: HTML, XML (xml)

charset属性（文字コードの指定）

文字コードの指定をするのがcharset属性です。

HTMLの勉強をしたことがあれば、下記のコードに見覚えがあるのではないでしょうか？
日本語は、代表的な「utf-8」や「shift_jis」などの指定をすることが多いでしょう。

コンテンツが文字化けしてしまう恐れがあるので、必ず指定をしましょう。

▼記述例

<meta charset="utf-8">Code language: HTML, XML (xml)

OGP（オープングラフプロトコル）タグ

SNSを考慮する際に必須なのがOGP(Open Graph Protocol)タグです。SNSでシェアされた時にページのタイトルやディスクリプションをはじめとした情報を正しく表示させるために必要なメタタグです。

▼記述例

<meta property="og:url" content=" https://cocorograph.co/metatag" />Code language: HTML, XML (xml)

メタタグの注意点

ef116737c047f3c42b6da353b6ef9e25

メタタグを設定する際に、いくつか理解しておくべきことがあるので押さえておきましょう。

メタキーワードは必要以上に注力する必要はない

メタキーワードは、ページの内容を伝えるためのキーワードを記載するタグのことです。

検索エンジンが今日ほど進化していない頃に、ページの内容を伝えるために有効だった施策です。メタキーワードを設定することでクローラーの補助になり、SEO効果もありました。

  • 検索エンジンがアップデートされて、メタキーワードを設定しなくても十分ページ内容を把握できる
  • 過去にメタキーワードを利用した、ブラックな手法が横行したためにSEO要素として薄くなった

以上のことから、現在のSEO施策において、さほど重要な役割を果たさなくなりました。

ただ、適切に設定しておく分には悪い影響もないはずですので、全く無視せず、ほどほどに設定をしておきましょう。

メタタグを設定することでSEOに直接影響することはない

何度か前述の箇所で説明をしておりますが、メタタグを設置することで直接的なSEO効果を得ることはできません。

ただし、クローラーにページの情報や内容を適切に伝える手助けになる場合や、メタディスクリプションタグやOGPタグのように表示に関わるものはユーザーに直接影響するケースも多く、間接的にSEOに関わってくるといえるでしょう。

メタタグを上手に活用してクローラビリティの良いサイトづくりを

メタタグは、SEOに直接影響を及ぼすものではありませんが、間接的にSEOに影響を及ぼすものが多く、非常に重要なタグになります。

代表的なものはタイトルタグやメタディスクリプションタグのようなものがあり、OGPタグのようにSNSに影響するタグもあります。可能な限り適切なタグ設置を心がけましょう。


記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。
ではまた。