SEO WEB制作

メタタグとは? SEOに影響するタグと設定の方法も解説

SHARE

「メタタグとは一体どういったものなのだろう」

「メタタグにはどんな種類があるのか」

「メタタグはどうやって設定するのか」

こんな悩みをお持ちでないですか?

本記事では、SEOに間接的な影響を与えるメタタグについて解説いたします。

この記事を読めば、メタタグの確認方法やSEO効果、種類、設定方法、作成する際の注意点も分かるようになります。

検索エンジンやブラウザにWebサイトの情報を伝えることでSEO効果を実感したい人は、メタタグを適切に設定しましょう。

メタタグとは?

 

メタタグとは「検索エンジンやブラウザにWebサイトの情報を伝えるタグ」です。

メタ要素と呼ばれることもあります。

HTMLファイルの<head></head>要素内に記述します。

メタタグを確認する方法

メタタグはWebサイト上に表示されないため、メタタグを確認するには、次の2つの方法のうちどちらかの操作をする必要があります。

HTMLのソースで確認する

Chromeの拡張機能で確認する

以下では、さらに詳しく見ていきます。

HTMLのソースで確認する

メタタグをHTMLのソースで確認するには、まずチェックしたいページを右クリックして、「ページのソースを表示」を開く必要があります。

すると画面にHTMLのソースコードが表示されます。

この画面内において<head>タグの中で<meta○○>と記述されているタグがメタタグです。

Chromeの拡張機能で確認する

サイトのメタタグは、GoogleのブラウザであるChromeの「META SEO Inspector」と呼ばれる拡張機能を使って確認することもできます。

多くのページのメタタグを確認したい人は、インストールしてみましょう。

メタタグのSEO効果

メタタグを設定することで、SEO効果が見込めます。

なぜなら、メタタグを記述してページの情報や構造をクローラーに分かりやすく伝えれば、サイトが検索エンジンのクローラーに認識されやすくなるためです。

メタタグが設定されていない場合、たとえ質の高いコンテンツを投稿していても検索エンジンのクローラーにサイトの情報を認識してもらえないため、正当なSEO評価を受けられません。

このように、サイトを検索結果の上位に表示させるには、ただ質の高いコンテンツを作れば良いというわけではないのです。

良質なコンテンツを提供しているのにもかかわらず、なかなか高いSEO評価が得られなくてお困りの人は、メタタグを設定してみてはいかがでしょうか。

メタタグの種類

メタタグの種類は多岐にわたりますが、今回はSEOで成果を上げるために欠かせない重要なメタタグを6つご紹介いたします。

・titleタグ(タイトルタグ)

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

文字コード(文字エンコーディング)

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

・OGPタグ

・noindexとnofollow

以下では、さらに詳しく見ていきます。

titleタグ(タイトルタグ)

titleタグ(タイトルタグ)は「記事のタイトルを30字程度で伝えるタグのこと」です。

タイトルタグは厳密に言うとメタタグではありませんが、他のメタタグと同様に<head></head>要素内に記述する重要なタグの1つです。

どんなタイトルを付けるかによってクリック率も変わるため、検索ユーザーがついクリックしたくなるようなキャッチーで惹かれるタイトルを付ける必要があります。

titleタグの最適化はSEO対策になるので、記事のタイトルにはキーワードを含めるようにしましょう。

タイトルタグは以下のように記述します。

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

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

meta description(メタディスクリプション)は「Webサイトの概要を100字程度で説明した文章のこと」です。

スニペットと呼ばれることもあり、検索結果のタイトルの下に表示されます。

PCの画面では90~120字ほど表示されますが、スマホの画面では70字ほどしか検索結果に表示されません。

そのため、重要なキーワードほどテキストの前半に盛り込むようにすると効果的です。

メタディスクリプションは適切に記述することで、ターゲットとする検索ユーザーを自社サイトに集客することができる上に、検索エンジンにページの情報や構成を伝えられます。

メタディスクリプションを設定することで検索順位が劇的に上がることはありませんが、適切に設定したりユーザーがついクリックしたくなるような魅力的な文を記述したりすることで、クリック率の向上が見込めるでしょう。

このように、メタディスクリプションの記述は直接的にはSEOに影響しませんが、間接的なSEO効果があると言われています。

メタディスクリプションタグは以下のように記述します。

<meta name=”description”content=”○○”>

○○の部分が検索結果画面でタイトルの下に表示される説明文に該当します。

文字コード(文字エンコーディング)

文字コードは「Webページの文字化けを防ぐタグ」です。

