セブンデザイン 成果を追求した大阪のホームページ制作会社

  • 2023.07.01

ホームページのメタタグとは?設定法やGoogleがサポートしているメタタグ

ホームページにあるメタタグとは、<head></head>に記述されるHTMLタグのことを言い、訪問者が目にする機会はありませんが、ブラウザやサーチエンジンに対する指示になるコードのことを言います。

一般的に、訪問者だけではなくお客さまもメタタグを意識することはありませんが、適切なメタタグの実装は、ホームページのレイアウト崩れへの対策やサーチエンジンからの評価を高めることができます。

当ページでは、メタタグとは何かや、メタタグの設定法について解説します。

メタタグとは

メタタグとは、成果が出るホームページを制作するための重要な要素の1つです。

メタタグは、訪問者には見えない要素になっているので、お客さまがホームページを確認したとしても、メタタグに何が書かれているかを知ることができず、メタタグを確認するためには、ソースコードを表示して、<head></head>内にある<meta name="〇〇" content="〇〇" />の箇所を閲覧すると、どういった記述が行われているのかを知ることができます。

メタタグを適切に記述することによって、サーチエンジンやブラウザへの指示が行えるようになるので、レイアウト崩れの問題を解消したり、サーチエンジンからの評価を高めることができるようになります。

例えば、サーチエンジンに対しては、meta descriptionを記述すれば、検索結果で適切な文言を表示できるので、検索結果でのクリック率が向上したり、canonicalを記述すれば、URLをまとめることができるので、サーチエンジンの評価の分散を防ぐことが可能です。

また、ブラウザに対しては、viewportを最適化することで、パソコンとスマートフォンでそれぞれ最適なレイアウトのホームページが表示されるようになります。

このように、訪問者からは見えない箇所にあるメタタグですが、ホームページ制作においては重要な要素になっています。

では次に、どのようにメタタグを設定していくのかを紹介します。

メタタグの設定法

メタタグに記述する内容は膨大にあるので、当ページでは書き方と記述場所を紹介します。

書き方

メタタグの記述方法は、そこまで複雑なものではなく、一般的な記述法は、<meta name="種類" content="内容">という形式になります。

例えば、meta descriptionを設定する場合には、<meta name="description" content="こちらのホームページは、メタタグの効果的な利用方法について紹介しています。">という記述を行います。

さらに詳しくmeta descriptionについて調べたい方は、meta descriptionとはのページをご覧ください。

話を戻し、メタタグの記述法は、meta nameの後ろに、どのようなメタタグを書くのかを記述して、contentの後ろに、その内容に記述すれば正確にブラウザもサーチエンジンも認識することが可能です。

また、メタタグの書き方ではありませんが、一部のメタタグはサーチエンジンが認識を辞めているケースがあり、それがメタキーワードタグです。

従来は、サーチエンジンはメタキーワードタグを確認して検索順位を決定していましたが、スパムを行うホームページが多くあったので、現在では無視しています。

メタキーワードの詳細は、メタキーワードとは?のページがあるので、こちらからご覧ください。

このようにメタタグは時代の変化とともに利用されるものとされないものが存在しているので、メタタグを記述する方は、現在有効なメタタグを把握しなくてはなりません。

記述場所

メタタグの記述場所は、<head></head>内になります。

メタタグは、<head></head>内であれば、ブラウザもサーチエンジンも正しく認識することができるのですが、当社ではメタタグに優先順位を定めた記述法を行っています。

例えば、<head></head>内でもっとも大切になるのは、タイトルになり、その次に大切なのはmeta description、次にcanonicalというように、<head></head>に記述しているタグの優先順位を定め、その順番で記述を行うようにしています。

昨今のブラウザもサーチエンジンも高機能になっているので、書き順がホームページに与える影響はありませんが、昔はブラウザもサーチエンジンも今ほど高い技術力ではなかったので、通信環境が良くなければ読み込みミスが発生する恐れがありました。

現在でも、極端に通信環境が悪い箇所などであれば、読み込みミスが発生する恐れがあるので、必ずではありませんが、意識してメタタグごとに記述する場所を定めた方が良いでしょう。

Googleがサポートしているホームページのメタタグ

Googleがサポートしているホームページのメタタグを紹介しますが、Googleが公式で紹介しているページを見る場合はこちらのページからご覧ください。

meta description

<meta name="description" content="・・・">

meta descriptionを実装することで、検索結果でタイトルの下に表示される2,3行のテキストを指定することが可能です。

ただし、ユーザーの検索ワード次第では、Googleがmeta descriptionに設定した文言に関連性がないと判断すると、Googleが該当ページのテキストを自動抜粋しています。

SEO効果を高めたいホームページでは、meta descriptionの作成は必須になっており、適切にページの内容を要約して、ユーザーに魅力的であれば、検索結果でのクリック率を高めることが可能です。

制作実績で、meta descriptionを実装していなかったホームページが、全ページにmeta descriptionを実装しただけで、検索順位こそ変わりませんでしたが、訪問者数を増やすことに成功しているので、SEOに取り組んでいる企業は、必ず実装しましょう。

ロボットメタタグ

<meta name="robots" content="・・・">

