メタタグとは (meta tag) | SEO対策に必須なメタタグと書き方

SEOのためのメタタグ トップ画像
kaoleft

・メタタグってなに?
・メタタグの書き方は?
・SEOに必要なメタタグは?

この記事ではこういった疑問にお答えします。
SEO対策に関して学習を進めると、必ず耳にするのがメタタグです。

SEOでは様々な用語が出てきますが、メタタグは知っていればなんてことはないシンプルな要素の1つです。

 

このページでは、メタタグとはいったい何なのかといった基本的なことから書き方を紹介します。

また、SEO対策に欠かせないメタタグを、初心者の方向けにできるだけ簡単に解説していきます。

 

この記事の目的
・メタタグの基本的な役割を知る
・メタタグの書き方を知る
・SEO対策に欠かせないメタタグを知る

 

このページの内容を把握していれば、SEO対策に必要なメタタグの知識はひと通り身につけることができます。

それではゆっくり1つずつ押さえていきましょう。

 

 

1. メタタグ (meta tag) とは?

私もそうでしたが、初心者の方の場合、メタタグという言葉を聞くだけで難しそうなイメージを持ってしまいます。

覚えやすいようにまずは言葉の意味を見ていきましょう。

 

「メタ」という言葉は、よく「データのデータ」と言われます。
あるデータに関する情報と考えておけば大丈夫です。

 

「タグ」はよく耳にする言葉ですね。
例えば、洋服を買ったときについてくるタグ。
値段や生産国、材質といった情報が書かれています。

 

「メタタグ」も同じようなもので、Webサイトやページの情報が書かれているタグと覚えればOKです。

 

・メタタグの目的

洋服についているタグは購入者に対して表示しているものですね。
対して、メタタグはユーザーのためではなく、主に検索エンジンに伝えるための情報です。

後ほどお伝えしますが、ユーザーのためのタグもいくつかあります。

 

あなたのページが何を伝えたいのか、検索エンジンにどうしてほしいのかといった情報を伝えるのがメタタグの役割です。

検索エンジンに正確に情報を伝えるための機能であり、SEO対策をする上で絶対に欠かすことができません。

 

・ユーザーが見ることはない

基本的にメタタグはあなたのサイトに訪れたユーザーが見ることはありません。

ただ、ページ上には表示されませんが、見ようとすればユーザーも確認することはできます。

 

SEO対策に必要なメタタグに触れる前に、誰でもできる確認方法を知っておきましょう。

 

  

2. メタタグの確認方法

メタタグとは イメージ画像

メタタグはHTML上に記載されています。

HTML上と言っても、高度なプログラミングの知識は必要ありませんのでご安心ください。

それでは確認方法を見ていきましょう。

 

・初心者でもできるメタタグ確認方法

やることはシンプルです。

  1. メタタグを確認したいページを開く。
  2. ページ上の何もないところで右クリック。
  3. ページのソースを表示をクリック

 

たったこれだけです。

意味不明なコードが大量に出てきますが、押さえるべき場所はそれほど多くないので落ち着いて見ていきましょう。

 

・メタタグの場所

メタタグは、html上の<head>と</head>の間に記載されています。

<head> ← これはheadタグと言われるもので、ページの基本的な情報を書く場所です。

html上のメタタグ スクリーンショット

 

・meta tag の確認

目で見て探すこともできますが、ここは効率よく探しましょう。

Ctrl + F でページの右上に検索ボックスが表示されるので、「meta」と入力してみましょう。

すると、このように<meta ~ >といったコードがハイライトされます。

html上のメタタグ スクリーンショット2

これらがメタタグです。

見てわかる通り、いろんな種類のメタタグがあります。

全てを覚える必要はありませんので、SEO対策のために必要なものを押さえていきましょう。

 

 

3. SEOに必須なメタタグ

SEOのためのメタタグのリスト イメージ画像

では、確認方法が分かったところで、SEO対策に欠かせないタグを紹介していきます。

メタタグの書き方も合わせて紹介しますが、WordPressでテーマを使用している場合は、ほとんど自動で設定されているものがほとんどです。

きちんと入っているか確認をしてみてください。

 

・タイトルタグ(Title Tag)

タイトルタグは厳密にはmeta tagではありませんが、絶対に欠かせないので簡単に触れておきます。

その名の通り、そのページのタイトル情報です。
ウェブ上では以下の場所に表示されます。

  • 検索結果画面
  • ページ上のタイトル
  • ウィンドウ上部のタブ

 

必ずあなたのウェブページにも入っていることを確認しましょう。

書き方:<title>ここにタイトルを書く</title>
書く場所:<head> と </head> タグの間

WordPressを使用していれば特に気にする必要はありません。

 

・メタディスクリプション(Meta Description)

メタディスクリプションとは、検索結果画面に表示されるこの部分のことです。

メタディスクリプションの画像

メタディスクリプションは全てのページに挿入するこができ、そのページがいったい何についてのページなのかを要約して伝える枠割を持っています。

 

書き方:<meta name="description"  content="ここにページの要約を記載します" />
書く場所:<head> と </head> タグの間

 

メタディスクリプションは、検索結果の画面でタイトルの次に読まれる場所です。

簡潔にページ内容を伝え、続きを読みたいと思わせる事で、あなたのページを訪問する確率を上げることができます。

 

メタディスクリプションはSEOには直接の影響がありません。

しかし、魅力的なディスクリプションを書くことで、クリック率が上がるため、間接的にはSEOに影響してきます。

 

ここでは最低限抑えておくべきことを簡単にまとめます。

 

・120文字以内に収める

パソコンで表示される検索画面では、メタディスクリプションは約120文字まで表示されます。

 

・大事なことは前半50文字以内に収める

スマホで検索画面に表示された場合、メタディスクリプションは約50文字しか表示されません。

パソコンで検索されることを考えて120文字以内で要約をまとめつつ、スマホでの検索も考慮して前半の50文字で、最も重要な部分を伝えておくと効果的です。

 

その他、SEO効果を上げるために実践したいことは次の通りです。

・ページで狙うSEOキーワードを2~4回入れる
・それぞれのページで異なるメタディスクリプションを作成する
(同じメタディスクリプションを使い回さない)

 

ここでは重要なポイントを簡単にまとめましたが、メタディスクリプションは検索画面でタイトルの次に表示されるくらい、とても重要な要素です。

こちらの記事でSEO対策を詳しく解説していますので、記事をアップロードする前に必ずポイントを押さえておくことをおすすめします。

メタディスクリプショントップ画像 SEO

メタディスクリプションとは?SEOに効果的な書き方とNGを解説

2020-09-07

 

 

・ロボットメタタグ(Robot Meta Tag)

ロボットメタタグは、文字通りロボットのための情報です。

例えば、Googleの場合はGoogle ロボット(クローラー)への指示を出してくれるのがRobot Meta Tagです。

いくつか種類があるので1つずつ確認してきましょう。

 

Noindexタグ

Noindexタグは、Googleに「このページをインデックス(登録)しないで」という指示を出してくれます。

インデックスをしないようにするため、結果的にそのページは検索結果に表示されなくなります。

書き方:<meta name="robots" content="noindex">
書く場所:<head> と </head> タグの間

 

「え、なんでSEO対策なのに検索結果から除外する設定をするの?」

こんな疑問がでてきませんか?

 

実は、ウェブサイトにはインデックスをしない方が良いページがあります。

例えばこのようなページです。

  • コンテンツの質が低いページ
  • 重複ページ
  • サイトマップやタグページ
  • 404エラーページ

 

このようなページは、サイト全体の評価を下げかねませんので、Noindexタグを使ってインデックス登録から除外します。

 

SEO対策では珍しく、「引き算」の対策です。

重要度が低いページへのGoogleの巡回を避け、重要度が高いページに効率よくクロールしてもらうことを促します。

詳細はこちらのページで解説していますので参考にしてみてください。

noindex設定トップ画像

noindexとは?|設定方法を初心者向けにかんたん解説

2020-10-22

 

Nofollowタグ

Nofollowタグは、よくNoindexと混同されがちですが、目的が違います。

NofollowタグはGoogleロボットに辿らせたくないページやリンクに設定します。

