WEB歴 7年の専門家がホームページやブログ運営に役立つ情報を発信しています。

最終更新日:2020年3月20日

SEOで重要なメタタグ(meta)は3つ!意味と書き方を徹底解説

「SEO ではメタタグが重要」と言われています。

しかし、SEOを始めたばかりだと「そもそもメタタグって何?」という状態の人がほとんどではないでしょうか。

当記事は、そのような方を対象とした記事です。

当記事を読むと次の2点をスッキリと理解することが出来ます。

  • メタタグとは何か?
  • SEOで重要なメタタグ(意味・理由・書き方)

それでは、順番に説明していきます。

metaタグ(メタタグ)とは

メタタグは、検索エンジンに対して「どのようにウェブページを扱ってほしいか」を指示するために記述するHTMLタグです。

具体的に説明します。下の画像は Googleの検索結果ページです。

Google検索結果に表示されるメタディスクリプションの説明画像

この画像の赤枠部分に表示されている「ウェブページの説明文」を設定しているのがメタタグです。

上記の場合ならば、メタタグで検索エンジンに次のように指示をしています。

メタタグで検索エンジンに指示

ウェブページAを検索結果に表示する場合は、ウェブページAのメタタグに設定してある「〇〇」という説明文を使用してください!

このように、メタタグは検索エンジンに対して「どのようにウェブページを扱ってほしいか」を指示するために記述するHTMLタグです。

メタタグの基本的な書き方

メタタグの基本的な書き方は、次のとおりです。


                    <meta name="〇〇" content="×××" />
                

上記のコードのように「meta」から始まるのが特徴です。

そして、メタタグは <head>タグのなかに書くというルールがありますので、最終的には次のようなHTMLになります。

<head>
                            <meta charset="文字コード" >
                            <meta name="〇〇" content="×××" />
                            </head>

メタタグの確認方法

参考までに、メタタグの確認方法も紹介しておきます。

メタタグはウェブブラウザを使って簡単に確認することができます。ここでは「Google Chrome」を使った確認方法を紹介します。

手順は、以下の 3ステップです。

1. 調べたいウェブページを表示

まず、調べたいウェブページを「Google Chrome」で表示します。

2.ウェブページの上で右クリック

次に、ウェブページの上でマウスを右クリックします。クリックする場所は、ウェブページの上ならどこでも OK です。

ウェブブラウザからホームページのソースコードを確認する方法

そうすると、上の画像のようなメニューが表示されます。

3. 「ページのソースを表示」を左クリック

最後に、表示されたメニューのなかから「ページのソースを表示」を左クリックします。そうすると、ウェブページのHTMLコードが表示されます。

ウェブブラウザからホームページのソースコードを表示したスクリーンショット画像

参考:メタタグの簡単な探し方

参考までに、メタタグの簡単な探し方も紹介しておきます。

方法は、ウェブブラウザの検索機能を使って「meta」と検索するだけです。

「Google Chrome」の検索機能を使用する説明画像

そうすると、メタタグをすぐに見つける事ができます。

SEOで重要なメタタグは3つ【理由と書き方】

SEOで重要なメタタグは次の 3つです。

それぞれのメタタグの「SEOで重要な理由」と「HTMLの書き方」について順番に説明していきます。

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

メタディスクリプションは、GoogleやYahoo!などの「検索結果に表示するウェブページの説明文」を指定するためのものです。

具体的に説明します。次の画像は、Googleの検索結果ページです。

Google検索結果に表示されるメタディスクリプションの説明画像

画像の赤枠部分に表示されているページ説明文を指定しているのが、メタディスクリプションです。

メタディスクリプションがSEOで重要な理由

メタディスクリプションがSEOで重要な理由は「検索結果でのクリック率に大きく影響するから」です。

検索ユーザーは、検索結果に表示されるページをすべて見るわけではありません。そのなかから「自分の役に立ちそうな」ものだけを選んでクリックします。

そして、そのとき判断材料にしているのが検索結果に表示される「ページタイトル」と「ページ説明文」です。

Google検索結果に表示されるメタディスクリプションの説明画像

先述したように、検索結果に表示されるページ説明文を設定しているのがメタディスクリプションです。その内容によって「検索結果でのクリック率」は大きく変わります。

