SEO対策「HTML文」編

ブログが作りたい!最低限のSEO対策 > SEO対策「HTML文」編

SEO対策「HTML文」編

SEO対策:HTML文を、検索エンジンに好まれる状態にする。

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

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

▲ページの先頭に戻る

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属性が設定されます。

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

ファイルアップロードのタイトル

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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

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

(1)フレームの問題点

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

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

(2)ブログでは?

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

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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

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

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

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

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

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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>

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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対策は、常識で考えることも、コツのひとつです。

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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の場合、記述が一箇所だけとは限らないので、チェックもれのないよう、ご注意ください。

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

7:文章は、<p>~</p>で記述してありますか?

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

(1)<p>タグ推奨

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

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

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

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

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

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

(2)ブログでは?

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

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

SEO対策HTML編のチェック一覧表

▲ページの先頭に戻る

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対策HTML編のチェック一覧表

▲ページの先頭に戻る

次回予告

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

▲ページの先頭に戻る

関連記事

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

1:ご存知かしら?

2:SEO対策の内部要因

3:SEO対策の外部要因

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

▲ページの先頭に戻る

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

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

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

alt=" " /について

いつも お世話に なりっぱなしです。
ありがとうございます。
alt=" " /についてなんですが
最後の/って いるんですか?
/は あってもなくても いいんでしょうか?
しょうもないこと 聞いていたらすいません。

最後の「/」

こもれびさん、こんばんは。

最後の「/」は、XHTMLの場合は必須になります。
こもれびさんのところは、HTMLなので、
必須と言うわけではありません。

少し簡単にお話しすると、
世の中は、HTMLからXHTMLという書き方に
移り変わりつつあります。

XHTMLにすると、表示スピードが改善されたり、
検索エンジンの認識が良くなったりします。

ただ、IE6などでは、まだまだバグが出やすいので、
必ずしも良いことばかりではありません。

余裕があるようでしたら、
検討してみても宜しいかもしれませぬ。

ありがとうござんす。

御返事ありがとうござんした。
余裕が出てきたら、
xhtmも 勉強していきます。

プライオリティ

こもれびさん、こんにちは。
どういたしましてで、ございまんした。

余裕があれば、XHTMLにしていくのも、
宜しかろうと思います。

でも、XHTMLにしても、
特段お客様にメリットがあるわけでもありません。

コンテンツの充実などを優先する方が、
こもれびさんにとっても、
お客様にとっても良いような気が致します。

とりあえず、XHTMLについては、
忘れてしまっても良いかもしれません。

alt と title についておせーてください。

CSSの横メニューでお世話になりましたw

(X)HTMLで <img src="#" alt="#">と書いてあるのは良く見かけますが、 <img src="#" title="#">というのもたまに見かけるんですが、どちらがSEO的に都合がいいのでしょうか?

alt属性とtitle属性の比較

みのいちさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

2つの属性を比較した場合、

SEO的に都合がいい(より効果を得られる)属性は、
alt属性になります。

ですから、<img src="#" alt="#">です。


alt属性は、SEOによらず、
Web標準としても意味のあるものですので、

必須のものと考えていただく方が良いと思います。

alt属性は、画像が表示されない場合の代替となる文字列であり、
音声として読み上げられる文字列でもあります。

重要です。

alt属性がないと、どういう画像なのか?を、
検索エンジンも理解できないので、必ず付けてください。

ちなみに、ご存知かもしれませんが、title属性は、
マウスを画像の上にのせたときに表示されるツールチップです。


結局のところ、あまり難しく考えずに、
両方つけてしまうのが良いと思います。(*'‐'*)

<img src="#" alt="#" title="#">

ワタス今夜は眠れますw

やっぱり、alt属性って肝心なんですね。
勉強になりマスタ。

しかも、altとtitleを二刀流できるなんて・・・・素敵!
ありがとうございます。

イメージ検索

みのいちさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

alt属性を、ちゃんとつけておくと、画像によっては、
イメージ検索なんかにも引っかかりやすくなるものと思います。

写真やイラストがメインコンテンツの場合は、
けっこう良い流入先になるのではないかしら。

必ずしも、導線につながっていくかは、
分かりませんけれども。(´Д`;)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/79-11da0ea0
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて