幻冬舎ウェブマのWebマーケティング情報ブログ

Webマーケティングの基礎や参考事例をわかりやすく解説・紹介しています。

2017年6月1日

検索順位を上げるために実行すべき HTML文書構造適正化の6つのステップ

近年、Googleの検索エンジンのアップデートにより、コンテンツの内容が検索表示順位に与える影響がますます大きくなっています。つまり、コンテンツを検索結果の上位に表示させ、多くの検索流入を確保するためには、ユーザーにとってだけでなく、検索エンジンにとっても理解されやすいコンテンツでなければならないということです。

では、検索エンジンが理解し、評価してくれるコンテンツとはどのようなものなのでしょうか。

検索エンジンが理解しやすい文章構造とは

検索エンジンにコンテンツを理解し、評価してもらうには、検索エンジンにも理解できるような形式でコンテンツの内容や狙いを伝えなければなりません。その手段として用いられるのが、HTMLの文章構造の適正化です。

具体的には、以下の6つをおさえる必要があります。
1.titleタグの適正化
2.descriptionの適正化
3.h1タグの適正化
4.画像の適正化
5.パンくずリストの適正化
6.テキストの適正化

一つひとつをみてきましょう。

1. titleタグの適正化

title要素はコンテンツの看板です。検索エンジンにコンテンツの狙いを正しく理解させるための要素です。以下のポイントによって、titleタグを適正化しましょう。

1-1: 簡潔に上位表示させたいキーワードを先に記述する

例えば「不動産会社 東京」の検索ワードで上位表示させたい場合、
<title>不動産会社東京…</title>といったように完全一致させることが重要です。スペースや読点は使用せず、24文字以内でおさめます。また、記号の使用もNGです。

1-2: キーワード内で最重要キーワードを選定して、2回使用する

例えば「不動産会社」を最重要キーワードとした場合は、
<title>不動産会社東京|不動産会社の○○株式会社</title>
といったように最重要キーワード「不動産会社」を2回使用させます。

1-3: 上位表示させたいキーワードの隣接度も意識する

「不動産会社 渋谷」で検索順位の上位表示を狙う場合は、
<title>渋谷であなたにあった物件を提供する|不動産会社の○○株式会社</title>
というように「不動産会社」と「渋谷」の位置が遠いと、それぞれのキーワードの効果が薄くなります。
<title>渋谷の不動産会社|不動産会社の○○株式会社</title>
というようにキーワードは隣り合わせになるようにしましょう。

2. descriptionの適正化

続いて、meta description要素です。

meta descriptionとは、検索結果のタイトルの下に表示されるテキストです。近年、検索順位への影響が下がったといわれてはいますが、コンテンツの概要説明として表示され、クリック率に影響を与えます。しっかりと対策をしましょう。対策のポイントは以下の通りです。

2-1: 明確な情報を組み入れる

先述したとおり、descriptionは「コンテンツの概要説明」です。人間にとっても、検索エンジンにとっても理解されやすい内容にしましょう。

例えば不動産会社の場合は、特徴、場所、価格などといった情報が必要となることが想像できるでしょう。

2-2: クリックを狙うキーワードは最初の50文字以内に入るようにする

PCでの検索結果に表示される文字数は110文字程度ですが、スマートフォンでは、 50~60文字です。サイトの特性にもよりますが、近年はスマートフォンからのアクセスは無視できません。スマートフォンを意識したdescriptionを設定するようにしましょう。

2-3: コンテンツの内容をそのまま記述しないこと

descriptionはコンテンツ内容の要約です。まずコンテンツを作成し、そこから内容を抜粋するようにしましょう。当然、コンテンツに記載がないものをdescriptionに記述することはNGです。

3. h1タグ

HTML5では、h1タグは1つのコンテンツ内で複数の使用が可能です。しかし、複数の使用が可能だからといって、無計画に使用していては狙い通りに検索順位を上げることはできません。コンテンツ内にh1タグを使用する場合は必ず<section>タグ内で使用するようにしましょう。h1タグの設定では以下のポイントに留意します。

3-1: キーワードを用いて簡潔に記述する

見出しであることから、改行を伴う記述は不自然です。キーワードを用いた簡潔なキーワードを心がけましょう。

3-2: titleと同じにしない

