SEO対策「HTML文」編

HTML文にSEO対策をほどこす。

今回は、HTML文に関するSEO対策について、書いていきます。次の順番で、お話は進みます。

• HTML文の最適化は、重要なのか？
• SEO対策「HTML文」のチェックポイント8個
• 次回予告
• 関連記事
• この記事へのコメント

▲ページの先頭に戻る

HTML文の最適化は、重要なのか？

HTML文の最適化は、重要です。

なぜなら、検索エンジンは、きれいな分かりやすいHTMLコードを好むからです。

一般的に、Web標準に準ずるHTMLコードを記述すれば、より検索エンジンに好まれます。

▲ページの先頭に戻る

SEO対策「HTML文」のチェックポイント8個

自分のHTMLコードが、検索エンジンに好まれる状態か？チェックしてみましょう。

	SEOチェック項目	Check
1	画像に、alt属性は設定していますか？
2	フレームのデメリットを知っていますか？
3	<table>タグを、レイアウトに使用していませんか？
4	<table>タグを、入れ子で使っていませんか？
5	見出しタグは、正確に使用していますか？
6	CSSなどをHTML文内に記述していませんか？
7	文章は、<p>〜</p>で記述してありますか？
8	箇条書きなどで、分かりやすい文章になっていますか？

▲ページの先頭に戻る

1：画像に、alt属性は設定していますか？

検索エンジンは、画像を理解できません。画像に何が描かれているのか教えてあげる必要があります。

（1）HTMLコード例

例えば、顔写真にalt属性を付ける場合は、次のようにHTMLコードを書きます。

<img src="http://kumacrow.com/image/a.gif" alt="クマクロ（kumacrow）さんの顔写真" />

また、見出しのアイコンなど、画像の説明をしても意味がない場合は、次のように半角スペースにしたり、空のalt属性（alt=""）を書くのが一般的です。

<img src="http://kumacrow.com/image/icon.gif" alt=" " />

（2）画像のalt属性の利点

alt属性は、検索エンジンのためだけではありません。

目を不自由にされている方へ、画像の概要を伝えるお手伝いになる可能性があります。

画像の表示が何らかの理由で表示が遅れている場合に、alt属性に書かれている文字が先に表示されて、閲覧者は画像表示前に概要が分かります。

alt属性を書くことには、多くの利点があります。

（3）ブログでは？

FC2ブログでは、画像ファイルをアップロードするときに「タイトル」を入力しておくと、画像挿入時に、alt属性が設定されます。

面倒くさがらずに入力するようにしましょう。

▲ページの先頭に戻る

2：フレームのデメリットを知っていますか？

フレーム（<frame>タグ）は、検索エンジンに好まれないので、使うべきではありません。

（1）フレームの問題点

フレーム（<frame>タグ）は、メニューを左（右）側に置く場合などに、よく使います。

しかし、ページをフレーム（<frame>タグ）で分割すると、検索エンジンは、別のページと判断して、関連性をうまく理解できない可能性があります。

（2）ブログでは？

ブログの場合、フレーム（<frame>タグ）を使っているテンプレートは、まずありません。

▲ページの先頭に戻る

3：<table>タグを、レイアウトに使用していませんか？

昔はよく<table>タグを、ページのレイアウトのために使っていました。（何しろ、作成が楽な上に、崩れにくいんです）

しかし、そもそも<table>タグは、表（一覧表）を記述するためのタグです。

絶対にレイアウトに使うべきではないということはありませんが、検索エンジンには、あまり好まれません。

現在は、<div>タグをうまく使って、レイアウトするのが一般的です。

▲ページの先頭に戻る

4：<table>タグを、入れ子で使っていませんか？

<table>タグをレイアウトに使い始めると、入れ子で使ってしまうことがあります。

前述（3）の通り、<table>は、表（一覧表）のために使用するタグです。

次のように、<table>タグの中に、<table>タグを入れて使うと、検索エンジンには好まれません。

<table>

