2023.02.13

【SEO対策】メタタグとは？SEOに重要なタグの種類や使い方について解説

メタタグ（meta情報）とは検索エンジンやブラウザに対して、Webページの情報を伝えるためのHTMLタグを指します。

端的にいうと検索エンジンなどに対するWebページの自己紹介文になります。メタタグを記述することでどんなテーマを扱っているかやどんな情報が記載されているかといったことを検索エンジンやブラウザなどのシステムに伝えることができます。メタタグはシステムに向けての情報（メタデータ）のため、普段Webページを閲覧していても目にする機会はあまりないですが、SEO対策においては意識を行わないといけません。

今回は「メタタグにはどのような種類があるのか？」「どのように使用するのか？」について解説を行います。

メタタグとは？

メタタグとは検索エンジンやブラウザに対してWebページの情報を伝えるHTMLタグです。

HTMLの<head>内に記述することで文字コードの指定やインデックスの可否などの指示を出せます。その他にタイトルやディスクリプションの設定を行うことでユーザーのクリック率向上を期待できます。普段Webページを閲覧していても目にする機会はありませんが、Webページ上で右クリックを行い、ページのソースを表示を選択することでソースを表示できます。

表示されたHTMLコードの<head>内に記述された<meta 〇〇>がメタタグです。

メタタグとSEOの関係性

メタタグは検索エンジンなどに対するWebページの自己紹介文のようなものだとお伝えしました。そのためメタタグを適切に使用することは内部SEOにおいてとても重要となってきます。主なメリットとして以下が挙げられます。

サイトの内容をユーザーに伝えれる

メタタグには記事のタイトルを指定するtitleタグやWebページの説明を記述するdescriptionタグなどがあります。これらで記述したテキストは検索結果画面やSNSのシェア情報として表示されます。そのため、ユーザーがWebページを開く前にどのような内容が記述されたページなのかが分かりやすくなり、クリック率の向上に繋げることができます。

サイトの内容をクローラー（検索エンジン）に伝えれる

メタタグはユーザーだけでなく、クローラー（検索エンジン）に内容を伝える上でも重要となってきます。クローラーは実際のWebページではなく、HTMLからどのような内容が記述されているページなのかを理解します。そのため適切なメタタグの使用を行うとクローラーが内容を理解しやすくなり、検索エンジンの評価向上に繋がります。

クローラーのインデックス拒否が行える

メタタグを使用することでクローラーのインデックスの拒否を行うことができます。主な使用用途は低品質なページやユーザーにアクセスを行なって欲しくないページなど、検索結果に表示してほしくないページなどに使用されます。情報を伝えたいページだけを厳選してクローラーに伝えることでSEO評価を高めることに繋がります。

SEO対策に重要な6つのタグ

SEO対策を行う上で重要となるメタタグを紹介します。

title（タイトル）タグ

タイトルタグはその記事のタイトルを設定する際に使用します。

正確にはメタタグでないものの、検索結果に表示される重要なタグなので必ず設置しましょう

<title>記事タイトル</title>

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

meta descriptionタグは120文字程度でページの概要を記述するタグです。

ここで記述を行った内容は検索結果に表示されるため、クリック率に影響します。そのため、重要なワードは冒頭に記述し、そのページにはどのような内容が書かれているかを簡潔に表す必要があります。

<meta name="description" content="ページの概要や内容を記述">

文字エンコーディングの指定

HTML文書の文字エンコーディングをcharset属性で指定します。

ここで文字コードの指定を忘れてしまうと、日本語で作成をしたサイトに他の言語ブラウザからアクセスをした際に文字化けをしてしまう恐れがあります。日本語で記述を行うサイトは「utf-8」を指定しましょう。

<meta charset="utf-8">

OGPタグ

OGPとはOpen Graph Protocolの略でFacebookやTwitterなどのSNSでシェアされた際に、ページのタイトルや画像などを正しく表示させるためのタグです。

こちらもクリック率に大きく関わる設定であり、SNSからの流入を増やすためにも必ず設定を行いましょう。主な設定項目は以下です。

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

ビューポートタグ

ビューポートタグはブラウザにモバイル端末での表示を指示するためのタグです。レスポンシブデザインに適応させるために必要であり、近年はスマホの普及によりモバイルファーストであることが求められるため設定をしておきましょう。Google推奨が推奨している記述内容は以下です。

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

noindex／nofollow

こちらはメタタグとSEOの関係性でも紹介をした、クローラーの動きに関するメタタグです。

このタグを使用することでクローラーが不必要なページをインデックスすることを防げ、SEO評価の低下を防ぐことができます。SEO評価を上げるためにはページの厳選も必要なためこちらも設定しておきましょう。以下のメタタグを使用することでクローラーに「ページをインデックスさせない」ことと「リンクしているページをクロールしない」ように設定できます。

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

メタタグの使い方

メタタグの設置方法として主に以下の2つがあります。

HTMLに直接書き込む

HTMLファイルを作成している場合は<head>要素内に必要なメタタグを記述します。

以下は文字コードとしてUTF-8を指定し、レスポンシブWebデザイン適用の表示領域を指定した例です。

<html>
<head>
　 <meta charset="utf-8" />
 　<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

WordPressのプラグインを使用する

WordPressではプラグインを使用することで簡単にメタタグを記述できます。

人気の高いプラグインに「All in One SEO Pack」と「Yoast SEO」があります。プラグインではメタタグの設置だけでなく、SEOに関する設定も一度に行えるためおすすめです。

メタタグを使用する上での注意点

メタタグを使用する上で以下の点に注意をしましょう。

あくまで補助的な効果だと認識する

検索順位を上位に上げるような直接的にSEO効果を得れるメタタグは存在しません。

あくまでもメタタグは間接的にSEOを補助してくれるものだと認識をしましょう。ただし、間接的なものだからと疎かにしてしまうと、ユーザビリティが低下してクリック率が下がる可能性があります。SNSからの流入向上やクリック率向上など、直接的ではなくともSEO対策には大切なポイントとなる点を意識して使用を行いましょう。

キーワードを詰め込みすぎない

つい関連するキーワードをたくさん盛り込んでしまいがちですが、それでは伝えたいキーワードが埋もれてしまい、本末転倒になってしまいます。

そのため、伝えたいキーワードを絞り込み、簡潔に内容が伝わるキーワードを意識して設定を行いましょう。

まとめ

メタタグとは検索エンジンやブラウザに対して、Webページの情報を伝えるHTMLタグを指します。

メタタグを適切に設定することで検索エンジンなどにどのようなテーマを扱っているかやどんな内容が記載されているかを伝えることができます。SEO対策を行う上で直接的な関係はないものの、メタタグの使用で検索結果に概要が表示されるなどユーザビリティの向上に繋がり、結果としてクリック率が上昇して流入量の増加を期待できます。

HTMLの設定は難しく思えますがメタタグは比較的容易に設置を行えるため、この機会に重要な6つのタグを参考に設定を行なってみましょう。

エンベーダー編集部

エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。