そして「検索結果でのクリック率」はSEOでとても重要です。

なぜかというと、SEOの最終目的は「たくさんの人にウェブページを見てもらうこと」だからです。下の一覧を見てください。

SEOの最終目的…多くの人にウェブページを見てもらう

目的達成の方法

  • 検索結果の上位に表示
  • 検索結果でのクリック率アップ

SEOの成果…お問い合わせ」や「売り上げ」などの増加

上記をみると分かるように、SEOの最終目的を達成するためには「検索結果の上位表示」だけではなく「検索結果でのクリック率アップ」も欠かせません。

したがって、SEOでは「検索結果でのクリック率」も重要という訳です。これがメタディスクリプションがSEOで重要と言われる理由です。

ちなみに、検索結果に表示されるページタイトルを設定するのはタイトルタグです。タイトルタグについては後述しています。

メタディスクリプションの書き方

メタディスクリプションのHTMLの書き方は、次のとおりです。

<meta name="description" content="ここにページ説明文を入力します" >
                        

上のコードの黄色い文字の部分に検索結果に表示したいページ説明文を記述します。ここに記述した内容が、下の画像の赤枠部分に表示されます。

Google検索結果に表示されるメタディスクリプションの説明画像

そして、メタデイスクリプションタグは <head> タグのなかに設定するというルールがありますので、最終的なHTMLのカタチは次のようになります。

<head>
                            <title>SEO対策|岐阜県大垣市のTK-CREATE<title>
                                <meta name="description" content="ここに説明文を入力します" >
                            </head>

記述する場所の覚え方は「メタディスクリプションはタイトルタグ( <title> )の下」と覚えるのがオススメです。

「WordPressでの設定方法」や「SEO効果をあげるポイント」について知りたい方は、次の記事をご覧ください。

noindex(検索回避)

「noindex」は、特定のウェブページを検索エンジンにインデックス(登録)しないように指示するためのメタタグです。

Googleサーチコンソールでnoindexタグで指定したページを確認している画面

noindex(検索回避)がSEOで重要な理由

noindexが SEOで重要な理由は、ウェブサイトの評価が下がるのを防ぐためです。

どういう事か説明します。

ウェブサイトに「価値の低いページ」が少しでもあると、検索エンジンからの「ウェブサイト全体の評価」が下がる可能性があります。

その根拠となるのが、Google公式サイトの次の記述です。

低品質なコンテンツがサイトの一部にしか存在しない場合でも、サイト全体の掲載順位に影響を与えることがあるということにご注意ください。

引用:良質なサイトを作るためのアドバイス

検索エンジンからの評価ダウンを防ぐ方法は「価値の低い」ページを登録(インデックス)しないことです。そのために設定するのが「noindex」です。

これが、noindex(検索回避)がSEOで重要な理由です。

noindex(検索回避)の書き方(HTML)

「noindex」の書き方は、次のとおりです。


    <meta name="robots" content="noindex" />
                

参考知識

meta robots(メタロボット)は、検索エンジンのクローラーの動きを制御するためのものです。

WordPress の noindex(検索回避)設定

ウェブサイトを WordPress で運用している場合は、プラグインを利用すると便利です。

ここでは「All in One SEO Pack」というプラグインを使用したnoindex(検索回避)設定方法を紹介します。

WordPressのプラグイン「All in One SEO Pack」の画像

それでは、順番に説明していきます。

WordPressのプラグイン「All in One SEO Pack」を使用した場合の「noindex」の設定方法1

①上の画像の「noindex(検索回避)」のチェックボックスをクリック。

②クリックした後に「noindex(検索回避)」のチェックボタンが下の画像のように変われば設定完了。

WordPressのプラグイン「All in One SEO Pack」を使用した場合の「noindex」の設定方法2

WordPress の noindex(検索回避)設定は以上です。

OGP設定(Facebook , Twitter)

OGP設定は、Facebook や Twitter にウェブページが表示される際のアイキャッチ画像、タイトル、ページ説明文を指定するためのものです。

OGP設定がしてあるウェブページがFacebookに表示された時の画像

↑ Facebook