<tbody>

<tr>

<td>

<table>

<tbody>

<tr>

<td>

<p>入れ子</p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

▲ページの先頭に戻る

5：見出しタグは、正確に使用していますか？

見出しに、見出しタグ（<h1>〜<h6>）を使うと、検索エンジンは文書構造を理解しやすくなります。

また、見出しタグ（<h1>〜<h6>）の使用にあたっては、ルールがあります。正しく使うことが重要です。

（1）HTMLコード例

例えば、「世界の料理」について書いてみます。（字下げは、分かりやすくするために入れています）

<h1>世界の料理</h1>

<h2>和食</h2>

<h3>鮨（すし）</h3>

<h4>握り</h4>

<p>酢飯に魚介をのせて握ったもの。</p>

<h4>巻き</h4>

<p>具を酢飯と海苔で巻いたもの。</p>

<h3>天ぷら</h3>

<h2>中華料理</h2>

<h3>北京ダック</h3>

<h2>フレンチ</h2>

<h3>フォアグラのソテー</h3>

<h2>イタリアン</h2>

<h3>トマトソースのニョッキ</h3>

階層的に書けば良いわけです。学校の教科書などをイメージすれば分かりやすいのではないかしら。

（2）見出しタグの注意点

ただ、ちょっと注意しなければいけないことがあります。

<h1>タグが使えるのは、1ページに1回だけです。同じページに、さらに「<h1>裏世界の料理</h1>」などと書いてはいけません。

それから、見出しタグは、飛ばして使ってはいけません。例えば、<h2>和食</h2>を、<h3>和食</h3>と書いてはいけません。HTMLの文法上、誤りです。

<h2>中華料理</h2>を、<h3>中華料理</h3>にすることは、HTMLの文法上は問題ありませんが、和食の中に、中華料理が存在するような意味になってしまうので、これも誤りです。

（3）ブログでは？

FC2ブログの場合は、「新しく記事を書く」ときに入力する「タイトル」が、記事の見出しになります。

しかし、テンプレートによって、見出しタグが使われていない可能性もあるので、調べておいた方が良いと思います。

テンプレートを開いて、「<%topentry_title>」で検索してみてください。

例えば、「<h2><%topentry_title></h2>」となっていれば、<h2>タグで囲まれている見出しということです。

記事の中で、見出しを使う場合は、<h3>〜<h6>を使って書くことになります。

（4）表示サイズをCSSで変更するとスパム?

見出しタグをそのまま使うと、表示サイズが尋常ではなく、<h1>などは、とても使えるような大きさではありません。

見出しタグの表示サイズは、CSSによって調整する必要があります。

CSSによって、文字の表示サイズを変えることを、スパムではないかと心配する人がいますが、常識的に考えて、そんなことはありえません。

もし、あるとしたら、検索エンジンの仕様を設定している人のミスか乱心です。

文字を適度なサイズにすることがスパム行為になることは、ありません。SEO対策は、常識で考えることも、コツのひとつです。

▲ページの先頭に戻る

6：CSSなどをHTML文内に記述していませんか？

CSS、JavaScriptなどは、HTML文内に記述せず、外部ファイルにして呼び出すようにする方法が一般的です。

（1）ブログでは？（CSS）

FC2ブログの場合は、CSSについては、もともと外部ファイルとして呼び出す形になっています。CSSの編集は、「テンプレートの設定」で行います。

<link rel="stylesheet" type="text/css" href="<%css_link>" media="screen,tv">

（2）ブログでは？（JavaScript）

JavaScriptについては、テンプレートによるので調べておいた方が良いと思います。テンプレートを開いて、「JavaScript」で検索してみてください。

次のように書いてあれば、外部ファイルとして呼び出しています。

<script src="http://（JavaScriptファイルがある場所）/hoge.js" type="text/javascript"></script>

もし、srcの記述が無い場合は、外部ファイルとして呼び出していません。

