自然検索からの流入が増えず、狙ったキーワードの検索順位が上がらないという悩みを抱える皆様。
<head>内のタグ最適化が十分に行われていますか？手間をかけて作成したコンテンツも、その内容が検索エンジンに十分に伝わらないと、評価されにくいものです。
では、どのようにすれば検索エンジンに対してコンテンツの内容を効果的に伝えることができるのでしょうか？その答えは、SEOの内部施策を実施することです。検索エンジンに正確にコンテンツを伝えるためには、内部施策が非常に重要です。今回は、SEO内部施策の基礎である<head>内タグの基本と最適化についてご説明いたします。
Headタグって何？
Webサイトを構成するHTML文書は、<html>、<head>、<body>の3種類のタグから成り立っており、それぞれで全体の構成を定義しています。その中でも<head>はHTML文章のタイトルはヘッダ情報を記載します。SEOの内部施策の基盤となる<head>内タグの最適化は、正確に検索エンジンにコンテンツを伝えるために非常に需要となります。
ユーザーがブラウザでアクセスした際に画面上には見た目で表示されないもので、検索エンジンやブラウザに向けて記述されたソースコードになります。
head：<head>…</head>ではさまれた部分
訪問者に直接は見えないタグを入れる。訪問者がブラウザでアクセスした際に画面上には見た目で表示されないもので、検索エンジンやブラウザに向けて記述されたソースコードになります。
body：<body>…</body>ではさまれた部分
今見ているページのように、表示される文章や画像といったコンテンツを画面表示させる部分がここに書かれる。
headタグは、1つのHTMLファイル内で1度だけ使用します。HTML開始タグのすぐ下に置き、bodyタグと入れ替えることはできません。
headタグ内に入れる基本のタグの紹介と最適化のポイントを説明
headタグ内には主にtitleタグ・metaタグと・inkタグを入れます。
<metaタグ>
Webページの情報を、「Googleなどの検索エンジン」やブラウザ「Facebook、Twitterなどのソーシャルメディア」などのシステムに向けに伝えるための重要なタグです。このタグはHTMLのheadタグ内に書きます。例えば「文字コードはコレを使って！」とか「このページは検索エンジンにはインデックス（掲載）しないで！」のような指示を出します。
<linkタグ>
CSSファイルの読み込み指定をしたり、ページ同士の関係性を検索エンジンに伝えたりすることができます。
各種タグと最適化のポイント
- <title>タグ
- <meta name=”description”>タグ
- <meta name=”robots”>タグﾞ
- <link rel=”alternate”>タグﾞ
- OGPタグ
<title>タグ
<title>タグは、ページのタイトルを指定するためのタグです。このタグ内で設定した内容は、検索エンジンの検索結果画面において説明文（スニペット）として表示され、ユーザーが検索結果上でどのページにアクセスするかを決める上で重要な判断基準となります。
ブラウザでページを開いた際には、このタグの内容が表示され、またブックマークした際にも引用されることがあります。そのため、必ず設定しておくことが重要です。ページの内容を明確かつわかりやすく表現し、訴求したい内容をしっかりとタイトルに盛り込むことが、検索結果でのアクセス促進に繋がります。
point
titleタグの内容を設定する時は、ページの内容を明確にシンプルにわかりやすく表現し、訴求したい内容をしっかりと盛り込むことが重要です。そうすることで、ユーザーの目を引くことができ、クリックされやすくなります。
- 自然検索で上位表示を狙いたいキーワードを盛り込む文字数は70バイト（全角35文字）以下に収めることが必要です。
- ページでアピールしたいポイントを文字数の制限内でまとめことが大切です。
- サイト内の各ページで個別の内容になるように設定することでユーザに対し適切な情報を提供できます。
<title>タグの設定、記述方法
HTMLソースコード上のheadタグの中に、以下のように<title></title>で囲んで記述をするだけで、titleタグを設定できます。
<meta name=”description”>タグ
タグに記述された内容は、<title>と同じく検索エンジンの検索結果ページにおいて、該当ページの説明文（スニペット）として表示されます。これにより、ユーザーが検索結果を見て、ページの内容をより理解しやすくなります。
point
ページに関連するキーワードを適切に盛り込むことが重要です。これにより検索エンジンでキーワードが太字で表示され、これが適切に行われると、ページの検索順位が向上する可能性があります。
①自然検索で上位表示を狙いたいキーワードを盛り込む
②文字数は160～220バイト（全角80～110文字）が推奨されています。
適切な長さであることでスニペットが1行に収まり、他の検索結果と比較しても目立ちやすくなります。
③ページで訴求したいポイントを文字数の制限内でまとめる
ユーザーにとって重要な情報を効果的に伝えることで、クリック率が向上します。
④サイト内の各ページごとに<meta name=”description”> タグを設定し、個別の内容を反映させましょう。
<meta name=”description”>に狙いたいキーワードを盛り込むと、検索結果画面に表示される説明文（スニペット）が太字で表示されるため、ユーザーが検索結果から直接求めている情報にアクセスしやすくなる為にクリック率に影響が出ます。
<meta name=”descriptiom>の設定、記述方法
この例では、料理ブログのページに関する説明文が提供されています。検索エンジンがこのメタタグを読み取り、ユーザーが関連する検索を行った際に、検索結果に適切な説明文が表示されます。
要するに、<meta name=”description”>タグは、ユーザーが検索結果を見て、ページが提供するコンテンツを理解しやすくするための手段であり、SEOの一環として非常に重要です。
<meta name=”robots”>タグ
検索エンジンに対して「このページをインデックス（掲載）しないで！」という指示をするためのタグです。
point
低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめです。
SEOの一環として、ページのインデックスやリンクの挙動を最適化するために使用されます。適切に設定することで、検索結果の品質やサイトのパフォーマンスが向上する可能性があります。
<meta name=”robots”>の設定、記述方法
インデックスの制
<meta name=”robots” content=”noindex”>と指定することで、そのページを検索エンジンのインデックスから除外することができます。これは特定のページを非表示にしたい場合や、重複したコンテンツを避けるために使用されます。
リンクの制御:
<meta name=”robots” content=”nofollow”>を使用すると、ページ内のリンクがクローラーにたどられなくなります。これは特定のページのリンクをクローラーにたどらせたくない場合に使用されます。
ページ全体または一部の制御:
<meta name=”robots”> タグはページ全体に適用するだけでなく、特定の要素やセクションに対しても適用できます。これにより、ページ内で異なる動作を設定できます。
検索エンジンのクローラーへの指示:
このタグは検索エンジンのクローラーに対して特定の挙動を指示するため、クロールの効率性や検索
<link rel=”canonical”>タグ
SEO的にも重要なlinkタグです。
複数の内容が重複するページが生まれてしまった場合に、「これが正規のURLだよ」と検索エンジンに示すことで、検索エンジンからのページ評価が分散してしまうのを防ぐことができます。
このタグはSEOの一環として使われ、同じコンテンツが異なるURLで利用可能な場合にページの評価を向上させる手段となります。
point
WordPressで無くとも、人気のブログサービスであれば必要なlinkタグは自動で出力してくれる設定になっているはずです。とはいえ、本格的にブログやWebサイトを制作・運営していくのであれば、このページで紹介した知識は頭に入れておいて損はないはずです。
管理しやすくするために、canonicalタグは正規のページ自身にも書いておくと良いかと思います。こちらもWordPressであれば、記事ページで自動で出力してくれます。
スマホ用ページのhead内に<link rel=”canonical” href=”PCページのURL”>と書けば、PCページのURLに検索からの評価をまとめることができるのです。
<link rel=”canonical”>タグの設定、記述方法>
①ページの重複がある場合に使用：
もし同じコンテンツが異なるURLでアクセスできる場合、<link rel=”canonical”> タグを使って、どのURLが優先的であるかを指定します。
②異なるURLで同じコンテンツがある場合、それぞれのページの <head>内に<link rel=”canonical” href=”正規なページのURL”>を追加します。
同じコンテンツが異なるURLで利用可能な場合にページの評価を向上させる手段となります。
href 属性には正規なページのURLを指定します。これによって検索エンジンは、そのURLを優先的に扱います。
1.<link rel=”alternate”>タグ
異なるバージョンの同じページやコンテンツが利用可能な場合に、それを検索エンジンやブラウザに通知するためのHTMLの要素です。このタグは、主に異なる言語や異なるメディア形式（例: モバイル版、印刷版）のページを示すのに使用されます。
point
①異なる言語のページを示す
<link rel=”alternate”> タグは、同じコンテンツが異なる言語で提供される場合に使用します。例えば、英語とスペイン語の2つの言語バージョンがある場合、それぞれのページに
<link rel=”alternate” hreflang=”es” href=”スペイン語のページのURL”>のように指定します。
②モバイル版や印刷版など、異なるメディア形式のページがある場合にも<link rel=”alternate”>タグを使用します。
例えば、<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”モバイル版のURL”>のように指定します。
<link rel=”alternate”>タグの設定、記述方法
タグの rel 属性には必ず “alternate” を指定します。
href 属性には対応する異なるバージョンのページのURLを指定します。
言語バージョンを示す場合、hreflang 属性を使って言語コードを指定します。
※英語とスペイン語の2つの言語バージョンがある場合の例
検索エンジンが異なる言語やメディア形式のページを正しく理解し、適切な検索結果を提供することが期待できます。
OGPタグ
OGPは「Open Graph Protocol」の略称でOGPタグを設定するとFacebookやGoogle+などのSNSでシェアされた際に表示されるタイトルや説明文、サイトのURLや画像などさまざまな内容をリッチに見せることが可能です。
point
適切な設定でページの目的が明確になり、ユーザーの興味を引くことができます。これにより、記事が共有される可能性が高まり、より多くの人に閲覧されます。また、「いいね！」を押したユーザーの友人とも情報が共有され、ユーザーにはウェブサイトの更新情報も送信されます。
<link rel=”canonical”>タグの設定、記述方法
その他headタグとして入れるべきタグと設定
<meta charset=”UTF-8″> タグ
HTML文書内で文字エンコーディングを指定するためのメタ情報を定義するためのタグです。このタグは通常、HTML文書の<head>セクション内に配置されます。UTF-8は、Unicodeでテキストをエンコードするための標準的な方式の一つで、多くの文字をサポートしています。
point 記述方法
<meta charset=”UTF-8″> タグは通常、HTML文書の<head>>セクション内に配置されます。できるだけ早い段階で指定することが重要です！通常はDOCTYPE宣言の直後に配置します。
電話番号とメールアドレスの自動リンク制御
<meta name=”format-detection” content=”email=no,telephone=no,address=no” />
ブラウザによってはページ内の電話番号やメールアドレスを自動でリンクに変換してくれます。しかし、電話番号やメールアドレスでないものを誤って認識してしまう可能性があるので、自動リンク制御のタグを使用して勝手にリンクされないようにしましょう。
viewport設定
<meta name=”viewport” content=”width=device-width,initial-scale=1″ />
スマホ/タブレット表示にも対応した「レスポンシブデザイン」のサイトを作るためには、viewport設定タグを書いておく必要があります。
まとめ
headタグは検索エンジンにコンテンツの内容を伝える重要なタグです。
一方で、headタグはコンテンツそのものの画面には表示されないため、チェックがおろそかになってしまいがちです。また、サイトの管理にCMSを使っている場合はheadタグの要素は自動生成され、ウェブ制作の要件から漏れてしまうこともあります。
しかし、headタグが正確に設定されていないと、検索エンジンから評価されず、結果としてユーザーにコンテンツが十分に届かない可能性があります。headタグはまさにサイト運営における縁の下の力持ちのような存在です。SEOの一環として、headタグの最適化に積極的に取り組んでみましょう。