ロボットメタタグとは、Googleのインデックスを制御する際に役立ちます。

followやindexを設定しているホームページを見かけますが、followやindexを記述するのであれば、ロボットメタタグがないほうがソースコードを少しだけ軽量化することが可能です。

必要になるのは、noindexになっており、例えば、問い合わせの確認やサンクスページなど、サーチエンジンが認識しなくても良いページに対して、noindexを付与することで、万が一GoogleがページのURLを見つけても、認識されることがありません。

昨今のホームページ制作では、インターネットに公開したページはGoogleに認識してもらうことが重要なので利用機会は少なく、メールフォームの確認やサンクスページに実装するだけのメタタグになっています。

サイトリンク検索ボックス

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

Googleの検索結果で、サイト内検索ボックスを表示させないメタタグです。

Googleの検索結果には、タイトルリンクや重要度が高い関連ページへのリンク以外にも、サイト内検索ボックスが表示されることがあります。

一般的に、多くのホームページでは、Googleの検索結果にサイト内検索ボックスが表示されても問題がないと思うので、実装される機会がほとんどないメタタグになります。

言語

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

ユーザーとホームページの言語が異なり、Googleが自動的に翻訳しないようにするメタタグです。

Googleがページの言語がユーザーの利用言語と違うと認識すると、検索結果には、Google翻訳されたページタイトルやmeta descriptionが表示され、さらには自動的にリンク先のページもGoogle翻訳が行われてしまいます。

一般的には、1つのドメインで複数言語のページを作成している場合に発生するので、一般的なホームページ制作であれば、サイト全体で日本語をターゲットにするので、利用する必要がないメタタグです。

そのため、1つのドメインで多言語のページを作成している場合のみ、Googleに翻訳されてしまう可能性があるので、言語のメタタグの実装が必要です。

テキストの読み上げ

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

Googleアシスタントなどのテキスト読み上げサービスが、勝手にホームページの原稿を読み上げないようにするメタタグです。

アクセシビリティの観点から、ホームページは、テキスト読み上げサービスへの対応が重要になりますが、サイトの種類や目的によっては、読み上げられると、ユーザー煩わしいと感じてしまうこともあります。

ただ、一般的には、読み上げられたとしても、大きな影響はないので、あまり記述することがないメタタグになっており、どうしても読み上げられたくない場合のみ実装しましょう。

Googleサーチコンソール

<meta name="google-site-verification" content="・・・">

Googleサーチコンソールを実装する際に利用するメタタグです。

ただ、昨今のホームページ制作は、WordPressを実装することが多く、プラグインで対応するケースが多いので、Googleサーチコンソールのメタタグを記述する例は少ないと思います。

さらに、Googleサーチコンソールはファイルのアップロードでも実装することが可能になり、利用されるケースはほとんどないと思います。

静的HTMLで制作しているホームページで、ファイルのアップロードをしたくない場合のみに利用されるメタタグと言えます。

文字エンコーディング

<meta http-equiv="Content-Type" content="・・・; charset=・・・">

すべてのホームページで実装しているメタタグです。

Googleが推奨する文字エンコーディングはUTF-8になっており、インターネットに公開されているホームページの90%がUTF-8を採用しているそうです。

転送

<meta http-equiv="refresh" content="・・・;url=・・・">

ユーザーを転送することができるメタタグです。

旧ページから新ページへと転送設定を行っているホームページは多いと思いますが、メタタグで対応するのではなく、.htaccessで対応しているホームページが大半だと感じ、転送メタタグを利用することはほとんどないと思います。

なぜ、多くのホームページがメタタグでの転送を行わないかと言うと、メタタグでの転送はSEO効果の引継ぎができないからです。

さらに、メタタグに転送を記述するということは、ページを削除した場合の転送ができないことを意味しているので、利便性から.htaccessが主流の転送方法になっています。

ビューポート

<meta name="viewport" content="・・・">

レスポンシブデザイン作成を行っているホームページでは必須のメタタグです。

ビューポートメタタグでは、スマートフォンの横幅を指定することで、その幅より広い場合はパソコンサイトを、狭い場合はスマホサイトを表示させることができます。

昨今のホームページは、パソコンだけではなく、スマートフォンにも最適化することが当たり前になっているので、必ず実装すべきメタタグと言えます。

アダルトサイト

<meta name="rating" content="adult">

性的表現を含むホームページでは必須のメタタグです。

アダルトサイトのメタタグを含めると、Googleのセーフサーチの検索結果に表示されなくなります。

アダルトサイト運営者は、少しでもアクセス数を稼ぐために、セーフサーチの検索結果にも表示させようと考えて、アダルトサイト用のメタタグを入れない方が良いと思われるかもしれません。

入れなかった場合は、必ずどこかのタイミングで、Googleにばれてしまい、検索結果から除外されるので、アダルトサイトを制作する場合には必須のメタタグと言えます。

まとめ

ホームページのメタタグの設定法を紹介しました。

メタタグは、訪問者が目にする機会はほとんどありませんが、サーチエンジンやブラウザに情報を伝えることができるので、ホームページから成果を出すためには必須のタグになっています。

ホームページ制作の勉強中で、メタタグについて調べている方の参考になれば幸いです。