外部ファイルを呼び出さずに、あまりにも多くのJavaScriptコードが、HTMLファイル内に記述されている場合は、検索エンジンに好まれない状況にあると言えます。

JavaScriptの場合、記述が一箇所だけとは限らないので、チェックもれのないよう、ご注意ください。

▲ページの先頭に戻る

7：文章は、<p>〜</p>で記述してありますか？

検索エンジンは、<p>〜</p>タグで囲まれている文章を好みます。

（1）<p>タグ推奨

HTMLファイルであれば、どこに文字を記述しても、ブラウザは気を利かせて、その文字を表示してくれます。

そんなこともあって、あまり気にせず文章を書くことが出来ます。改行したいときは、<br>タグを使います。書く側も見る側も、特に支障がありません。

文章を分かりやすく書くのは、難しいですね。<br>

ところが、検索エンジンは、不明瞭なものを好みません。はっきりして欲しいのです。

一般的に、文章を書く場合は、次のように文字列を<p>タグで囲みます。段落を示すタグです。改行もされます。

<p>文章を分かりやすく書くのは、難しいですね。</p>

（2）ブログでは？

FC2ブログの場合は、「改行の扱い」を「ＨＴＭＬタグのみ」にして、<p>タグで囲んで、文章を書く必要があります。

とても面倒な作業になるので、<p>タグで書く手間を厭（いと）わない人以外は、エディタの性能が向上することを期待するしかありません。

▲ページの先頭に戻る

8：箇条書きなどで、分かりやすい文章になっていますか？

検索エンジンは、箇条書きを好みます。

箇条書きにすると、要点が整理されるため、人間が文書を読む場合も、内容が分かりやすくなるので、一石二鳥です。

（1）箇条書きの利点

次のように、文章をだらだら書くと、見難い場合があります。なぜ見難いと感じるかと言えば、イメージ化しにくいからです。左脳にばかり負担をかけているわけです。

漱石の作品といえば、『明暗』、『こころ』、『門』、『坊ちゃん』、『吾輩は猫である』、『道草』、『虞美人草』などがあります。

HTMLコードで書くときは、次のようになります。

<p>漱石の作品といえば、『明暗』、『こころ』、『門』、『坊ちゃん』、『吾輩は猫である』、『道草』、『虞美人草』などがあります。</p>

それでは、箇条書きにしてみましょう。だらだらと書くよりは、整理されてイメージ化しやすくなるはずです。

漱石の作品には、次のようなものがあります。

• 『明暗』
• 『こころ』
• 『門』
• 『坊ちゃん』
• 『吾輩は猫である』
• 『道草』
• 『虞美人草』

などなど。

HTMLコードで書くときは、次のように、<ul>、<li>タグを使えば箇条書きにすることができます。

<p>漱石の作品には、次のようなものがあります。</p>

<ul>

<li>『明暗』</li>

<li>『こころ』</li>

<li>『門』</li>

<li>『坊ちゃん』</li>

<li>『吾輩は猫である』</li>

<li>『道草』</li>

<li>『虞美人草』</li>

</ul>

<p>などなど。</p>

（2）ブログでは？

FC2ブログで、簡単に箇条書きにしたいときは、高機能テキストエディタを使いましょう。

▲ページの先頭に戻る

次回予告

次回は、SEO対策「構成」編を書きます。

▲ページの先頭に戻る

関連記事

SEO対策に関連する記事を、ご紹介します。

1：ご存知かしら？

• SEO対策とは？

2：SEO対策の内部要因

• SEO対策「キーワード」編
• SEO対策「HTML文」編（この記事です）
• SEO対策「構成」編
• SEO対策「内部リンク」編
• SEO対策「その他」

3：SEO対策の外部要因

• SEO対策「被リンク」編

4：SEO対策の情報リンク集

• SEO対策に役立つサイト

▲ページの先頭に戻る

作成日：2007/10/18 更新日：2007/10/24

« 「SEO対策「キーワード」編」｜「SEO対策「構成」編」 »