知っておくと役立つ!その他のmetaタグ

「必須ではないけれど、知っておくとサイトの質が一段上がる」という一歩踏み込んだmetaタグをご紹介します。

これらを適切に使うことで、特定のブラウザでの利便性が向上したり、検索エンジンへの指示をより細かくコントロールできたりします。


知っておくと役立つ!その他のmetaタグ

1. 検索エンジンへの細かい指示(robots)

「このページは検索結果に出さないで(noindex)」や「ページ内のリンクを評価しないで(nofollow)」といった指示を検索エンジンに伝えます。

  • noindex: 低品質なページや、会員限定ページなどを検索結果に載せたくない場合。
  • nofollow: そのページにあるリンク先に「信頼性(リンクジュース)」を渡したくない場合。

HTML

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

2. 電話番号の自動リンク無効化(format-detection)

iPhoneなどのSafariでは、数字の羅列を勝手に「電話番号」と判断してリンクを貼ってしまうことがあります。意図しないデザイン崩れを防ぐために使われます。

HTML

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

3. Google検索の特殊な設定(google)

Googleに対して、特定の機能を無効にするよう指示できます。

  • nositelinkssearchbox: 検索結果に表示されるサイト内検索ボックスを出さないようにする。
  • notranslate: Google翻訳の「このページを翻訳しますか?」というポップアップを出さないようにする。

HTML

<meta name="google" content="notranslate">

4. ブラウザのツールバー色(theme-color)

AndroidのChromeなどで、ブラウザのURLバーや通知バーの色をサイトのブランドカラーに合わせることができます。

HTML

<meta name="theme-color" content="#FF5733">

5. Internet Explorer向けの互換モード(X-UA-Compatible)

古いInternet Explorer(IE)で、最新の描画エンジンを使うよう指示するタグです。IEのサポート終了に伴い重要性は下がっていますが、古いサイトのメンテナンスでは今も目にします。

HTML

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

補足:以前は使われていたが、今は不要なタグ

かつては重要視されていましたが、現在は設定しなくても良い(または効果がない)タグもあります。

  • meta keywords(キーワード)かつてはSEOに必須でしたが、現在はGoogleなどの主要な検索エンジンはランキングの判断基準として無視しています。HTML<meta name="keywords" content="キーワード1,キーワード2">
  • meta rating(レーティング)成人向けコンテンツかどうかを示すタグですが、現在はあまり使われません。

まとめ表:タグの使い分け

分類タグ名目的
SEO制御robots検索エンジンにインデックスを拒否する
UX改善format-detectionスマホでの意図しない電話番号リンクを防ぐ
ブランディングtheme-colorブラウザのバーの色を指定する
Google専用google自動翻訳などの機能を制御する

metaタグは「多ければ多いほど良い」というものではありません。**「誰に何を伝えたいか」**を整理して、必要なものだけを記述するのがスマートなコーディングのコツです。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人