SEOにおいて重要な要素の一つである「meta」について

SEOにおいて重要なタグの一つが「meta」と呼ばれるタグです。通称meta要素、metaタグとも呼ばれるこのタグは、多くがサイトを構成しているHTMLのheadタグ内に記述されているため、普段目立つことはありません。

しかし、このmetaタグが果たす役割を知っておくことで、サイトのページ説明文や検索結果、さらにはクローラーへの指示など、様々なことを思い通りに指定することができます。

今回は、見えないけれど重要なタグの一つである「metaタグ」について解説します。

「meta」とは

metaとは、＜meta＞という表記のタグを使用してHTMLのhead内に記述するタグのことです。
＜meta name=“○○○” content=“×××”＞という形で表記し、○○○の部分には働きに応じたmetaタグの名前を、×××の部分にはmetaタグの名前に対応した文章やキーワードを入れて使います。

では、このmetaを使用することで、どのようなことができるのでしょうか。

そのページがどのようなページなのかをクローラーに伝える

metaタグを使うことで、このサイトがどのようなサイトなのかをクローラーに伝えることができます。

クローラーはインターネット上のサイトの情報を収集するとき、私たちの目に見える部分はもちろん、普段は目に見えないHTMLのソース部分や、ソース部分に書かれた文章などの情報も収集しています。

そのため、ソース上にしか書かれていないmetaタグで指定された要素や要望も、クローラーはきちんと読み取り、そのサイトがどのようなサイトなのかを総合的に判断しているのです。

クローラーへ様々な要望を出すことも可能

metaタグは、クローラーへサイトの情報を伝えるだけでなく、クローラーへの様々な要望を伝えるという役割も持っています。

例えば、noindexというmetaタグを設定すると、クローラーがサイトを検索結果から除外します。同様に、nofollowというmetaタグを指定すると、クローラーがページをクロールするときにページからのリンクを辿らないようになります。

noindexについては弊社の過去コラムでも詳しく取り上げています。具体的な記述例や活用法なども紹介していますので、もっと詳しく知りたいという方は是非こちらも参考にしてください。

文字のエンコード形式やレスポンシブデザインもここで指定できる

metaタグでは、サイト内の文字のエンコード形式や、レスポンシブデザインの設定なども指定することができます。サイトを訪問した閲覧者にサイトをどのように見せたいか、という狙いがあるときには便利な機能です。

特にレスポンシブデザインの設定は、SEOにも大きく関わってくる要素です。Googleは2015年4月からスマホで見やすいサイトを評価する「モバイルフレンドリー」という要素をアルゴリズムの評価基準の一つに入れています。

モバイルフレンドリーへのもっと詳しい対応については弊社の過去記事でも触れていますので、よろしければこちらも合わせてごらんください。

metaタグでなにができるのか

前項では、簡単にではありますがmetaタグの使い方について解説してきました。次は、metaタグを利用することで、具体的に何ができるのか、実際のサイトにはどのような使い方をしているのかという点について解説していきます。

クローラーへ指示を出す

metaタグの“robots”という単語のついたタグを使うと、そのサイトを巡回してきたクローラーに指示を出すことができます。

例えば、“noindex”と記述すると、そのサイトが検索結果に表示されなくなりますし、nofollowと記述するとクローラーがそのサイトのリンクをクロールしなくなります。

そして、それとは逆に、サイトを検索結果に入れてほしい場合やリンクを辿ってほしい場合、index、followという指示を出すこともできます。現在のGoogleのクローラーはデフォルトで巡回したサイトをインデックスし、リンクを辿る仕様になっているのでindexとfollowは記載する必要はないのですが、念のためトップページにこのタグを記載しているサイトもあります。

（画像引用元：https://kakaku.com/）

メタディスクリプションによるページ概要の記述

検索結果で出てきたサイトを解説する「概要」の文章の部分は、descriptionタグというmetaタグを使って好きな文章を指定することができます。

例として、弊社のページ概要がmetaタグでどのように指定されているかご紹介します。

こちらは弊社名「株式会社ペコプラ」を検索したときのGoogleの検索結果です。

赤線で囲まれた部分が、meta description（メタディスクリプション）タグを使用してページ概要を指定している部分です。この部分を「スニペット」と呼びます。

この部分の文章は、descriptionタグで以下のように指定されています。

<meta name="description" content="ペコプラのSEO対策では、Google・Yahooに正しくサイトを評価してもらうために、サイトの内部・外部対策、そして昨今特に重要視されているコンテンツの最適化をワンストップで対応、ご提案させていただきます。また、Web制作やツールの開発も行っております。">

<meta>で囲まれた部分の中でも“content”以降の文章が、検索結果でサイトが出てきたときの概要欄に出てくる文章になります。

この部分は訪問者だけでなく、クローラーも文章の内容を見ています。そのため、ユーザーが検索したキーワードが文章内にあると、太文字で表示され、ユーザーの目に止まりやすくなります。

このように、descriptionを使ってサイトの説明を入れることで、このサイトがどのようなサイトなのかということを訪問者とクローラーにスムーズに伝えることができます。

キーワードの指定

ページの内容を表すキーワードもmetaタグで指定することができます。弊社サイトの場合は、キーワードをこのように指定しています。

赤線で囲まれた部分がキーワードを指定しているmetaタグです。会社名と、業務に関連の深いSEO、ホームページ制作、システム開発などのキーワードを入れています。

ただし、このキーワードタグですが、現在は検索結果への直接の関連性はないと言われています。このタグは以前ブラックハットSEOの温床となってしまったことから、現在Googleが公式にサポートしているmetaタグの一覧の中には含まれていません。（参考URL：https://support.google.com/webmasters/answer/79812?hl=ja&ref_topic=4617741）

