W3C勧告の書式（DTD)とSEO

ドキュメントタイプについて解説したページ。インターネットが世界中に広まり、様々なアクセス環境や地域が相互接続されるようになりました。W3Cでは例えばHTTP通信の仕組みなど、インターネットで使われる様々な規格を制定しており、現在も新規格の協議が続けられています。インターネットは世界中の人々がW3C勧告に従っているからこそ成り立っているのです。

SEO対策 ASY!初級SEO対策中級SEO対策オフページ最適化 XMLサイトマップ SEO対策テンプレート SEM 上位表示実験定番サイトとリンク

- Outline -
初級SEO対策
- Constructions -
W3C勧告とDTD書式
静的と動的ページ
動的ページをindex
フレームとiframe
SEOとスタイルシート
- KeyWords -
キーワードの選び方
予想と結果の違い
密度と近接度の知識
見出し要素の使い方
論理強調の使い方
- Robots -
robots.txtの書式
ロボット対策メタタグ
- Others -
ステータスコード
404ページの作成
被リンク対策
XMLサイトマップ

Yahoo Google Live Search のSEO対策ならASYで何でもわかる！

W3CのDTDとSEOの関係

W3Cという機関がインターネットの仕組みを決定している。ホームページの通信規格であるHTTP（Hypertext Transfer Protocol）を初め、HTMLやXMLやCSSもW3Cの決めた規格。

W3Cは正式にはThe World Wide Web Consortiumといい、そこで決定された規格をW3C勧告という。ウェブサイト作成ではW3C勧告に従った作業が求められるが、勧告文書自体は大変詳細かつ広範囲な規定であるために直接参照することは一般的ではありません。
　そこで簡単な解説を行い、HTMLやホームページの仕組みを頭に入れてからSEO対策に進みたいと思います。

W3C準拠だから人に優しいページが作れる

SEOの目的はより多くのビジターを呼び込む事。W3C勧告に沿ったページならば、どんな訪問者でも受け入れる事が出来、最大の閲覧機会を与えます。

アクセシビリティーの確保が目的

クローラーはDTDチェッカーではありません。ロボット型検索エンジンの重視するポイントはリンクやテキストの重要度や関連付けなどに偏っています。

　つまり、W3C勧告準拠は検索順位を上昇させる要素ではないのです。

　しかし誤ったHTMLコーディングでページ内容を見れなかった場合は誰が損害を受けるのでしょうか。ビジターがコンテンツを見れなくて他のウェブサイトへ行ってしまったら皆さんはどうしますか。

ウェブサイトは運営目的にかかわらずOSやブラウザの違いを吸収して快適に閲覧されるようにすべき。その為にW3Cの決まりを守ったページ作りを推奨したいと思います。

SEOを目的にしない

現実にはDTDチェックで赤点を取るようなサイトでもSERPｓで上位に食い込む事は可能。ではW3Cなど無視してもOK？ではありません。
　あなたがSEO業者でないならSEOは単なる手段、ウェブサイト運営の過程でしかありません。オープン時の、「訪問者が満足できるウェブサイトを運営する」という目的を決して忘れないで下さい。W3C準拠は、上位表示された後に訪問者をもてなすために目指すべきものなのです。

英語とW3C勧告の関係

W3C勧告の原文は英語文書ですが、有志ボランティアによるW3C勧告日本語訳が公開されており大変便利です。長文でもあり翻訳者諸氏のご苦労は大変なものだったと思います。皆さんもHTMLやSEOを理解する為に是非読んで下さい。

　ところで、勧告を本当に理解するには原文も参照すべきです。それは、例えば引用文を表す<blockquote>と<cite>の違いに英語としての違いが反映されている等、HTML自体が英語を元にして決定されている背景があるからです。

もっとも、ASY!では皆さんに分かり易く解説して行きますので英文を読む必要はありません。ただ、「何故そうなのか」と考える時に英語の意味を探してみるのは、理解を深めるのに大変有効です。

ASY！の各ページでは、W3C勧告では・・という解説を所々に書いてあります。皆さんもウェブサイトを作成したりSEO対策を実施する時に、W3C勧告に合致しているかどうか考えるようにして頂きたいと思います。

HTMLとXHTMLの構造

DTD (Document Type Definition)。文書の構造を定義するもので文書型定義ともいう。文書の冒頭にDTDを宣言するとか段落は<p>で表すとかを定義しています。以下に使用を推奨されているDTDを紹介します。

