【初心者でもわかる】metaタグってなに? KROWL MAGAZINEの例を挙げながらわかりやすく解説!

WebサイトはHTMLというマークアップ言語(コード)で書かれています。その中身を見てみると、ブラウザを通してユーザーが目にする情報(コンテンツ)以外にも、適切にサービスを提供するためのさまざまな情報が書かれています。代表的なものが、metaタグ(メタタグ)です。今回はmetaタグについて解説したいと思います。

metaタグとは

meta(メタ)タグはHTMLのコードを書くタグの一つで「HTMLドキュメント自体(対象のWebページ自体)に関する情報」を書くタグです。HTMLドキュメントの<head>〜</head>の中に書くものとされ、<img>タグや<hr>タグのように、終了タグ(閉じタグ)はありません。「このページは、こんなページですよ」「こんな風に使ってくださいね」というHTMLドキュメントに関する情報を伝える役割を担っています。metaタグの要素はいろいろありますが、大きく以下の3種類に分類できます。

  • Webブラウザなどに向けたもの
  • 検索エンジンに向けたもの
  • FacebookやTwitterなどのSNSに向けたもの

KROWL MAGAZINEのトップページを例に挙げて紹介します。実際にHTMLのソースを見ながら読んでみてください。

Webブラウザなどに向けたmetaタグ

<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="format-detection" content="email=no, telephone=no, address=no"/>
<meta name="msapplication-TileImage" content="https://magazine.krowl.jp/wordpress/wp-content/themes/krowlblog/mstile.png"/>

<meta charset="UTF-8"/>

文字コードを指定するもの。「このHTMLドキュメントはUTF-8で書かれています」という意味。日本語を書く際の文字コードには「UTF-8」「Shift-JIS」「EUC-JP」などがあり、Webブラウザが文字コードを認識できないと文字化けしてしまうことがあるため、記載しておく必要があります。

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

レスポンシブデザインのWebページで必要なもの。「表示領域(viewport)については、幅はデバイスの幅(width=device-width)で、初期状態のズーム倍率は1.0倍(initial-scale=1.0)で表示してね」という内容です。

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

Internet Explorer(IE)で最適に表示させるためのもの。IEには旧バージョンで表示させる互換モードがあり、旧バージョンで閲覧すると表示崩れを起こすことがあります。「ユーザーエージェントの互換性(X-UA-Compatible)は、使用可能な最高モード(IE=edge)で表示してね」という感じです。逆にIEのバージョンを指定したければ「 content=”IE=11″」のように書きます。

<meta name="format-detection" content="email=no, telephone=no, address=no"/>

スマホ向けのブラウザには、Webページ内にメールアドレスや住所、電話番号があると、気を利かせてリンクに自動変換してくれる機能があります。その機能を制御するものです。「文書フォーマットの検出(format-detection)は、メールアドレス→やらない、電話番号→やらない、住所→やらない(email=no, telephone=no, address=no)」という内容です。

<meta name="msapplication-TileImage" content="https://magazine.krowl.jp/wordpress/wp-content/themes/krowlblog/mstile.png"/>

Windows 8、windows 10以降のスタートメニューでは、アプリやブックマークを「ピン留め」することができます。その際に使う画像を指示(content=”○○.png”)しています。msapplication-TileImageをMicroSoft社のアプリケーションのタイトルイメージと考えると覚えやすいです。

検索エンジンに向けたmetaタグ

<title>KROWL MAGAZINE - Web業界への転職に役立つメディア</title>
<meta name="description"  content="KROWL MAGAZINEは、Web業界への転職に役立つ情報を発信するメディアです。Web業界の情報や、未経験からの転職ノウハウをお届けします。" />
<meta name="google-site-verification" content="gYKPkGlkynIrABuG_1yjsqN5EdrEAWeXkVoibsW5Ydc" />

<meta name="description"  content="○○○○(ページの説明)" />

そのWebページの簡単な説明(description)を検索エンジンに伝えるもの。書いておくことで、検索結果画面の説明文の一部(スニペット)に使われることもあります。スニペットは、検索ワードごとにWebページの関連性の高い部分を抜粋し、検索エンジン側で自動生成されます。descriptionに書かれたWebページの説明がそのままスニペットとして掲載されるとは限りませんが、参考にしてくれます。
検索エンジンが検索結果を表示する際に必要とする情報としては、<title>タグも重要です(metaタグではありませんが)。Googleでは、Webページごとにユニーク(重複しない)かつ、簡潔でわかりやすいタイトルを付けるよう推奨しています。