文字化けすると、検索エンジンのクローラーがサイトの情報をうまく読み取れず、SEO評価が下がってしまいかねません。

文字化けを起こさないためにも、日本語を英語などの他の言語と混ぜて記述しないように気を付けましょう。

文字コードタグは以下のように記述します。

<meta charset=”utf-8”>

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

viewportタグ(ビューポートタグ)は「モバイル端末向けにテキストや画像の表示サイズを最適化するタグのこと」です。

近年はWebサイトをスマホで閲覧する検索ユーザーが増えています。

ユーザーの利便性を高めるためにも、Webサイトをモバイル対応させましょう。

GoogleはモバイルフレンドリーなWebサイトほど高く評価するため、viewportタグを設定することで最終的にはSEO評価を間接的に上げられる可能性があります。

ビューポートタグは以下のように記述します。

<meta name=”viewport”content=”width=device-width,initial-scale=1”>

OGPタグ

OGP(Open Graph Protocol)タグは「WebサイトがSNSでシェアされたときにレイアウトを調整するタグ」です。

いわば、タイトルやURL、アイキャッチ画像、ディスクリプションを正しく表示させるための仕組みだと言えます。

逆に、OGPタグが正しく設定されていないと、せっかくSNSでシェアされたときのクリック率が低くなってしまいます。

TwitterやFacebookといったSNSで自社がターゲットとする見込み顧客を集客している人は、OGPタグを設置するようにしましょう。

OGPタグが正しく設定されていれば、SNSでシェアされたときのクリック率が高まります。

OGPタグは以下のように記述します。

<meta property=”og:title”content=”ページタイトル”/>

<meta property=”og:url”content=”ページURL”/>

<meta property=”og:image”content=”画像URL”/>

<meta property=”og:description”content=”サイトディスクリプション”/>

<meta property=”og:site_name”content=”サイト名”/>

<meta property=”og:type”content=”ページタイプ”/>

noindexとnofollow

noindexは「指定したページのインデックスを防げるタグ」です。

設定すると、noindexが記述されているWebサイトは、どんなキーワードで検索をしても検索結果に表示されることはなくなります。

重複コンテンツや質の低いページに付けることで、サイト全体の評価が下がるのを防いでくれます。

その他に、お問い合わせフォームに回答した後のサンクスページなど、検索エンジンのインデックスが必要ない時に使いましょう。

nofollowは「検索エンジンのクローラーに、リンク先のページへSEO評価を受け渡さないように伝えるタグ」です。

設定すると、検索エンジンのクローラーがnofollowタグの貼られたリンク先を巡回しなくなります。

自社サイトの評価を受け渡したくないサイトや広告へのリンクに付けることで、サイト全体の評価が分散するのを防いでくれます。

このように、noindexタグやnofollowタグを設定することで、良質なコンテンツだけがインデックスされるようになり、サイト全体のSEO評価も高められます。

noindexとnofollowは以下のように記述します。

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

メタタグの設定方法

メタタグは以下のように記述します。

<meta ○○=“”content=“”>

メタタグを設定するには、次の2つの方法を実践しましょう。

HTMLに直接書き込む

WordPressを使う

以下では、さらに詳しく見ていきます。

HTMLに直接書き込む

HTMLファイルを作成している人は、<head>タグの中にメタタグを記述しましょう。

その際、テキストエディタのような専用ソフトでHTMLファイルを開きましょう。

記述の例は以下の通りです。

<html>

<head>

<meta name=”description” content=”○○”>

<meta name=”viewport” content=”○○”>

</head>

WordPressを使う

WordPressのプラグインを使えば、コードを記述できない人でも簡単にメタタグを設置できます。

HTMLに直接書き込んでメタタグを作成すると、打ち間違えたり記述する場所を誤ったりしてしまう可能性がありますが、WordPressのプラグインであれば心配ありません。

多くのサイト運営者の間では「ALL in one SEO Pack」と「Yoast SEO」の2つのプラグインのどちらかがよく使われています。

自社サイトに合ったツールを活用するとSEOにも効果的です。

記事を作成する画面の下に、タイトルやメタディスクリプション、メタキーワードを記述する欄があるので、メタタグを設定してSEO対策したい人は画面をスクロールしましょう。

ただ、WordPressのテーマによっては初期設定にメタタグの記述ボックスが組み込まれていて、プラグインを追加しなくても良い場合があります。

プラグインをインストールする前に、自社サイトが有効化しているテーマに記述ボックスが最初からついているかどうか確かめましょう。