要素と属性の定義確認

W3C勧告日本語訳の中に便利な [ 要素索引 ] と [ 属性索引 ] が有るので、必要に応じて閲覧して下さい。

DTDの種類

HTML 4.01

最初のHTMLである1.0から改良されてきた規格。 4.01はスタイルシートの積極的導入により主に旧来の修飾用要素が使えない。従来の欠点の修正、国際化、アクセス性の向上等の盛り込みが特徴となっています。
　HTML 4.01には3種類(strict,transitional,frameset)のDTDがあり、文書の初めに宣言する事でどれを使うか明示します。

XHTML 1.0

HTMLにXMLを取り込んだXHTML1.0はHTML4.01を拡張したもので最初のXHTML規格です。 XHTML1.0には 3種類(strict,transitional,frameset)のDTDがあり、文書の初めに宣言する事でどれを使うか明示します。

XHTML 1.1

XHTML1.0の機能をモジュール化したバージョンで、strict以外は廃止された。モジュールXHTMLともいうこれからの規格。

HTML 4.01と3種類のDTD

HTML4.0は将来に渡って互換性を宣言されている。HTML4.01のDTDには3つの種類があり、ファイル冒頭で宣言する事で好みに応じたタイプを使用することが出来ます。ストリクト以外は旧来の要素も使えたりして移行しやすいのではないでしょうか。

〔HTML4.01の3つの類型(DTD)と対応する宣言〕

横着をして<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">で済ませる事は出来ません。DTD宣言は必ず最後まで書き、１字1句間違わないようにして下さい。
　 DTD名のハイパーリンクをクリックすると公式文書を開きますのでちょっと見て下さい。このように事細かに決められているのでいい加減では済まないのを理解できたらOKです。

HTML 4.01 Strict DTD

厳密型。推奨しない要素や属性を含まずフレームもサポートしない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD

移行型。上記の厳密型の全てに加え、推奨しない要素や属性も含む。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

フレームセット型。移行型の全てに加えフレーム対応を含める。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

〔SEO対策にはストリクト〕

積極的にSEO対策を行なうサイトではフレームや旧来の要素の使用は避けるでしょう。そのような目的には余計な要素に留意する必要の無いHTML 4.01 ストリクト(HTML 4.01 Strict DTD)を推奨します。

　制約が多く利用可能な要素の種類も少ないから「アレコレ悩まなくていい」し、要素を効果的に配置するテクニックを身に着けるにも数が少ないのは覚えやすい利点があります。

検索エンジンのアルゴリズム変更は宿命的なものなので上級者になってもその時のバグ技的なものには手を出さない方が賢明といえます。そのためにもHTML 4.01ストリクトの正しい用法を覚えておけば間違いありません。

〔サードパーティー製ソースも使うならtransitional〕

HTML 4.01 ストリクト(HTML 4.01 Strict DTD)は基本的なDTDなので融通が利きません。幸いブラウザは古いタイプのDTDが混じっていても解釈可能で表示に問題はありませんが、アクセス解析や検索サービスのタグがHTML 4.01 Strict基準に合わない例は多々あります。

　そこで現実的な対処方法としてHTML4.01Transitional DTDを使用してみて下さい。普段からHTML構文に注意を払っている方なら殆ど修正することなく導入できると思います。

DTDの関所　Markup Validation Service

W3C - Markup Validation Service　（英語）

W3Cが運営するHTML文法チェッカー。Validateとは英語で「証明する」という意味。決まりに合っているか確認し、合っていなければ修正方法を提示します。

W3C - CSS 検証サービス　（日本語）

文字通りCSSの正当性をチェックしてくれるページ。

Valid XHTML 1.0 Transitional. Valid CSS.
テストに合格すると、それぞれのバナーの使用許可が下ります。つまり、このページは合格しているわけです。
　リンク集やホームページ作成関連の方は掲載に挑戦するといいでしょう。営利サイトでもホームページ作成業など関連業務を扱うウェブサイトでは掲示する意味もあるかと思います。

HTML 4.01ストリクト準拠　ウェブページ製作の実際

〔W3C HTML 4.01strictに準拠した実際的なHTMLの枠組み例〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>ページタイトル</title>

</head>

<body>

<a href="#MIDASHI1" title="大見出しへ">大見出しへ</a>

</td></tr></table>

</body>

</html>

HTML 4.01 Strict環境での要素と属性の使い方

