- Outline -
初級SEOスクール
- Constructions -
W3C勧告とDTD書式
静的と動的ページ
動的ページをindex
フレームとiframe
SEOとスタイルシート
- KeyWords -
キーワードの選び方
予想と結果の違い
密度と近接度の知識
見出し要素の使い方
論理強調の使い方
- Robots -
robots.txtの書式
ロボット対策メタタグ
- Others -
ステータスコード
404ページの作成
被リンク対策
XMLサイトマップ
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である1.0から改良されてきた規格。 4.01はスタイルシートの積極的導入により主に旧来の修飾用要素が使えない。従来の欠点の修正、国際化、アクセス性の向上等の盛り込みが特徴となっています。
HTML 4.01には3種類(strict,transitional,frameset)のDTDがあり、文書の初めに宣言する事でどれを使うか明示します。
HTMLにXMLを取り込んだXHTML1.0はHTML4.01を拡張したもので最初のXHTML規格です。 XHTML1.0には 3種類(strict,transitional,frameset)のDTDがあり、文書の初めに宣言する事でどれを使うか明示します。
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です。
厳密型。推奨しない要素や属性を含まずフレームもサポートしない。
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
移行型。上記の厳密型の全てに加え、推奨しない要素や属性も含む。
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.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.
テストに合格すると、それぞれのバナーの使用許可が下ります。つまり、このページは合格しているわけです。
リンク集やホームページ作成関連の方は掲載に挑戦するといいでしょう。営利サイトでもホームページ作成業など関連業務を扱うウェブサイトでは掲示する意味もあるかと思います。
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"> |
| <html lang="ja" > |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> |
| <meta name="Keywords" content="キーワード "> |
| <meta name="Description" content="説明 "> |
| <meta http-equiv="Content-Script-Type" content="JavaScript"> （使用時のみ記入） |
| <title>ページタイトル</title> |
| <link href="./style.css" rel="stylesheet" type="text/css"> （使用時のみ記入） |
| </head> |
| <body> |
| <table summary="構文の見本" ><tr><td> |
| <h1 id="MIDASHI1">大見出し</h1> |
| <blockquote cite="引用元ページのURI"><p>引用文</p></blockquote> |
| <p>本文</p> |
| <a href="http://www.123456.com/" title="123ABC" lang="en">123 and ABC</a> |
| <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書式 おわり。 次は 静的と動的ページ です。
記事を写す場合はASY!からの転載であることを明記しリンクを設置して下さい。 著作・製作 ** このページのトップへ**
SEO対策の基礎から学べるSEOスクール。DTD解説も。
SEOの応用も覚えて検索結果をコントロールしよう。
検索順位を上げる被リンク法、検索エンジン別対処法。
サイトを検索エンジンに認識させるXMLサイトマップの作成。
大人気！SEO対策済のHTMLテンプレートを無料配布。
費用対効果を高めるサーチエンジン・マーケティング。
上位表示を狙ったページ作りと検索順位の関係を考察。
押さえておきたい定番サイトのリストとツール類や相互リンク。
当サイト運営記録のブログです。投稿歓迎。
迷ったらサイトマップを見よう！
[PR]
沖縄レンタカー | 沖縄 | 沖縄土産
| 沖縄 |
琉球料理 | 沖縄
旅行 観光 | 沖縄移住 | 沖縄
SEO | 沖縄 不動産 | | インターネット沖縄 |
沖縄情報 | 沖縄ホームページ | SEO
沖縄