2023.07.01

ホームページのメタタグとは？設定法を解説

ホームページにあるメタタグとは、<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>に記述しているタグの優先順位を定め、その順番で記述を行うようにしています。

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

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

まとめ

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

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

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