〔HTML,BODY〕

BODY要素にbgcolor等の属性を含めていた従来の手法は使えない。そこでCSSでHTMLやBODY要素そのものに属性を含めてしまおう。
HTML要素にはlang属性をlang="ja"のように入れておく。

〔HEAD内の要素〕

サーバーによっては既定の文字コードを送らない例もあるためページ上のcharset指定は省略しない。ここではshift_jisだがEUC-JP等サーバーの設定に合わせよう。META要素（タグ）は他の要素より前に設置するよう要請されてる。

〔テーブル〕

開始要素にsummary属性の使用が推奨された。ここにはテーブル内容の要約を入れる。
例：<table summary="テーブル内容の要約" >

〔アンカー(Anchors)〕

name属性を従来のようには内部リンクに使用できないのでid属性を使う。
id属性の値は大文字でなければならない。これに対応するa要素内の値も同じく大文字である必要がある。
　例：<h2 id="MIDASHI2">見出し2</h2> ... <a href="#MIDASHI2">見出し2へ</a>
<p id="PAGETOP">いらっしゃいませ</p> ... <a href="#PAGETOP">ページトップへ</a>

〔タイトル(Title)〕

HEAD内のTITLEタグではなく、BODY内に入れる属性のtitle。カーソルが対象の上に止まると現れる「ツール・ティップ」といわれる短い文章を表示する効果や音声ブラウザでは読み上げる効果がある。下の文字をマウスでロールオーバーしてみて下さい。
例：<span title="tool tip">ツール・ティップ</span>

〔枠(Border)〕

.noborder {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

ハイパーリンク付画像の枠を無くすのに border="0" とよく使うが、4.01 Strictではこれが出来なくなるのでCSSで消すと良い。

〔Target〕

外部リンクに付き物のtarget="_blank"だが、target属性がフレーム用になったので使えない。これを使いたい場合は他のDTDを採用して下さい。

〔bgcolor〕

非推奨要素とされているので、ボディー(Body)かテーブル(Table)の背景を指定するにはスタイルシートで設定する。一般的にはCSSにクラス(Class)を設定して必要に応じBODYやTDなどにClassをあてがう方法が使い良い。

〔lang〕

外国語の文章を表示したり外国語で書かれたサイトへリンクする事があるなら、lang属性を使う必要がある。又、言語指定は要素中で継続する原則がある。
　この例ではHTML冒頭でlang="jp"を宣言しているので日本語からlang="en"で英語へ変りp要素の終りと共に日本語へ戻る。
例：<p lang="en">There is also a growing list of FAQ's where you can find detailed information about creating your sitemap.xml</p>

SEO対策に役立つ小技

title属性はほとんどの要素に付ける事が出来る。

この部分にtitle属性を付けてあるが、日本語の文字を入れられるところがいい。
<strong title="これはtitle属性の効果です">この部分</strong>

紛らわしいがtitle属性とはHEAD内にあるTITLE要素とは全く別物

気になるSEO効果は不明、というより期待しないでやろう。W3Cではtitleは「その要素に対する助言的情報を持つ」とされていて、特に音声ブラウザには重要な意味を持つ。多くの人に利用されたいウェブサイト程、使用する意義があるはずだ。

title属性はアンカーリンク以外にも使えそうだ。使い方としてはリンク先ページのタイトルを入れておくのが無難だが、自分のページへの逆リンクコード用に使ってもいい。

例：<a href="・・・" title="浅草雷門前　和菓子のペンタゴン">手焼きせんべい毎週プレゼント</a>へ行こう。

W3Cのウェブでは<span class="index-inst" title="anchor::uniqueness of name"><a name= "idx-anchor-4"><strong>Uniqueness:</strong></a></span>のような利用法をしている。これはマウスオーバーでanchor::uniqueness of nameが表示される。

<W>Yahooではキーワードスパムの一典型としてtitle属性へのキーワード詰め込みを警告しているから、変な考えを起こさないように。</W>

〔FONT要素は非推奨〕

推奨されなくはないと書かれているが、明らかにCSSでやってくださいと言っている。(I,B,BIG,SMALL)は単にブラウザが表示するだけで論理的な意味を持たないので、STRONGとEMと似ているようでもSEO的には全く違う扱いになる。

〔CENTERも非推奨〕

DIV か align を使ってください。

W3C勧告とDTD書式　おわり。　次は　静的と動的ページ　です。