メタタグを作成する際の4つの注意点

メタタグを作成する際には、次の4つに注意しましょう。

・直接的なSEO効果を持つメタタグはない

・メタタグは<head></head>の間に記述する

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

・メタキーワードの設定をする必要はない

以下では、さらに詳しく見ていきます。

直接的なSEO効果を持つメタタグはない

メタタグには色々な種類がありますが、直接的なSEO効果を持つメタタグはありません。

メタタグのSEO効果は間接的なものです。

「このメタタグを作成すれば、SEO効果が出て検索順位が上がる」といった直接的なSEO効果は見込めないので、注意しましょう。

メタタグを設定するSEO対策には、多種多様なメタタグを一つ一つ着実に設定し、サイト全体のSEO評価を底上げするイメージを持つと良いです。。

メタタグは<head></head>の間に記述する

Webサイトは<head>部分と<body>部分の大きく2つに分けられますが、メタタグは<head></head>の間に記述しましょう。

記述する場所を間違えると、検索エンジンのクローラーにサイトの情報を伝えられない上に、ページのデザインもおかしくなってしまいます。

メタタグを設定する際には、誤って<body>部分に記述しないように気を付けてください。

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

メタタグを作成する際は、キーワードを詰め込み過ぎないようにしましょう。

キーワードを詰め込み過ぎると、「何が重要なキーワードなのか」分かりづらくなってしまうからです。

候補となるキーワードを吟味して、本当に重要なキーワードだけを選び抜く必要があります。

メタキーワードの設定をする必要はない

メタタグを作成する際、メタキーワードの設定をする必要はありません。

なぜなら、検索エンジンがアップデートされたことで、キーワードがページの内容をもとに判別されるようになったためです。

従来はSEO対策にも有効とされ、クローラーにページの情報を伝えるために設定する必要がありました。

しかし、今ではSEOへの影響もないとされていて、メタキーワードを設定しなくて良くなりました。

したがって、メタキーワードは今やメタタグの中でも重要性の低いタグだと言えます。

まとめ

メタタグを設定してSEO効果を実感しましょう。

今回は、SEOに間接的な影響を与えるメタタグについて解説いたしましたが、いかがでしたでしょうか。

メタタグとは「検索エンジンやブラウザにWebサイトの情報を伝えるタグ」です。

Webサイト上に表示されないため、メタタグを確認するには、「HTMLのソースで確認する」か「Chromeの拡張機能で確認する」ようにしましょう。

メタタグを設定することで、サイトが検索エンジンのクローラーに認識されやすくなりSEO効果が見込めます。

メタタグの種類は多岐にわたりますが、中でも「titleタグ(タイトルタグ)」「meta description(メタディスクリプション)」「文字コード(文字エンコーディング)」「viewportタグ(ビューポートタグ)」「OGPタグ」「noindexとnofollow」はSEOで成果を上げるために欠かせない重要なメタタグだと言えます。

メタタグを設定するには、「HTMLに直接書き込む」か「WordPressのプラグインを使う」ようにしましょう。

メタタグを作成する際に注意すべきこととして「直接的なSEO効果を持つメタタグはない」「<head></head>の間に記述する」「キーワードを詰め込み過ぎない」「メタキーワードの設定をする必要はない」の4点が挙げられます。

メタタグは適切に設定すれば、クリック率やユーザビリティの向上を見込めます。

検索エンジンやブラウザにWebサイトの情報を伝えることでSEO効果を実感したい人は、メタタグを適切に設定するところから始めてみてはいかがでしょうか。

この記事の監修者

倉永豊光

株式会社トモガラ代表取締役社長。WEBサイト制作の上場会社で営業職を経験後、外資系のスタートアップ広告代理店にてWEBコンサルティングに従事。その後ベンチャー企業の新規事業立ち上げを責任者として2社経験し独立。得意領域はWEBマーケティング全般とWEBサイト制作。 今までWEBサイト制作に携わった数は大手、上場企業、官公庁含めて累計1,000件以上。

今すぐ問い合わせる

まずはトモガラに無料相談
03-5962-0575
受付時間
平日10時〜19時

関連記事

  • ドメインとは?ビジネスにおける重要性や種類、取得する際のポイントについて解説

    WEBデザイン WEB制作
  • 中小企業こそ必要な採用サイト!効率的な集客の方法とは

    採用サイト WEB制作
  • フリーランスへのホームページ作成依頼時の相場は?依頼前の確認内容も紹介!

    費用 WEB制作
PAGE TOP