LINEで現役エンジニアに直接質問してみよう!登録無料

HTML meta(メタタグ)とは?書き方とSEO効果を一覧で解説!keywords、description、viewportなど

結論から言うと、<meta>タグとは、HTMLのhead内に書き、Webページの情報を検索エンジンやブラウザに伝えるためのタグのことです。

ここに属性を使って情報を入れると、「ページをインデックスさせない(検索エンジンに表示しない)」「SMSでシェアされた時の表示方法」などの設定をすることが出来ます。

あまり意識することは無いmetaタグですが、きちんと書かれていないと、検索エンジンできちんと評価されなかったり、SMSでシェアされた時に画像が表示されず、魅力が伝えられなかったりと、もったいない事になります。

この記事では、「<meta>タグとは?」から、「<meta>タグの設定方法や活用方法」を解説します。

metaタグとは?

冒頭でも言ったように、<meta>タグとは、HTMLのhead内に書き、Webページの情報を検索エンジンやブラウザに伝えるためのタグのことです。

といっても、初心者には分かりづらいと思うので、具体的にmetaタグがどのように使われ、どんな内容が書かれるのかを解説します。

metaタグは検索エンジンのために使われる

metaタグは検索エンジンが正しくページを評価するために使われます。

metaタグはブラウザのために使われる

metaタグはブラウザで画面幅を調節するために使われます。

metaタグはSMSのために使われる

metaタグはブラウザから見えない

metaタグを設定することで、どのような効果があるのか?

metaタグを使用することで、下記ような様々な効果があります。

  1. HTMLページの文字コードを指定する
  2. ブラウザの表示幅を変えることができる
  3. 検索エンジンに表示する、しないをコントールできる
  4. 検索エンジンに記事の内容を正しく評価してもらう
  5. 検索結果で表示される概要文を設定し、クリックされる率を高めることができる
  6. SMSでシェアされた時に表示の仕方を設定し、クリック率を高めることができる
  7. 検索結果に検索ボックスを表示する、しないをコントロールできる

順番に解説していきます。

metaタグの使い方

metaタグの使い方は3つあります。

下記を詳しく解説していきます。

  1. charset属性を使って文字コードを指定する
  2. http-equiv属性を使ってブラウザの挙動を制御する
  3. name属性を使ってその他の情報を設定する

charset属性を使って文字コードを指定する

HTMLページの文字コードを指定する方法です。HTML5から使えるようになりました。

この文字コード指定は<head>タグの直下に書くようにしましょう。ブラウザによっては、最初の512文字(正確には1024バイト)を読み込んで、文字コードを設定するものがあります。文字コードが適切でないと、文字化けしてしまうことがあります。

注意
  1. 文字コードの指定は、HTMLページの先頭から512文字(正確には1024バイト)以内に書くようにしてください
  2. http-equiv属性を使った<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>と併用することはできません。
  3. 文字コードは特に理由がなければutf-8を使うようにしましょう。文字コードによっては「クロスサイトスクリプティング」という攻撃を受ける可能性があります。

http-equiv属性を使ってブラウザの挙動を制御する

http-equiv属性を使って設定できるのは下記の2種類です。

  • content-security-policy
  • refresh

しかし、この属性を使用した設定はあまり行うことがありません。

property属性を使ってSNSに関する設定をする

property属性を使った設定は、主にSNS用として使われます。

SNNの表示方法やサムネイル画像の設定などに関する設定は「OGP(Open Graph Protocol の略)」で決まっていて、サイト名やサイトURLなどの基本情報を入れられるようになっています。この情報は、FacebookやTwitterなどで共同で使われます。

name属性を使ってその他の情報を設定する

その他の検索エンジン向け情報ややSNSの表示方法に関する設定はすべてこの属性を使います。Twitter固有の情報などはすべてここに含まれます。

metaタグでオススメの設定一覧

この章では、metaタグを使った設定をオススメ順に紹介します。

文字コード設定: charset

HTMLページの文字コードを指定します。特別理由が無いなら、utf-8を設定するようにしましょう。 また、このタグはheadの直下に設置する必要があります。それは、ブラウザは文字コードを認識するために、HTMLの最初の512文字を読み込んで判断するためです。

レスポンシブデザイン対応: viewport

スマホでもタブレットでも、デザインが崩れないようにするために書いておく必要があります。

メタディスクリプション: description

descriptionは、検索結果に表示された時、そのページがどういった内容のものかを端的に伝えるためのものです。

120文字程度で記事の内容を書きます。そうすれば、検索エンジン側でタイトル下に表示させることが出来ます。

このタグは必須ではありませんが、ユーザーが記事の内容を想像しやすくなることで、クリック率が増加し、検索エンジン側に良質な記事だと判断され、検索上位になる確率が高まります。無理に使う必要はありませんが、積極的に使っていきましょう。

