メタ(meta)タグとは？SEOにおける重要な7種類のメタタグをわかりやすく説明

今回はSEO対策の文脈で頻出するメタタグについて紹介していきます。メタタグという言葉をまったく知らない状態からでもわかりやすく説明しているのでぜひ最後まで読んでみてください。事前知識としてはHTMLに関する基本的な知識があれば読み進めることができるはずです。

メタ（meta）タグとはなにか？

メタタグとはそのページに関する補足情報であるメタ情報をHTMLのタグにしたものです。メタ情報とは裏側でブラウザに伝えておきたい情報になります。例えばこのページは日本語向けだということをブラウザに伝えることができたりします。ここで重要なのは「メタ」という言葉が示すように人間向けの情報ではなく、機械向けのタグであるということです。

具体例で見た方が早いと思うので本サイトのメタタグを抜粋します。head タグに囲まれたタグがいわゆるメタタグと呼ばれるものです。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
  <meta name="robots" content="index,follow">
  <title>SEO Plus | WordPressのSEOを改善する</title>
  <meta name="description" content="WebサイトのSEO対策に関する記事を多数掲載中。WordPressを利用したサイト構築/サイ    トのSEO評価確認/サイト表示速度の改善などのSEO対策における実用的な内容を紹介しています。">
</head>

例えばですが、<title>SEO Plus | WordPressのSEOを改善する</title> というタグがありますよね。これはページのタイトルを示すメタタグになっています。ここに記載した内容はブラウザのタブのタイトルとして表示されます。このようにサイトの内容と直接は関係ないものの、ブラウザ上での表示を一工夫入れるという用途が一つあげられます。

ほかにもtitle タグはブックマークをしたときのタイトル名の自動補完に使われたりもします。

このようにメタタグは補足情報をブラウザに伝えることでユーザのブラウザでの体験を補完するような役割を持っています。そのほかにもページの文字コードの指定、クローラ制御、OGP画像の設定、ビューポートの設定など様々な役割を持っています。このあと個別に紹介するので安心してください。

メタタグはSEO対策になるのか？効果はあるの？

結論から言えば、SEO対策になります。先ほどの例でいえば、ページにタイトルが設定されているページのほうが親切ですよね、感覚的な理解でもかまいません。難しくいえば、ページのアクセシビリティの観点においてメタタグが影響を受けるわけです。アクセシビリティがよければそれだけページの評価が上がるため、間接的にSEO対策になります。

またメタタグは記事のキーワードを設定する場所にもなりえます。SEO対策においてキーワード選定は非常に重要で、例えばこの記事であれば「メタタグ SEO」というキーワードで検索上位を狙っています。ページの性質をキーワードで設定することにより、直接的にSEO対策として利用されるわけです。

メタタグの種類と設定方法

この章では重要な7種類のメタタグの紹介をしていきます。

title (タイトル)

titleタグは前述した説明と同様ですが、ページのタイトルを示すメタタグです。以下のように埋め込みます。

<title>SEO Plus | WordPressのSEOを改善する</title>

前述した説明通りにタイトルタグは様々な場面で利用されます。

charset (文字コード)

文字コードを設定するためのメタタグ。文字コードとは文字とバイトを紐づける辞書のようなものです。これは現代においてはおまじないのように記載しておくとよいです。

<meta charset="UTF-8">

まれに文字化けしたWebサイトが表示されることがあります。あれはブラウザは文字コードAを利用して読み込んでいるのに、文字コードBの文字で書かれたWebサイトだからです。具体例をあげておくと、UTF-8で書かれた「こんにちは」という文字をSHIFT_JISという形式で読むと「縺薙ｓ縺ｫ縺｡縺ｯ」となります。既視感がある人はよくWebブラウジングをされる方だと思います。古いサイトあるあるです。

現在ではWebの文字コードはUTF-8を利用していればほぼ問題ありません。文字化けしてしまうページがあれば忘れていないかをチェックするとよいでしょう。

