正しいHTMLを覚えよう～SEOバッチリなテンプレ使っても失敗するかもよ！

人気ブログのページを観察しましょうの嘘

まぁ、全く嘘という訳ではありませんが（笑）
よく、SEOやアクセスアップを主題にしたブログ（特にアフィリエイト系）に、「お手本にするブログを隅から隅まで観察しましょう」、「HTMLソースもじっくり見てみましょう」、「マネする事から始めましょう」と書いてありますね。私、その手のサイトも良く見ますが、本当にアッチにも、コッチにも、多くのサイトに書いてあります。

が！　HTML構造をマネしたり、参考にしたりする時は、、、、以下の事を知っていないと、マネして「形だけでも優秀なサイト」を作っているつもりで「とんでもなくダメサイト」を作っている場合があります（昨日までの私の事(´Д｀；)）

現在主流のHTMLは2種類ある

乱暴な書き方になってしまいますが、現在、殆どのサイトがHTML4.01 Transitional か、XHTML1.0または1.1で構成されています。

HTML4.01 Transitional の主な表記の仕方

メタタグ等
<meta name="Keywords" content="キーワード1,キーワード2">
<meta http-equiv="～～～～" content="～～～">
<link rel="～～～" href="～～～">
<link rel="stylesheet" href="～～～" type="～～～">
HTMLタグ等
改行は<br>
写真表示は<img src="～～～">、←</img>で閉じる必要ない
<input>等も</input>で閉じる必要なし
平行線は<hr>
等々。

XHTML1.0の主な表記の仕方

メタタグ等
<meta name="Keywords" content="キーワード1,キーワード2" />
<meta http-equiv="～～～～" content="～～～" />
<link rel="～～～" href="～～～" />
<link rel="stylesheet" href="～～～" type="～～～" />
↑↑全て末尾に「/」スラッシュが付く。
HTMLタグ等
改行は<br />
写真表示は<img src="～～～" />、又は<img />で閉じる。
平行線は<hr />
<BR />等と、大文字で書くと怒られる。
等々、タグの末尾を「/」スラッシュで閉じる指定がしてあるもの多数。

この辺の違いを解っていないと、「ウチのブログ、大改造してSEOバッチリになりました～！」とか宣伝しているブログのマネをしても何も効果は出ないし、例えば無料ブログで有名所でSEESAAブログには、こんなYahoo検索に強いと謳ったしかもデザインもステキな無料テンプレートが配布されていたりしますが、DOCTYPE html PUBLICを解っていないと、ブログの中身（記事）を増やして行く度に文法上間違いだらけなダメブログに成長して行く訳です。

とは言ってみたものの、SEO的効果はわからない

ここまで色々書いてみたものの、HTML4.01 TransitionalのルールとXHTML1.0のルールをごっちゃにして書いたブログも、ちゃんとブラウザは表示してくれますし、検索エンジンも巡回してくれます。色んなキーワードで上位に検索されているサイトを構文チェックしてみても、決して上記ルールを守っているとは言い難いのです。

正月にタモリやサンマがゴルフやって「英語使ったら罰金」みたいな番組ありましたが、アレと一緒で今では両者は区別が付けれない位ごっちゃになって、「使い分けろ！」と言われても、もう無理な気もします。あんまり気にしなくても良い事なのかも知れません。
とは云え、各種ブラウザや検索エンジンからしてみれば、ルー大柴の日本語みたいなものを毎日読まされ、ウンザリしているのも確かかもしれませんね。

その他、文法的に気を付けたい事

改行に使う<br>、2個以上続ける事は好ましくない。1行開けたい時は<p></p>で段落指定する。
linkタグのid属性は大文字で（link id="TOP"等）、また、<a id="TOP"></a>なんて中身が空のリンクタグを作るのも良くない。そんな時は<map id="TOP" name="TOP"></map>を代用。

一番困ったのが、<li>タグ内で一行開けたい場合。

<br>を連続させるとAnother HTML-lintさんでは「減点ですよ」と警告してくるし、色々検索したがリストタグ内で行間を開けるタグも見つからない。持っているHTMLエディタにもそれらしき機能は見つからない。仕方が無いので、テキストエディタで無理矢理<li>～</li>タグ内に<p></p>を挟んでみたらAnother HTML-lintさんには減点されなかった。構文的に大丈夫なのかもしれない。
あとは、古典的な方法だが、<br><br>と連続する部分に透明gifを挟む方法。
何か方法があるような気もしますが、今の所リストタグ内で行間を開けようと思うと、かなり苦労しそうです。

ウチもブログのテンプレ改造してみよう！と思った方へ

例えばLivedoorブログの場合、WYSIWYGエディタもコメントやプラグイン周辺のHTMLの吐き方も、大体HTML4.01 Transitional に沿っていますので、ブログのテンプレートを確認してXHTML1.0だった場合、速やかにその部分だけでも変えちゃいましょう。その方が良いですよ。

最後に

折角SEO対策としてブログの改造を行ったのだから、マイナス691点のままじゃ納得行かない！と、昨日の夕方から更にテンプレ大改造。今度はスタイルシートを改造しながらブログのレイアウトを調整する訳ではなく、Another HTML-lintさんが「ここがエラーですよ！」と教えてくれる部分を修正するだけですのでそんなに大変ではありませんでした。

（と、言ってもHTML4.01 Transitional とXHTML1.0が別物として扱われている事に気が付くまでは何が何だかサッパリわからず、修正しようにも何を修正して良いのか全然解らない状態だったのですが）

100個のエラーがありました。このHTMLは 87点です。と言う状態まで修正できました。
（まだTOPページだけですが）

さらにアフィリエイト全部外して、ライブドアから供給されているjavascriptからカウンター部分を外して、人気ランキングのバナーにスクリプト使っているのを外し、リンクタグの属性からtarget="_blank"を外せば、「32個のエラーがありましたが、このHTMLは 100点です。」のコメントが。

エラーはあれど100点です！

残ったエラーは、古いHTMLの名残りで今でも普通に使われているが、推奨されていないもの。
（<FONT>、<BR>、<IMG>、<TABLE>タグ等の属性の付け方が主 ）
この辺りまで全部直すのは面倒というか、何かしらのHTMLエディタやWYSIWYGエディタで文章を書いていれば、必ずついてまわる問題なので、お勉強はしましたが放って置きます（笑）

※注意
特に断りがない場合、HTML4.01 Transitional に即した話をしている可能性があります。その他の構文でサイトを運営している方は各自で調べた方が良いかと思います。