また、設定されていない場合、google側が記事下の文章を自動的に生成生成。

descriptionについての詳しい内容は、下記が参考になります。

参考 meta descriptionとは?クリックを誘う効果的な文字数や書き方についてキーワードファインダーSEOブログ

検索結果に表示させない/リンクを巡回させない: robots noindex,nofollow

このタグを付けたページは検索エンジンに対して「このページは検索結果に表示しないでね!また、リンクの巡回もしないでね!」と伝えることが出来ます。

記事の品質が低いページや、ユーザーに取って価値のないページにつけるのがオススメです。というのも、検索エンジンは価値の無いページが多いと、サイト自体にペナルティを課して検索に載らないようにしてしまうことがあります。そうなると、せっかくいい記事を書いたとしても、検索に引っかかることはありません。

そうならないように、低品質ページには、「noindex,nofollow」を設定するようにしましょう。

低品質ページがどのようなものを指すのかは、下記の記事が参考になります。

参考 低品質コンテンツを見つける方法と対処方法についてキーワードファインダーSEOブログ

MEMO

「noindex,nofollow」の他に、「noindex,follow」というものもあります。 それは、「検索結果には表示させないけど、巡回はしてね!」という意味です。

カテゴリーページやタグごとにまとめたページは、ユーザーにとって価値のあるコンテンツが含まれないので、低品質ページになってしまいますが、リンクがたくさん貼られているので、ここを検索エンジンに巡回してもらうことで効率よくインデックスしてもらうことが出来ます。

そういう時に「noindex,follow」を使うのがオススメです。

SNS表示設定用タグ: OGP

OGPとは、「Open Graph Protcol」の略で、FacebookやTwitterなどのSMSでシェアされた時に、表示されるリンクのタイトル、画像、説明文の設定方法です。OGPを設定していない場合、SNSが勝手に画像や説明文を設定します。

IE最適化: X-UA-Compatible

このタグは、IEからページを見に来た人が、表示が崩れないように「昔の仕様のまま表示してください!」とブラウザに伝えることが出来ます。

これが登場した理由は、IE6が最新バージョンだった頃に作成されたWebページが最新のEdgeで見た時、表示が崩れてしまわないよう、「あなた(Edge)はIE6の仕様で表示してくださいね」と伝えるものです。

逆に、「IEにEdgeの仕様で表示してくださいね!」と伝えることも出来ます。まさにそれがX-UA-Compatibleの設定なのです。

IEにはとにかく最新のバージョンになってもらったほうが、Chrome、FirefoxSafari等と同じような挙動になるので、それを狙うなら使うほうがいいかもしれません。

metaタグで不要な設定一覧

キーワード: keywords

現在、keywordsを使う理由は全くありません。昔は検索エンジンが情報を見ていて、内容によっては検索上位を狙うことも出来たみたいですが、スパム的な使い方をされるケースが目立ち、現在はこのタグは全く検索エンジンから利用されていません。

むしろ、スパムページだと判断される材料になる可能性もあるので、設置しないほうが無難です。

googleサポートしている特別なタグ一覧でも、乗っていません。

参考 Google がサポートしている特別なタグGoogle

ページ自動遷移: refresh

refreshを使うと、指定秒後に指定URLに自動遷移するように設定出来ます。しかし、このタグは可能な限り使わないようにしましょう。 というのも、ページが移動した場合は「301リダイレクト」を使うべきだし、定期的にリロードするのはjavascriptで制御するべきです。

そうなると、殆ど「refresh」の使う場所はありません。refreshを使わなくても良い設計にすることが大事です。

自動翻訳拒否: notranslate

外国人がこのページにやってきた時、googleが自動翻訳をしないようにする設定です。このタグがなければ、ページを見た時に「翻訳しますか?」というボタンが表示されることがあります。

外国人をターゲットに考えていない場合、このタグは無理に設定しないほうがいいでしょう。

言語設定: language

多言語で作られているサイトでなければ設定不要です。更に、google側が自動的に言語を判定してくれるので、もし多言語で書かれるサイトであっても無理に設定する必要がありません。

著者設定: author

このWebページは誰が作ったかを表すことが出来るタグです。

この情報は簡単に偽造ができるので、2019年現在このタグは全くSEO効果がありません。手間を感じない人は付けてもいいですが、無理につける必要はありません。(むしろ、配信容量の増加のデメリットがあるかもしれません)

HTML5からこのタグは非推奨になりました。もし設定している場合は削除したほうがいいでしょう。

検索窓非表示化: nositelinkssearchbox

検索結果のページ自体に、検索窓が設置されるのを防ぐことが出来ます。検索窓があったほうが、ページの訪問者増加が見込めるので、むしろ設定することがデメリットになる可能性が高いでしょう。

その他不要なタグ

その他にも現在では設定しても意味の無い、又は設定しない方がいいタグがあります。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。