このタグに適当にキーワードを詰め込んでもSEOには特に意味はありませんが、もし設定する場合は重要なもののみに絞って、多くても5つくらいにしておくのが良いでしょう。

ogpタグを利用してSNSでシェアされたときの画像を指定

サイトのリンクがTwitterやfacebookなどで拡散されたときのサムネイル画像や説明文などを指定できるタグを、“ogpタグ”といいます。

ogpタグで何も指定してない状態でSNSにリンクを拡散されると、サイトのトップ画像や文章がランダムに表示されてしまうことがあります。

しかし、このタグをあらかじめ記述しておくことで、サムネイル画像や説明文を指定して表示させることができるようになります。

弊社のコラムをTwitterでシェアした場合、このようにタイトルとサムネイル画像が自動で表示されます。これは、サムネイル画像とタイトル、Twitterでの拡散形式を、以下のようにogpタグで指定しているためです。

<meta property="og:title" content="ページ重複によるSEO評価のダウンを防ぐために有効な「canonical（カノニカル）」とは | SEO対策なら株式会社ペコプラ" />（タイトル）
<meta property="og:type" content="activity" />（タイプ）
<meta property="og:url" content="https://pecopla.net/seo-column/dupilicate-canonical" />（URL）
<meta property="og:image" content="https://pecopla.net/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png" />(facebook用のサムネイル画像のURL)
<meta property="og:site_name" content="SEO対策なら株式会社ペコプラ" />(サイト名)
<meta property="og:image:secure_url" content="https://pecopla.net/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png" />（アイキャッチ画像URL）
<meta name="twitter:card" content="summary" />（Twitterのカードの形式）
<meta name="twitter:title" content="ページ重複によるSEO評価のダウンを防ぐために有効な「canonical（カノニカル）」とは | SEO対策なら株式会社ペコプラ" />（タイトル）
<meta name="twitter:image" content="https://pecopla.net/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png" />（Twitterカードのサムネイル画像）

弊社はTwitterでの表示をSummaryという形式に指定していますが、表示される画像の大きさや形式など、かなり自由に指定することができます。

SNSでリンクを拡散してもらっても、内容やサイトが一目でわからないと興味を持ってもらえないかもしれません。その点において、ogpタグは設定しておくべきmetaタグと言えるでしょう。

ビューポートタグでスマホでの閲覧性を高める

スマホでの閲覧性を高めたい場合、ビューポートタグというタグを指定しておくと便利です。

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

このタグをサイトに設置していると、アクセスしてきたデバイスの画面の大きさに合わせて、表示する際のレイアウトを自動的に調節します。

スマホの普及によって、スマホでサイトへアクセスしてくる人も増えてきています。モバイルフレンドリーを意識するのはもちろん、アクセスしてきた方に快適にコンテンツを閲覧してもらうためにも、是非設定しておきたいタグです。

サイト内の文字コードの指定

サイトを閲覧しているときに、文字化けが起きているサイトに遭遇したことは無いでしょうか。

文字化けは、文字コードを適切に設定できないことで起きてしまう現象です。サイトに文字化けが起きてしまうと、コンテンツの閲覧やクロールがスムーズにできません。

そのため、あらかじめ文字化けを防ぐために、以下のmetaタグを設定しておきましょう。

<meta charset="utf-8">

上の例のように記述しておくと、そのサイトの文字コードは「UTF-8」で常に表示されるようになるので、文字化けを防ぐことができます。

なお、サイト構築時に文字コードにシフトJISを使った場合は”utf-8 “の部分に“shift_jis“、EUCを使った場合は“euc-jp“と記述しておきましょう。

Webは基本的に「utf-8」となりますので、特別な理由がなければ「utf-8」にしましょう。

metaタグを編集するときの注意点

検索結果に指定の文章を反映させたり、クローラーへ指示を出すことができたりと非常に便利に使うことができるmetaタグですが、使い方を誤るとSEOに重大な影響を及ぼすmetaタグも存在します。metaタグを編集するときの注意点についてまとめました。

“keyword”タグにキーワードを詰め込んでも効果はない

metaタグの“keyword”タグは、以前はSEOの結果にも影響していましたが、クローラーの機能が向上した現在ではGoogleがサポートしているタグの一覧からは外されています。そのため、このタグにサイトに関連するキーワードをいくら詰め込んでもSEOに良い影響はありません。

“noindex”タグの使用には注意

もう一つ注意が必要なタグとして、“noindex”タグを解説します。このタグは先ほど述べた通り、指定したページを検索結果から除外するためのタグです。

重複コンテンツによるペナルティを避ける、会社へのお問い合わせページなどの意図しないページが検索結果のトップに出てきてしまうことを避けるなど、様々な使い道のある便利なタグではありますが、指定したページが検索結果から除外されるという仕様上、設置するページは吟味しなければなりません。

うっかりSEOの順位を上げたいページにnoindexタグを設置してしまうと、いくら効果的な対策を施しても意味がなくなってしまうので気を付けましょう。

まとめ

metaタグはソースコードを見ないと閲覧者には見えない地味なタグです。しかし、metaタグを効果的に使用することで、サイトの閲覧環境や検索結果への反映など、サイトの見え方に関わる部分を簡単に作り変えることができます。

SEO対策というとコンテンツが重視されがちですが、近年はモバイルフレンドリー対応サイトがそうでないサイトよりも優遇されるようになり、サイトの中身を読みやすい環境を整えているかという点も重視されるようになりました。読者にとって読みやすいようにサイトを整えることも、重要なSEO対策のうちの一つです。