description (説明）

descriptionタグと呼びます。このタグは本サイトであれば以下のようにサイトの詳細な説明を行うために記載しています。

<meta name="description" content="WordPressのSEOを改善するためのテクニック集を紹介しています。プラグインを利用することで誰でも簡単に無料でSEOを改善することができます。
">

ここに記載した内容は様々なところで利用されますが、最も目立つ箇所はGoogleなどの検索エンジンの検索結果のタイトル下に記載される文章でしょうか。このタグは解析にかけられてこのページが何のコンテンツをユーザに届けようとしているかのリード文のような役割を持つ箇所で非常に重要です。

viewport (ビューポート)

次はビューポートタグです。こちらはレスポンシブなサイトを利用するときには必ず必要になるタグです。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">

width=device-width はWebサイトの幅をユーザの端末の幅と合わせる、initial-scale=1.0 は表示倍率を1倍に設定する、という意味を持ちますが、この記事では深入りしません。レスポンシブデザインを開発するときにはサイズに合わせたページを提供をする必要があるため、このタグで事前に初期位置などを決めておくのです。

ogp (OGP設定)

OGPに関する設定を行うタグです。OGPとはTwitterやInstagramなどの他アプリに向けて共有をしたときに表示する内容を示したものです。本サイトであれば以下のように設定されています。

<meta property="og:type" content="website">
<meta property="og:url" content="http://18.181.143.207/">
<meta property="og:title" content="SEO Plus | WordPressのSEOを改善する">
<meta property="og:description" content="WebサイトのSEO対策に関する記事を多数掲載中。WordPressを利用したサイト構築/サイトのSEO評価確認/サイト表示速度の改善などのSEO対策における実用的な内容を紹介しています。">
<meta property="og:image" content="https://cdn.kaizen-seo.net/wp-content/uploads/2022/09/kaizen_seo_ogp-1024x538.png">

よくわからないと思うので、実際の例を確認してみましょう。本サイトでのFacebook向けのOGPは以下のようになっています。このカードのようなUIは一度見たことがあるでしょうか。このカードの内容について記載するのがこのタグです。例えば og:title は SEO Plus | WordPressのSEOを改善する と記載していますが、以下のカードのUIのタイトルにそのまま使われています。

このようにOGPを設定するタグがOGPタグになります。ホームページのSNSでの露出などの機会が多い場合には設定が漏れていないか要チェックです。

robots (クローラ制御)

これはクローラを制御するためのメタタグです。 content の箇所に指定する制御方法を記載します。クローラはWebサイトを巡回し検索エンジンに登録するためのプログラムのことです。これらのプログラムに対してこのページはインデックス登録をしない、つまり検索に表示させないで欲しいなどの命令を記述することができます。

<meta name="robots" content="index,follow">

記載するクローラ制御についてはこの記事では語り切れないため、以下の記事を参考にしてください。

検索エンジン（クローラ）制御の初歩 | index, noindex, follow, nofollow

今回はクローラ制御に関する記事です。クローラの制御はSEOにとっても基本中の基本といえるテクニックになります。本記事では最もシンプルな4種類の属性（index, noindex, follow, n

18.181.143.207

keyword （キーワード）

Webサイトのキーワードを示したメタタグ。本サイトは以下のように設定されていました。言わずもがなサイトの特徴をハッシュタグのように羅列していくだけのタグになります。

<meta name="keywords" content="WordPress, SEO, Web, サイト構築, ホームページ">

しかし2022年においてはほとんど活用されていないというGoogleの声明があったため、重要性は高くないでしょう。以下の声明によると企業向けの検索としてkeywordsメタタグの利用は想定されているようですね。いわゆるGoogle検索においては効力を発揮しなさそうです。

Q. Google は keywords メタタグをウェブ検索のランキングで使用することはありますか。
A. 端的に言えば、使用しません。Google は Google 検索アプライアンスを販売していますが、このプロダクトにはメタタグの一致機能が備えられており、それらのメタタグには keywords メタタグが含まれる場合があります。ただし、これは企業向けの検索アプライアンスであり、Google のメインのウェブ検索とはまったく異なるものです。Google のウェブ検索（Google.com 検索として知られている、数多くのユーザーが毎日使用する検索）では、キーワードメタタグは完全に無視されます。現時点で Google 検索のランキングに影響が及ぶことはありません。
https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=ja

ここで企業向け検索アプライアンスというものが何を指すのかは抽象的で不明ですが、いずれにしてもタグ自体は配置しておいたほうが好ましいと思います。このタグがあることで無視されるだけで、点数がマイナス評価されるわけではないでしょう。