言い換えると、Googleが辿る必要がないページやリンクです。

 

リンクをたどらせたくない場合
書き方:<a href="http://www.example.com/" rel="sponsored">ここがリンクテキスト</a>
書く場所:リンクタグ<a href>の中
ページ自体に設定する場合
書き方:<meta name="robots" content="nofollow">
書く場所:<head> と </head> タグの間

 

SEO対策を本格的にする場合、Nofollowタグもうまく利用していく必要があります。

他にどんなリンクやページに設定するべきか、といった例をこちらの記事で解説していますので、参考にしてみて下さい。

nofollowリンクトップ画像

nofollowとは?|リンク設定と使い方をやさしく解説

2020-10-17

 

・ビューポートメタタグ(Viewport Meta Tag)

Viewport Meta Tagは、レスポンシブデザインのためのタグです。

パソコンだけではなく、スマホやタブレットでも表示を最適化するためのタグです。

書き方:<meta name="viewport" content="width=device-width,initial-scale=1">
書く場所:<head> と </head> タグの間

書き方を覚える必要はありませんが、SEO対策では欠かせないメタタグです。

 

近年では、スマホの普及により、パソコンからの検索よりもスマホの検索回数が上回っています。

Googleはそれを踏まえ、スマホやタブレットにも対応しているレスポンシブ対応のページを優先的に表示することを明言しています。

 

ただ、WordPressの場合、最近のテーマであればほとんどデフォルトで入っているため、そこまで気にする必要はありません。

 

OGPタグ

OGPとはOpen Graph Protocolのことです。

これは、FacebookやTwitterでシェアされたときの見え方を指定するものです。

ページのトップ画像(サムネイル)・ページタイトル・要約など、どのような情報をシェアされたポストに表示するのかを指定することができます。

 

こちらも、最近のWordPressテーマにはデフォルトで付いているので、自分で設定する必要はありません。

念のためhtmlの記載例を挙げておきます。

書き方の例:
<meta property="og:type" content="article" />
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="ページの要約" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="サムネイル画像" />
<meta property="fb:admins" content="Facebookコンテンツ" />
<meta property="fb:app_id" content="FacebookコンテンツID" />
<meta property="article:published_time" content="投稿日" />
meta property="article:modified_time" content="更新日" />
<meta property="article:publisher" content="Facebookへのリンク" />
<meta property="og:image:secure_url" content="画像" />
<meta name="twitter:card" content="画像のレイアウト" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="ページ要約" />
<meta name="twitter:image" content="サムネイル画像" />

書く場所:<head> と </head> タグの間

 

メタキーワード

最後にメタキーワードを紹介します。
これは、ひと昔前までは必ず記載が必要で、絶大なSEOパワーを持っていたタグです。

役割はGoogle ロボット(クローラー)に、そのページがどんなキーワードに関して情報をまとめたものなのか伝えることです。

書き方:<meta name="keywords"  content="キーワード1,キーワード2" />
書く場所:<head> と </head> タグの間

 

これは、そのページがどんな単語で検索されたときに表示されたいのかを指定することができるタグでした。

しかし、Googleのアップデートによって、今ではその効果は全く無くなってしまいました。

これはGoogleの担当者も名言しています。

SEO系のプラグインを入れていると、記入する欄があり、今でも設定する人は多いです。

私も念のため入れていますが、SEOへの影響はないと考えておいて問題ありません。

 

 

4. まとめ

SEOのためのメタタグ まとめ画像

メタタグの役割がなんとなく理解できたでしょうか?

WordPressでサイトを運営しており、SEO系のプラグインを入れていれば、今回紹介したほとんどのメタタグは自動的に追加されています。

プラグイン様様です。

ただ、Noindex、Nofollowタグに関しては自分で判断して設定する必要があります。

実際に使ってみるまでは使い分けが分かりにくいタグです。

ぜひ、こちらのページを参考にしてみてください。

noindex設定トップ画像

noindexとは?|設定方法を初心者向けにかんたん解説

2020-10-22
メタディスクリプショントップ画像 SEO

メタディスクリプションとは?SEOに効果的な書き方とNGを解説

2020-09-07

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です