ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

SEOで重要!メタタグの確認方法、書き方、使えるメタタグ 25選

SEOで重要!メタタグの確認方法、書き方、使えるメタタグ 25選

「SEOに力を入れたいが、何をすればいいかわからない」
「メタタグについて知りたい」

悩み

こういった悩みにお答えします。

目次
  1. メタタグ(metaタグ)とは
  2. メタタグ(metaタグ)の確認方法
    1. HTMLソースを見る
    2. Chrome拡張機能「META SEO Inspector」
  3. メタタグ(metaタグ)の書き方
    1. HTML
    2. WordPress
  4. メタタグ(metaタグ)一覧
    1. タイトル (title)
    2. 文字コード (charset)
    3. ビューポート (viewport)
    4. 電話番号リンク (format-detection)
    5. 説明 (description)
    6. IE向け最適化
    7. 検索エンジン向け (robots)
    8. キーワード (keywords)
    9. サムネイル (thumbnail)
    10. OGP
      1. 共通
      2. Twitter
      3. facebook
    11. PWA (Apple向けプログレッシブウェブアプリ用)
  5. まとめ

メタタグ(metaタグ)とは

メタタグは、常にhead要素内にあり、通常は文字セット、ページの説明、キーワード、ドキュメントの作成者、ビューポート設定等を指定するために使用されます。
メタデータはページに表示されませんが、以下のようなものに使用されます。

  • ブラウザ
  • 検索エンジン
  • その他のWebサービス

このブログのトップページはこんな感じです。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>(タイトル)</title>
<meta name="description" content="(説明)">
<meta name="thumbnail" content="(画像)">
<meta name="twitter:site" content="(twitterID)">
<meta name="twitter:card" content="summary_large_image">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="(色)">
<meta name="apple-mobile-web-app-title" content="(タイトル)">
<meta property="og:site_name" content="(サイト名)">
<meta property="og:title" content="(タイトル)">
<meta property="og:url" content="(URL)">
<meta property="og:type" content="website">
<meta property="og:description" content="(説明)">
<meta property="og:image" content="(画像)">

メタタグ(metaタグ)の確認方法

HTMLソースを見る

使用しているブラウザからHTMLソースを確認することができます。
Webサイトによってはファイルを圧縮してあります。
改行がなく文字壁になっていいてどこに何が書いてあるのかわからないものもあるので、ショートカットキー「Ctrl + F」で目的のmetaタグを探してください。

Chrome拡張機能「META SEO Inspector」

Google Chrome拡張機能「META SEO Inspector」を使うことで、ソールを見るよりも簡単にわかりやすく確認することができます。

META SEO inspector

通常は閲覧中に表示されない、Webページ内にあるメタデータを調べるのに役立ちます。

メタタグ(metaタグ)の書き方

