SEO対策による書き直しについて

2011/10/11 14:56

このQ&Aのポイント

SEO対策による書き直しについて詳しく教えてください。
ソースの疑似フレームのエラーについて問題があります。
レイヤーの問題とz-indexの重要性について教えてください。

uzume_z
お礼率87% (396/452)

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/11 23:36 回答No.3

＞私が参考にしたこちらのページはシンプルで良いと思のですが、　ご自身で判断できると思います。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　に、書かれているようなidやclass名になっていますか? class名は、 HTML5の[3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )]の名称だとどうでしょう。 <body> 　<div class="header"> 　　<h1>タイトル</h1> 　</div> 　<div class="aricle"> 　　<div class="section" id="section1"> 　　　<h2>見出し</h2> 　　　<p>記事</p> 　　</div> 　　<div class="section" id="section2"> 　　　<h2>見出し</h2> 　　　<p>記事</p> 　　</div> 　　<div class="contentTable"> 　　　<h2>目次</h2> 　　　<ol> 　　　　<li><a href="#section1">section1</a></li> 　　　　<li><a href="#section2">section2</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="footer"> 　　<div class="nav"> 　　　<li><a href="./index.html">Top</a></li> 　　</div> 　</div> </body> と書かれているHTMLだと、機械(検索エンジン)にどちらがよく理解できるでしょう。数年後にあなたが見直したとき、どちらがよくわかりますか？。Lynx( http://lynx-win32-pata.sourceforge.jp/index-ja.html )で見たらどう見えるでしょう。 div.header,div.article,div.footer{ 　width:80%;margin:0 auto; } div.article{ 　position:relative; } div.article div.section{ 　margin:left:200px; } div.article div.contentTable{ 　position:absolute;top:0;left:0; 　height:100%; } と書かれたCSSは、数年後にあなたが見たときに、HTMLを開かなくても、どこをどう指定してあるかわかりますよね。表示画面とスタイルシートだけ見ても、どこをどう変更すればよいかわかるはずです。(それこそ文書構造に従ったマークアップではないかと。) [サンプル]HTML4.01strict タブは＿に置換してあります。戻すこと。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!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"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="article"> ＿＿<div class="section" id="SECTION1"> ＿＿＿<h2>見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="SECTION2"> ＿＿＿<h2>見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<h2>目次</h2> ＿＿＿<ol> ＿＿＿＿<li><a href="#SECTION1">section1</a></li> ＿＿＿＿<li><a href="#SECTION2">section2</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h3>文書情報</h3> ＿＿<p>文書情報</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="./index.html">Top</a></li> ＿＿＿＿<li><a href="./product">製品</a></li> ＿＿＿＿<li><a href="./books">著書</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>

質問者

お礼 2011/10/12 01:32

厳しくも温かいご指導有り難うございます。今あるサイトはビルダーでゴリゴリ作ったものです。 divであるべきところが全部テーブルになってます。チマチマとやって何とか今のレベルまで来ました。自分で判断などと言ったら先生から笑われてしまいます。 CSS難民なので、この方法がいいよと言われれば、そちらの方に流れてしまいます。まだまだです。

質問者

補足 2011/10/12 20:02

今月はこのサンプルを見て頑張ります。またの機会がありましたら宜しくお願いします。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/11 15:59 回答No.2

ネットにある情報の99%はゴミです。ソンなのに一喜一憂したって時間と労力の無駄です。検索エンジン対策は、検索エンジン自体が公開しているマニュアルを読むに越したことはありません。　google(Yahoo!japanも同じ)のマニュアル--トップページから{ggogleについて}→「ウェブマスターセントラル」→「ウェブマスター向けガイドライン」などを読むこと。　SEOとして、なによりも大事なことは、そのページの情報が検索エンジンにきちんと理解できるか否かです。そのためには、「文書構造に従った正しいマークアップがされているか」「本文と関係ないキーワードや誤解を招く強調や見出しが無いか」・・です。言い換えれば検索エンジンを利用するユーザーのためにきちんと書かれているかです。　ナビゲーション(サイトインデックス)が、本文と紛らわしい形でページの前のほう(描画ではなくソース上の)に書かれていたりすると、そこに書かれている語句を本文と誤解して、検索エンジンは上位に上げることがありますが、ユーザーがそのページにとんだ後、直ちに元に戻って次のページに飛んだりすると、検索エンジンはそのページが価値の無いものと判断して、順位を下位に移動したりします。　キャッシュがどのように表示されるかは、SEOとはまったく無関係な話です。 [例 HTML4.01] 　<div class="header"> 　　<h1>見出し</h1> 　　<div class="article" id="abstract"> 　　　<h2>要約</h2> 　　</div> 　</div> 　<div class="section"> 　　<h2>本文見出し</h2> 　　<p></p> 　　<div class="aside"> 　　　脚注　　</div> 　</div> 　<div class="footer"> 　　<h2?文書情報</h2> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</div> 　</div> </body> これなのclass名やid名だと文書構造が理解できますし、検索エンジンは実際に理解しているようです。 HTML5だと、HTML4で不足していた構造化のための要素が追加されます。 [例 HTML5] 　<header> 　　<h1>見出し</h1> 　　<article id="abstract"> 　　　<h2>要約</h2> 　　</article> 　</header> 　<section> 　　<h2>本文見出し</h2> 　　<p></p> 　　<aside> 　　　脚注　　</aside> 　</section> 　<footer> 　　<h2?文書情報</h2> 　　<nav> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</nav> 　<footer> </body> ★このように、サイト内のナビゲーションはheaderやsectionの内容ではないので、footerに入れるべきでしょう。プレゼンテーションで上に表示するにしても・・　検索エンジンは、Lynxが読んでいるようにしか読みません。Lynxはその点ウェブクリエーターの必須ブラウザですね。　でも、これは検索エンジン最適化(SEO)のためであって実際の検索順位と直接関係あるわけではありません。結果的に上位になるのは、検索エンジンが内容を正しく理解できるため、その結果が検索結果に表示され、利用者の利用が増える結果として、上位に上がっていくのです。　言い換えれば、小細工が【直接】順位を上げることになることはありませんし、順位を下げることにもなりません。ただし、悪意のある、あるいは順位を上げるための小細工やそうだとみなされれば、ははじかれます。

質問者

お礼 2011/10/11 18:23

いつもご丁寧に有り難うございます。もはやORUKAさんは私にとって神みたいな存在です。 Webの99%がゴミなのですか。これは手厳しいです。サイトの案内を先頭にしていましたが下の方がいいのですね。そちらに移すことにします。私が参考にしたこちらのページはシンプルで良いと思のですが、先生の目からしたらどうなのでしょう。 http://homepage.nkdesk.com/lesson8/lesson8.3.html

・真綾・（@Ma-yan_bh1011）
ベストアンサー率30% (79/257)

2011/10/11 15:33 回答No.1

×SEO対策 ○SEO まあ、こういっちゃ何ですが、それくらいのことで目に見えてサーチエンジンでの結果が変わったりはしません。そういうのよりも内容とHTMLのマークアップに気を使うべきです。ちなみに「次の記事に」のサイト、今開いたら本文がメニューに全部覆われて読めませんでした(笑) そういうサイトだし日付も古いし、間に受けないほうが身の為です。

質問者