OGP設定がしてあるウェブページがFacebookに表示された時の画像

↑ Twitter

OGP設定がSEOで重要な理由

OGP設定がSEOで重要な理由は、Facebook や Twitterに表示されたときのクリック率をアップさせるためです。クリック率がSEOで重要な理由は先述したとおりです。

OGP設定をしていない場合、Facebook や Twitter に表示されるアイキャッチ画像やページタイトルは「そのシステムが自動作成したもの」になります。

そのため、ページの魅力が十分に伝わらずクリック率が低くなることがあります。

OGP設定をすれば Facebook や Twitter に「自分の意図する」アイキャッチ画像やページタイトルを表示することが出来ます。

そうすれば、ウェブページの魅力が十分に伝わりクリック率が上がるという訳です。これが、OGP設定がSEOで重要な理由です。

OGP設定の書き方(HTML)

OGP設定をするためのHTMLの書き方は次のとおりです。


                <meta property="og:url" content="ページURL" />
                <meta property="og:type" content="ページ種類"  />
                <meta property="og:title" content="ページタイトル"  />
                <meta property="og:description" content="ページ説明文" />
                <meta property="og:image" content="アイキャッチ画像のURL" />
                <meta property="fb:app_id"  content="FacebookアプリID" />
        
                ここからTwitterカード
                <meta name="twitter:card" content="カード種類" />
                <meta name="twitter:site" content="Twitter ID" >
            

WordPressの OGP設定方法

WordPress「All in One SEO Pack」での OGP設定については、文章が長くなったため別の記事にしました。

詳しく知りたい方は、次の記事をご覧ください。


SNSでのウェブページの表示を確認する方法

ウェブページのOGP設定が上手くいっているかどうかは、次のウェブサイトを使用すれば簡単に確認することができます。

  • Facebook シェアデバッガー
  • Twitter「Card validator」

それぞれの使い方について順番に説明していきます。

Facebookシェアデバッガー
ウェブサイト「Facebookシェアデバッガー」

Facebook シェアデバッガーは、その名のとおり Facebook でウェブページがどのように表示されるかを確認するためのツールです。

使い方は簡単です。ページ上部にある入力欄にウェブページのURLを入力して「デバック」ボタンを押すだけです。

なお、作業をする際は Facebookアカウントにログインする必要があります。

Twitter 「Card validator」
ウェブサイト「Twitter-card-validator」

Twitter 「Card validator」は、その名のとおり Twitter でウェブページがどのように表示されるかを確認するためのツールです。

使い方は簡単です。ページ左側にある「Card URL」の入力欄にウェブページのURLを入力して「Preview card」ボタンを押すだけです。

なお、作業をする際は Twitterアカウントにログインする必要があります。

メタキーワード(meta keywords)にSEO効果はない

メタキーワード( meta keywords )にSEO効果はありません。

根拠は Google 公式サイトの次の記述です。

Googleはウェブランキングでキーワードメタタグを使用しません

我々のウェブ検索(Google.comでは、毎日何億人ものユーザーが使用している有名な検索)は、キーワードメタタグを完全に無視しています。それらは現在のところ検索のランキングに影響を与えません。

上記文章のなかに「メタキーワードは検索順位に影響を与えない」とハッキリ書いてあります。したがって、メタキーワード( meta keywords )にSEO効果はありません。

ちなみに、上記文章は Google英語サイトにある下記文章を筆者が翻訳したものです。

Google does not use the keywords meta tag in web ranking

Our web search (the well-known search at Google.com that hundreds of millions of people use each day) disregards keyword metatags completely.

They simply don't have any effect in our search ranking at present.

参考:メタキーワードの書き方

参考までにメタキーワードの書き方を紹介しておきます。


                    <meta name="keywords" content="キーワードを入力"" />
    
                    例:<meta name="keywords" content="SEO,meta,メタタグ" />
        

設定するキーワードの数は「5個前後にするべき」と以前は言われていました。

ちなみに、当ウェブサイトはメタキーワードの設定を一切していません。もう少し言うと、メターキーワードのHTMLタグ自体を記述していません。

メタタグと一緒に最適化したいHTMLタグ【2つ】