titleは検索エンジンを意識し、h1タグではユーザーを意識するようにしましょう。titleで使用される「|」区切り線はh1タグ内では使用しません。

3-3: 画像にしない

検索エンジンの精度が上がり、画像内のテキストも判読できるようになりました。しかし、現状では画像よりもテキストの方が高く評価されます。最重要見出しであるh1タグを画像にするのは非常にもったいないことなのです。

3-4: HTMLの文字情報の中で最初に登場させる

最上位見出しであるh1タグはいわばコンテンツの「タイトル」です。
かならずページ内のテキストの最上位に記述するようにしましょう。
(悪い例)
<body>
<p>
<h1>

(良い例)
<body>
<h1>
<p>

3-5: h1+pで使用する

h1はページのタイトルです。そのすぐ下にタイトルを補足する文章(<p>)を入れることで、検索エンジンだけではなく、ユーザーの理解を促進することができます。

4. 画像の適正化

検索エンジンにとってはテキスト情報が重要ですが、テキスト情報だけだとユーザーにとっては利便性がよくありません。適度に画像を使用しましょう。

4-1: 画像ファイル名は連想しやすい名前にする

デジタルカメラやスマートフォンで撮影した画像の画像名をそのまま使用すると、そのファイル名からはどのような画像なのか想像ができません。画像のファイル名も検索エンジンによる評価に影響しますので、必ず連想のしやすいファイル名にしましょう。

例えば、渋谷のビルの外観画像だった場合は、IMG-20170430.jpgといった名前よりshibuya-building.jpgというようなファイル名にします。

4-2: altを正しく設定する

alt属性は、画像の代替テキストであり、なんらかの不具合により画像が表示されなかったときに表示されるテキストです。

画像検索でも有効になりますので、alt属性は画像の内容を正しく記述することが重要です。

(悪い例)
<img src="shibuya-building.jpg" alt="" />

(良い例)
<img src="shibuya-building.jpg" alt="渋谷1丁目の○○ビルの外観" />

アイコンのように装飾的に使用する画像は、alt属性に記述がなくても問題ありませんが、そういった装飾的な画像はなるべく背景画像として利用するようにしましょう。

4-3: 画像サイズを明記する

画像の読み込み時間を短縮させるために、サイズを明記するようにしましょう。ページ表示速度が上がり、検索エンジンからマイナス評価を得ることがなくなります。

4-4: 画像は圧縮する

画像サイズと同様、ページの表示速度を上げるために、画像は圧縮して使用しましょう。画像圧縮ツールを使用して圧縮します。

(例)TinyPing (https://tinypng.com/)

5. パンくずリストの適正化

パンくずリストとは、ユーザーが閲覧しているページがWebサイト内のどの階層・カテゴリ・位置にいるかを明示したものです。パンくずリストにより、ユーザーはWebサイト上でどこにいるかを理解することができ、他のページへの行き来が円滑になります。検索エンジンにWebサイト内を回遊させるためにも重要ですので、必ず設置するようにしましょう。

パンくずリストを設置するにあたっての注意点としては、該当ページにリンクをつけないことです。該当ページにリンクがあると不必要なクリックの原因となってしまいます。

6. テキストの適正化

テキストは検索エンジンにとって影響の大きいものです。テキストを適正化させ、検索エンジンに理解を促しましょう。

6-1: 適切な文字サイズにする

Googleは16ピクセルを基本フォントサイズとして推奨しています。行間は1.2emとしていますので、これに準ずるようにしましょう。

6-2: 背景色と文字色のバランスを考慮する

背景色に同化してしまいそうな文字色はユーザーのみならず、SEOにも悪影響を与えます。適度なコントラストにして、読みやすくしましょう。

6-3: 改行タグを多用しすぎない

見た目にこだわるあまり改行タグを多用すると、検索エンジンにとって読み取りにくいHTMLになります。また、画面サイズによっては意図しないところで改行させてしまうこともあります。

最後に

検索エンジンにコンテンツを理解させるには、細かいところまで気を配らなければなりません。既にWebサイトを運営されている場合は、一度にすべて実施しようとすると時間も労力もかかってしまいます。優先順位をつけ、計画的にWebサイト運用項目に盛り込んでいきましょう。

ブログトップへ戻る