- 公開日： 最終更新日：
headタグとは？記載内容やSEOに効果的なheadタグ作成の注意点
お客さまは、headタグと聞いてもピンとこないかも知れません。
headタグは、ホームページのコーディングで記述する項目になり、直接的にブラウザには表示されない内容ですが、レイアウトを整えたり、SEO効果を発揮するためには重要なタグになります。
当ページでは、headタグとは何かや、記述する内容、SEOに効果的な作成の注意点を解説します。
目次
headタグとは
headタグとは、ソースコードの<head>・・・</head>内に書かれているタグのことを言い、まれにメタ情報と言われることもあります。
headタグに記述されている内容は、ブラウザで閲覧したときには表示されませんが、間接的に、ホームページのレイアウトとデザイン、集客力に大きな影響を与えます。
headタグに記載する内容は主に以下です。
- 文字コード
- viewport
- タイトルタグ
- description
- canonicalタグ
- favicon
- OGPタグ
- CSSファイルへのリンク
- 分析ツールのタグ
もちろん、他にも、電話番号のクリックを制御するタグや検索エンジンへの指示を行うタグなどの記載を行う場合もあり、Webマスターは状況に応じて使い分ける必要があります。
headタグに記載する内容
headタグに記載するすべての内容を紹介することは不可能なので、当社のホームページ制作でよく利用するheadタグ内に記載する内容を紹介します。
文字のエンコード
<meta charset="utf-8" />
文字のエンコードを指定することで、ホームページのテキスト情報が文字化けすることを回避できます。
ホームページが文字化けしてしまうと、訪問者は書かれている内容を読むことができないので、すぐにホームページから離脱してしまいます。
また、訪問者がすぐに離脱している回数が多いホームページは、検索エンジンからユーザー満足度が低いと判断されるので、SEO効果も低下してしまいます。
そのため、headタグに文字のエンコードを記載することは必須になり、HTML5以降のコーディングを行っているホームページであれば、utf-8を指定していれば問題が起こることはありません。
コーディングについて詳しく知りたい方は、コーディングとは？のページをご覧ください。
viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
viewportとは、ユーザーが閲覧する媒体の幅ごとにホームページの表示を切り替えるためのタグです。
昨今では、パソコンだけではなく、スマートフォンやタブレットを利用してホームページにアクセスするユーザーも増えているので、ユーザーの閲覧媒体の幅に合わせた表示の切り替えが必須と言えます。
ユーザーの閲覧媒体ごとの幅に対応する方法には、スマートフォンやタブレットサイトを制作する方法もありますが、GoogleはレスポンシブWebデザインを推奨しており、レスポンシブWebデザインではviewportの設定が必須です。
多くのホームページ制作会社では、ほぼ100％がレスポンシブWebデザイン作成になるので、現在のホームページでは、ほぼ間違いなくheadタグにviewportが記述されています。
タイトル
<title>ページのタイトル</title>
タイトルとは、そのページの主題のことを指しており、書籍の題名と同じ扱いになります。
タイトルが表示されるのは、検索エンジンの検索結果や、SNSでURLが拡散されたときなどになり、ユーザーが魅力的に感じるタイトルを設定することで、より多くの訪問者をホームページに集客できるようになります。
また、SEOにおいても重要なタグになり、検索エンジンはタイトルに記述された単語がそのページで重要なキーワードになると判断しているので、適切なタイトルの記述によってSEO効果が高まります。
タイトルを実装することは、ホームページ制作会社であれば100％行ってくれていると思うので、お客さまはSEOと訪問者を考えた文言作成に力を入れることが大切になります。
タイトルについて詳しくは、タイトルタグとは？のページをご覧ください。
description
<meta name="description" content="100文字前後の要約文" />
descriptionとは、検索エンジンの検索結果に表示される2行ほどのテキストのことを言います。
headタグにdescriptionを記述することで、100％ではありませんが、検索エンジンがページの内容を見たうえでdescriptionに記述された内容がユーザー目線であると判断すると、検索結果に表示されます。
descriptionは、ページの内容を記述するタグになるので、各ページで固有の内容を記述しなくてはなりません。
Google曰く、共通のdescriptionを記述するのであれば、自動抜粋するので、なにも記述しない方がSEOとして良い結果を得られると発言しています。
descriptionについて詳しくは、descriptionとは？のページをご覧ください。
canonical
<link rel="canonical" href="ページのURL" />
canonicalとは、URLの正規化のことを言い、headタグにcanonicalを記述することによって、検索エンジンに正しいURLを伝えることができます。
一般的に、普通にホームページを運営している会社では滅多にcanonicalを利用することは少なく、その場合は各ページに自己参照canonicalを設定していると思います。
また、canonicalの導入は必須になっており、自分で1ページを作成しているつもりでも、インターネットの特性上、wwwの有無やindex.phpの有無などで異なるURLのページが量産されています。
これらは、検索エンジンのブラックハットSEOになる重複コンテンツに該当するので、canonicalを実装していないと、大きくSEO効果が落ちている可能性が高いです。
そのため、ホームページ制作時に、headタグにcanonicalを実装することは必須と言え、SEOを行っているのであれば、必ずサイト全体で実装しましょう。
canonicalについて詳しくは、canonicalタグとは？のページをご覧ください。
favicon
<link rel="shortcut icon" href="faviconのURL">
faviconとは、ブックマークやブラウザタブなどに表示させる画像のことを言います。
faviconは小さな要素ではありますが、適切に設置していくことで、ユーザーの再訪率を高めることができる可能性があります。
faviconは、小さな画像になっているので、会社のロゴサイズを変更してfaviconにすることが一般的ですが、縮小すると複雑すぎてよく分からないようなロゴの場合は別で作成しなくてはなりません。
適切に会社やホームページの内容を表すfaviconであれば、ユーザーが思い出す機会を作ることができるので、ホームページの再訪率を高めることができます。
もちろん、そこまで大きな要素にはならないと思いますが、少しでも効果が出る可能性があるので、ホームページ制作時にheadタグ内にfaviconを実装するようにしましょう。
faviconについて詳しくは、faviconとは？のページをご覧ください。
OGP
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
OGPとは、XやFacebookなどのSNSでURLが拡散された際に、ページタイトルや概要、イメージ画像、URLを含めた情報が投稿されるようにするためのタグのことを言います。
適切なOGPを設定することで、SNS上で投稿内容やリンクが目立つようになるので、より多くの見込み顧客をホームページに集客することが可能です。
こちらは制作実績の治療院のXになり、このように単にテキストだけの時と比較をすると、ユーザーの目に留まり、さらにはクリックがされやすくなっています。
昨今のホームページの集客は、検索エンジンだけに依存してはならないと言われているので、SNSを運用している会社は、headタグ内にOGPを実装するようにしましょう。
robots
<meta name="robots" content="noindex" />
robotsとは、検索エンジンのクローラーを制御できるタグになり、検索エンジンにスニペットでどのような表示をして欲しいや、検索エンジンのデータベースに該当ページをインデックスする必要があるのかを記載できるタグのことを言います。
こちらは、当サイトの問い合わせフォームの確認画面ですが、検索エンジンンの検索結果に表示させる必要がないので、noindexを記載しています。
クローラーは有限であり、クロールバジェットが定められているので、不要なページに対しては、noindexを設定しておくことで、サイト全体のクロール頻度が高まり、SEO効果が向上します。
SEOに取り組んでいるホームページであれば、検索エンジンの検索結果に出てくる必要がないページのheadタグ内にrobotsを実装するようにしましょう。
format-detection
<meta name="format-detection" content="telephone=no">
format-detectionとは、ホームページに掲載された電話番号やFAX番号は、自動的にスマートフォンやタブレットで見るとリンクが設定されており、リンクをクリックすると電話がかかる仕様になっています。
電話番号だけであれば良いのですが、FAX番号も同じ処理が行われているので、headタグ内に、format-detectionを記述して、一度すべての番号のリンクを取り電話番号だけは別でスマートフォンでリンクをクリックすると電話がかけられるようにしなくてはなりません。
そのため、Webユーザビリティを高めるためにも、headタグにformat-detectionを実装することは必須になり、実装することで、ユーザーが扱いやすいホームページへと成長します。
generator
<meta name="generator" content="All in One SEO (AIOSEO) 4.6.7.1" />
generatorとは、誰がそのページを作成したかを示すタグのことを言います。
昨今のSEOでは、E-E-A-Tを高めることが重要になるので、E-E-A-T対策の1つと言えるタグになります。
WordPressにAll in One SEOを実装したホームページであれば、generatorにAll in One SEOのバージョンが記載されるのですが、E-E-A-Tに取り組むWebマスターであれば、著者の名称に変更しましょう。
これまでさまざまなホームページに対して、headタグにgeneratorを実装してきましたが、generatorを実装したくらいではSEO効果が高まらないので、E-E-A-T対策に取り組んでいるかどうかで判断すると良いでしょう。
link
<link rel="stylesheet" media="(max-width: 767px)" href="/cssjs/style_sp.css">
<link rel="stylesheet" media="(min-width: 768px)" href="/cssjs/style.css">
linkとは、外部ファイルを読み込むためのタグのことを言います。
主に、CSSとJSファイルを指定することで、そのページにCSSやJSが反映されるので、ページの読みやすさを高めることができます。
CSSやJSを外部ファイルに記述する重要性は高いです。
すべてのデザインや動作の要素を外部ファイルに記述してlinkで読み込ませることで、ホームページの運営のしやすさの向上や、検索エンジンが適切にページのコンテンツを理解できるようになるのでSEO効果を高めることが可能です。
そのため、運営効率やSEO効果を高めたいとお考えであれば、headタグにlinkを実装しましょう。
SEOに効果的なheadタグ作成の注意点
多くの方が誤解しているSEOに効果的なheadタグを作成する際の注意点を解説します。
headタグの行数が少なくてもSEO効果は出ない
従来のSEOでは、headタグが短い方がSEOに有利と言われていました。
それは、検索エンジンのクローラーがページにアクセスした際に、上から順番にデータベースに格納しているので、headタグが長いほど、コンテンツをデータベースに格納してもらうのに時間がかかるからです。
しかし、現在の検索エンジンのクローラーは、効率よくホームページを巡回しており、headタグの情報収集効率を保ちながら、コンテンツの情報収取能力を高めています。
そのため、必要なheadタグであればすべてを記載してもSEOにマイナス影響はなく、逆に必要なheadタグ内のコードを記述しない方がSEOとしてマイナスになる可能性があります。
外部ファイルを整理してlinkの数を少なくした方がSEOに効果的
headタグ内に記述するlinkの数はできる限り減らしましょう。
linkの数を減らすというよりも、人間や検索エンジンが認識しやすいように整理された外部のCSSやJSを作成することで、検索エンジンはそのページを理解しやすくなり、SEO効果が高まります。
headタグのまとめ
headタグについて解説しました。
headタグは、ブラウザでホームページを見るだけでは、気が付かないことが多くなりますが、headタグに記述されている内容は、どれもWebユーザビリティとしても、SEOとしても重要になります。
headタグって何？とお思いの方の参考になれば幸いです。