メタタグと一緒に最適化したいHTMLタグが 次の2つです。

  • タイトルタグ(title)
  • カノニカル属性(rel=“canonical”)

なぜかというと、上記 2つの記述場所がメタタグと同じ <head> タグの中だからです。

WordPressの場合も同様です。当記事で紹介した「All in One SEO Pack」というプラグインを使えば、メタタグの設定と同じ画面から上記 2つを設定する事ができます。

したがって、メタタグを設定する際は 上記2つのHTMLタグも一緒に最適化することをオススメします。

タイトルタグ

タイトルタグは、検索結果に表示されるウェブページのタイトルを設定するためのHTMLタグです(下の画像赤枠部分)。

Googleの検索結果に表示されているページタイトルを説明した画像

タイトルタグはSEOで一番重要なHTMLタグです。その理由は次の 2つ。

  • 検索順位への影響が大きい
  • 検索結果でのクリック率に影響する

タイトルタグが「SEOで重要な理由」と「HTMLの書き方」については次の記事で詳しく説明していますので、そちらをご覧ください。

カノニカル属性(rel=“canonical”)

canonical属性は「同じような内容のページ」がウェブサイトに 2ページ以上ある場合に記述するHTMLです。

具体例をあげると、通販サイトなどで「同じ商品の色違いページ」がある場合等です。

同じ商品の色違いページがある

  • カバン:トートバッグ(茶色)
  • カバン:トートバッグ(白色)
  • カバン:トートバッグ(黒色)

このような場合に「どのページをオリジナルとして扱ってほしいか」を検索エンジンに伝えるのが、canonical属性の役割です。

canonical属性がSEOで重要な理由は次の 2つです。

  • 被リンクのSEO効果が分散するのを防ぐ
  • 重複コンテンツでSEOペナルティを受けるのを防ぐ

canonical属性が「SEOで重要な理由」と「HTMLの書き方」については次の記事で詳しく説明していますので、そちらをご覧ください。

その他のメタタグは必要ない?

メタタグには、ここまでに紹介したもの以外にも色々な種類や設定方法があります。

しかし、それら全てを覚える必要はありません。

理由は、ここまでに紹介したメタタグの設定さえ覚えておけば「SEOをほぼ問題なく進めていける」からです。

したがって、ここまでに紹介したもの以外を無理して覚える必要はありません。

参考までに、Googleがサポートしているメタタグ一覧が記載されているウェブページを紹介しておきます。

よく見かけるメタタグ 2選【意味を紹介】

先ほど、当記事で紹介したメタタグ以外は覚える必要がないといいました。

しかし、ウェブページのソースコード(HTML)を見ていると「このメタタグは何だろう?」と思う事があるかもしれません。

そこで、どのページにも記述されているであろう次の 2つの意味を紹介して当記事を終わりにしたいと思います。

  • charset(キャラセット)
  • viewport(ビューポート)

それでは順番に説明していきます。

charset(キャラセット)

charsetは、HTMLを記述している文字コードをウェブブラウザや検索エンジンに伝えるためのものです。HTMLの書き方は次のとおりです


                                        <meta charset="utf-8" >
                            

charsetを記述する理由は、ウェブページが「文字化け」するのを防ぐためです。

上の例では「utf-8 という文字コードを使ってHTMLを書いています」と検索エンジンやウェブブラウザに伝えています。

ちなみに、現在ほとんどのウェブページのHTMLは「 utf-8 」という文字コードで書かれています。

viewport(ビューポート)

viewportは、ウェブページをレスポンシブデザインで制作する際に設定するものです。

もう少し言うと、viewportとCSS(シーエスエス)のメディアクエリーを組み合わせることで、ウェブページをレスポンシブデザインにする事ができます。

参考知識

レスポンシブデザイン … ウェブページのスマホ対応の手法。一つのウェブページで「スマホ・タブレット・PC」全ての端末に対応することが出来る。

viewport の HTMLの書き方は次のとおりです。


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

おわり

以上で、当記事の内容は終了です。

— スポンサーリンク— 

— — —

当記事の内容が役にたったという方は、他の方に紹介していただけると嬉しいです。

タグ:

これからブログを始めたい人にオススメの記事

トップへ戻るボタン