基本的にはページに表示されるものではないですが、書き間違いをするとページに悪影響を与えることがあります。
ページの最上部に謎の空白行(よく見ると左端に1文字『 < 』『 " 』等ある)ができた場合は、メタタグの入力ミスの可能性が高いです。

「どうせ見えないから適当でいいや」ではないので注意してください。

HTML

HTMLファイルで直接コーディングする場合は、メタタグも直接書き込むことになります。
特にタイトルやディスクリプションはサイト内のページで重複することがないように注意する必要があります。
重複があると、公開後「Search Console」から警告があります。
タイトルの場合は、検索結果にインデックスもされなくなる可能性もあるので注意が必要です。

WordPress

WordPressであれば、「All in One SEO Pack」等のプラグインを使うことで、ページごとのメタデータを設定することができます。

All in One SEO Pack

2007年から6,500万回以上ダウンロードされた、元祖 WordPress SEO プラグイン。

メタタグ(metaタグ)一覧

タイトル (title)

厳密にはメタタグではありませんが、一番重要といってもいいタグなのでここでも説明しておきます。
ページのタイトルというのはもちろんですが、検索結果に表示されるものなので、「そのページに何が書いてあるのか」「どんなキーワードで検索されたときに表示させたいのか」がわかる適切なキーワードをタイトルに含めておく必要があります。

<title>(タイトル)</title>

文字コード (charset)

文字コード」を指定するのに必ず必要なメタタグです。
2020年時点で、「charset="utf-8"」以外に設定することはなく、「charset="utf-8"」以外を指定した場合、文字化けの原因になります。
ごくまれに、「charset="Shift_JIS"」の古いサイトがありますが、あまり気にしなくてもいいでしょう。

<meta charset="utf-8">

ビューポート (viewport)

モバイルの表示を最適化するために指定します。
PC表示のみのサイトのときは不要でしたが、レスポンシブデザインでは、「name="viewport"」を指定することは必須になっています。

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

電話番号リンク (format-detection)

特にiPhoneで、ページ内の電話番号を自動認識してリンクに変換してくれます。
ただ、リンクにしてほしくないところまで変換されてしまうので、変換させないために指定します。
必須のメタタグではないですが、コーディングしていると勝手にリンクにされて困ることが多いので、設定しておいたほうがいいと思います。

「email=no」「address=no」も指定できるようですが、これを指定していなくて困ったことは無いです。

<meta name="format-detection" content="telephone=no">

説明 (description)

タイトルと同様に重要なメタタグで、そのページがどんな内容なのかわかる説明を指定します。
descriptionに素晴らしい文章を書いたら、検索上位に表示されるわけではありませんが、ユーザーが「このサイトの内容が気になる」と思う文章を書くことでクリック率(CTR)が上がります。
descriptionを指定していない場合、検索エンジンが自動で本文から取得して表示してくれますが、ユーザーがクリックしたくなる文章になることはほぼないと思います。
また、descriptionを指定していても、何を表示するかは検索エンジンが決められてしまいます。

<meta name="description" content="(説明)">

IE向け最適化

IE向け最適化のためのメタタグです。
個人的にはこのメタタグを使ったことがないですし、このメタタグがないことで困ったことがありません。
むしろIEはそれ以外で崩れることが多いです。
一応、紹介のみです。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

検索エンジン向け (robots)

robotsは検索エンジンにインデックスさせるか、させないかを指定することができるメタタグです。
一般的にはインデックスさせたいときは特に指定する必要がなく、インデックスさせたくないときにだけ使います。

<meta name="robots" content="noindex,nofollow">

キーワード (keywords)

keywordsは検索エンジンにそのページの内容にあったキーワードを伝えるメタタグでしたが、現在の検索エンジンはもうkeywordsを見ていないので必ず設定する必要はありません。

<meta name="keywords" content="(キーワード),(キーワード),(キーワード)…">

サムネイル (thumbnail)

thumbnailはサムネイル画像を表示させるメタタグですが、必ず必要なメタタグではありません。
指定していても表示されるかどうかは検索エンジン側の判断になり、表示されないことが多いと思います。
次に紹介するOGP用に画像をつくるのであれば、メタタグを書くくらいはそんなに大変なことではないので、ついでに指定しておいて損はないのではないでしょうか。

<meta name="thumbnail" content="(画像)">

OGP

共通

SNS(facebook、twitter等)向けにページの情報を伝えるメタタグです。
SNSを重要視するWebサイトであれば、シェアされたときに画像が表示されたり、適切なページ情報を表示してくれます。
どのSNSにも共通で使えるタグと、twitter専用、facebook専用のタグがあるので、必ずすべてを設定しなくても大丈夫です。

<meta property="og:site_name" content="(サイト名)">
<meta property="og:title" content="(タイトル)">
<meta property="og:url" content="(URL)">
<meta property="og:type" content="website">
<meta property="og:description" content="(説明)">
<meta property="og:image" content="(画像)">

facebookのogp画像は1200 x 630 px 以上が推奨されているので、これに合わせてサムネイルを作成するといいと思います。
また、表示される場所等によって自動で正方形にトリミングされる可能性があるので、以下のサイトでどのように見えるか確認するといいと思います。

OGP画像シミュレータ | og:image Simulator

デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみよう!

Twitter

Twitterのアカウントを持っている場合は「twitter:site」にIDを指定します。

<meta name="twitter:site" content="@Twitterユーザー名">

「twitter:card」にはTwitterにシェアされた場合の画像の表示方法を指定します。

<meta name="twitter:card" content="カード種類">

「twitter:title」「twitter:description」「twitter:image」は、共通のogで指定していれば省略可能です。

<meta name="twitter:title" content="(タイトル)">
<meta name="twitter:description" content="(説明)">
<meta name="twitter:image" content="(画像)">

Twitterでシェアされたときにどう表示されるか、以下のサイトで確認することができます。

https://cards-dev.twitter.com/validator

facebook

<meta property="fb:app_id" content="">
<meta property="fb:admins" content="">

PWA (Apple向けプログレッシブウェブアプリ用)

以下の3つのメタタグは、Apple向けPWA用に使います。
現時点でPWAに対応したWebサイトを作るとき以外は必要ありません。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="(ステータスバーの色)">
<meta name="apple-mobile-web-app-title" content="(タイトル)">

まとめ

メタタグ(metaタグ)について紹介しました。
メタタグを適切に設定することで、ページの情報を検索エンジンやSNSで良い効果が得られます。