参考:検索結果に効果的に表示されるタイトルとスニペットを作成する
https://support.google.com/webmasters/answer/35624?hl=ja

<meta name="google-site-verification" content="gYKPkGlkynIrABuG_1yjsqN5EdrEAWeXkVoibsW5Ydc" />

Webページ(Webサイト)の所有権を検索エンジンに伝えるもの。コーディングの際にGoogle Search Consoleで発行される「確認用の文字列(content要素の中身)」を記載しておくことで正しい所有者のものであると判断してもらうために必要になります。「確認用の文字列」は、大文字と小文字を区別して書く必要があります。

<meta name="robots" content="..., ..." />

Webサイトのページ群の中には、検索エンジンにクロールしてほしくないページもあります。KROWL MAGAZINEはWordPressを使用していますが、管理者用ページは検索結果画面に出してもらう必要はありません。ページごとに<meta name=”robots” content=”…, …” />(Googleの検索エンジンだけを対象にするの場合は<meta name=”googlebot” content=”…, …” />)というmetaタグを指定するか、Webサイトのルートディレクトリにルールを記載したrobots.txtを置くことで、「このWebページはインデックス登録しないでね」「このWebページからのリンクは追跡しないでね」などの指示を検索エンジンに出すことができます。

参考:KROWLのrobots.txt
https://magazine.krowl.jp/robots.txt

検索エンジンのクロール不可は「Disallow:〜」でディレクトリ単位で指定することができます。クロール不可に指定したディレクトリの中にあるけれど「このページ(プログラム)はクロールして」という例外を「Allow: 」で指定することができます。


StatCounter (https://gs.statcounter.com/search-engine-market-share/all/japan)によれば、2020年1月時点の日本国内の検索エンジンシェアは、GoogleとYahoo! Japan(Googleの検索エンジンを使用)で90%以上。Googleの仕様を押さえておけば、日本国内のほとんどの検索結果画面で自分たちのWebページがどう掲載されるか、というポイントは押さえられるでしょう。Googleが検索結果表示のためにサポートしているmetaタグについては、下記ページに解説があるので見ておいてください。

参考:Google がサポートしている特別なタグ
https://support.google.com/webmasters/answer/79812?hl=ja

FacebookやTwitterなどのSNSに向けたmetaタグ(OGP)

<meta property="og:type" content="website" />
<meta property="og:title" content="KROWL MAGAZINE - Web業界への転職に役立つメディア" />
<meta property="og:description" content="KROWL MAGAZINEは、Web業界への転職に役立つ情報を発信するメディアです。Web業界の情報や、未経験からの転職ノウハウをお届けします。" />
<meta property="og:url" content="https://magazine.krowl.jp/" />
<meta property="og:site_name" content="KROWL MAGAZINE - Web業界への転職に役立つメディア" />
<meta property="og:image" content="https://magazine.krowl.jp/wordpress/wp-content/uploads/2019/07/ogp.png" />
<meta property="og:image:secure_url" content="https://magazine.krowl.jp/wordpress/wp-content/uploads/2019/07/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@KROWL_jp" />
<meta name="twitter:creator" content="@KROWL_JP" />
<meta name="twitter:domain" content="krowl_jp" />
<meta name="twitter:title" content="KROWL MAGAZINE - Web業界への転職に役立つメディア" />
<meta name="twitter:description" content="KROWL MAGAZINEは、Web業界への転職に役立つ情報を発信するメディアです。Web業界の情報や、未経験からの転職ノウハウをお届けします。" />
<meta name="twitter:image" content="https://magazine.krowl.jp/wordpress/wp-content/uploads/2019/07/ogp.png" />

OGP(Open Graph protocol)は、FacebookやTwitterなどのSNSにWebページの情報を伝えるプロトコル。metaタグを使って「このページをシェアするときは、このイメージ画像、このページタイトル、この説明文、このURLを使ってね」という指示をしています。以下はトップページではありませんが「実際にシェアするとこんなイメージになります」という参考にしてください。

まとめ

いかがでしたか。metaタグはブラウザ上で直接目に触れることはありませんが、より作り手の意図に近い形でWebサイトを使ってもらったり、検索エンジンで見つけやすくしたりするために、とても重要なものです。metaタグにはいろいろな情報を伝えるためのmeta要素がありますが、必ずしも検索結果の順位を左右するようなものではありません。必要なものを適切に設定するように心がけましょう。

関連記事