SEO 公開日: 2020.07.19 更新日: 2023.01.24

SEOにおいて重要なheadタグの書き方タイトル、カノニカルetc

Webサイトを構成するHTMLの主構造は、<html>、<head>、<body>の３種類のタグで成り立っています。

そのうち、headタグには検索エンジン向けの情報やそのファイルに関する情報を記述します。検索エンジンに正確にコンテンツの内容を伝えるためには、headタグの内容は重要です。手間をかけて作ったコンテンツも、内容が検索エンジンに伝わらなければ評価されません。

今回はSEO内部対策の基礎であるheadタグについて、head内で使用するタグの種類やその効果をご紹介します。

この記事の目次

<head>タグとは？

headタグは、HTMLファイルのうち<head>・・・</head>で挟まれた部分を指します。ユーザーがブラウザでアクセスした際に画面上には見た目で表示されないもので、検索エンジンやブラウザに向けて記述されたソースコードになります。

一方、今見ているページのように、画面上に表示される文章や画像といったコンテンツを画面表示させる部分はbodyタグを使用します。bodyタグはHTMLファイルのうち<body>・・・</body>で挟まれた部分を指します。

headタグは、1つのHTMLファイル内で1度だけ使用します。HTML開始タグのすぐ下に置き、bodyタグと入れ替えることはできません。

SEOで重要なheadタグ内の要素

SEOにおいて重要なheadタグの要素は、主に次の7個です。この7個は必ず設置しましょう。

titleタグ

titleタグとは、名前の通りページタイトルをつけるためのタグです。titleタグ内で指定したテキストが検索エンジンの検索結果に表示されます。また、ブラウザのタブやブックマークに表示される場合もあります。
titleタグは必ず設定しましょう。

meta descriptionタグ

meta descriptionタグで指定した文章は、検索結果においてtitleタグで設定した内容の下に表示されます。meta descriptionの設定は検索結果に直接影響するわけではありません。
しかし、検索ユーザーに対して「求めている情報が含まれるコンテンツ」であることを訴求し、閲覧数を高めるために重要です。

canonical（linkタグ）

canonicalは、複数のURLで同じページにアクセスできる場合に正規URLの指定を行い、検索エンジンからの評価を統一するために使用するタグです。
検索エンジンにおいて、URLが異なるページは内容が類似していても別ページとして認識されます。そのため評価が分散し、重複ページはオリジナル性の低いコンテンツとして正しい評価を受けることができません。

例えば、PC用ページとスマートフォン用ページでURLが異なる場合などがあります。
その時はスマホ用ページのhead内に<link rel=”canonical” href=”PCページのURL” />と設定することで、PC用ページが正規URLと認識され、そのURLに評価をまとめることができます。

PC用ページとスマートフォン用ページでURLが異なる場合以外にも、httpとhttpsが混在している場合や、商品のサイズ別・バージョン別でURLが異なる場合、301リダイレクトの設定ができないサーバーを使っている場合などに使用します。

alternate（linkタグ）

alternateはPC用ページとは別にスマホ用ページがあることを検索エンジンに伝えるためのタグです。PC用とスマホ用でURLが同じ場合は、使用する必要はありません。同じ内容で異なるURLがある時に、canonicalと併用して使用されます。

meta robotsタグ

meta robotsタグは、インデックスやキャッシュなどの動作の扱いを検索エンジンに指定するためのタグです。クローラーの動作を制御し、ウェブサイトの検索結果への反映などを調整します。name属性に検索エンジンを指定し、content属性にクローラの動作を指定します。

動作の指定とタグの記入例は以下の通りです。

Googleクローラーに対してインデックス（掲載）を許可しない
<meta name=”googlebot” content=”noindex”>
リンク先のページにアクセスさせないようにする
<meta name=”googlebot” content=”nofollow”>
ページをキャッシュさせない
<meta name=”googlebot” content=”noarchive”>
検索結果にテキストスニペットや動画プレビューを表示させない
<meta name=”robots” content=”nosnippet”>

全ての検索エンジンのクローラーに対してインデックスやキャッシュなどさせたい場合は、何も設定しなくて大丈夫です。また、meta robotsタグは<meta name=”googlebot” content=” noindex,nofollow”>のように、カンマで区切って並べることができます。

prev/next （linkタグ）

prev/nextは複数のページにまたがって掲載されているコンテンツの前後関係を示すためのタグです。prev/nextを使うことで、検索エンジンに分割されたページ間の関係性を伝え、一番見せたいトップページを検索結果に表示させることができます。また、個々のページについたリンクを一連のグループとして扱うため評価の分散を防ぎ、効果的です。

最初のページには<link rel=”next” href=”http://次のページのURL” />と書きます。
2番目以降のページには<link rel=”prev” href=”http://前のページのURL” /><link rel=”next” href=”http://次のページのURL” />と書きます。
そして、最後のページに<link rel=”prev” href=”http://次のページのURL” />と書きます。

viewport設定

viewportはスマホやタブレットでの表示に対応した「モバイルフレンドリー」に必要なタグです。PCとスマホでは画面幅が違うため、PCで作ったページをそのままスマホで表示すると、縦にも横にもスクロールが必要になります。1行読むたびに左右に画面を移動するストレスは、ユーザーがすぐに離脱してしまう原因の一つです。
そのためviewportを使って、画面サイズが違ってもそれぞれ適切に表示されるようにモバイルフレンドリー化を設定します。スマホを利用した検索の増加を受け、Googleは2016年10月にモバイルファーストインデックス移行計画を発表し、モバイルフレンドリーの重要性が高まりました。モバイル向けページが評価の対象になるため、検索順位が下がらないようにするにはモバイルフレンドリーの対応が必須です。

その他headタグとして入れるべきタグ

SEOに関わる7個のheadタグ以外に、headタグ内に入れておいたほうが良い推奨タグを3つご紹介します。

文字エンコード指定

文字エンコード指定は、文字コードを指定するためのheadタグです。文字コードの指定がない場合、文字化けの原因になります。日本語を指定したいときに使われるコードは「UTF-8」「SHIFT_JIS」「EUC-JP」の3つです。

特に「UTF-8」はHTML5も推奨しているため、基本的にはUTF-8で指定するといいでしょう。

OGPタグ

OGPは「Open Graph Protocol」の略称で、SNSでシェアされたときにそのページのURLや画像、サイトの種別などを正確に表示させるためのタグです。SNS上でのリンクを魅力的に表現でき、流入数の増加が期待できます。

電話番号とメールアドレスの自動リンク制御

ブラウザによってはページ内の電話番号やメールアドレスを自動でリンクに変換してくれます。しかし、電話番号やメールアドレスでないものを誤って認識してしまう可能性があるので、自動リンク制御のタグを使用して勝手にリンクされないようにしましょう。

まとめ

headタグは検索エンジンにコンテンツの内容を伝える重要なタグです。一方で、headタグはコンテンツそのものの画面には表示されないため、チェックがおろそかになってしまいがちです。また、サイトの管理にCMSを使っている場合はheadタグの要素は自動生成され、ウェブ制作の要件から漏れてしまうこともあります。

しかしheadタグを正確に設定していないと、検索エンジンから評価されず、ユーザーにコンテンツを届けることができません。headタグはサイト運営における縁の下の力持ちのような存在です。SEOの一環としてheadタグの最適化に取り組みましょう。

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。