ちょっとSEO意識した3カラムＷＥＢサイトの作り方

Question

こんにちは。ＷＥＢページ作成の初心者で、ＣＳＳとＨＴＭＬを使ったちゃんとしたＨＴＭＬを書き始めてからまだ3～4ヶ月といったところの者です。（高校一年です）質問内容は題のとおりです。現在の状況を簡単に説明すると、ＨＴＭＬの記述がヘッダ⇒左メニュー⇒真ん中のコンテンツ⇒右カラム⇒フッタという感じになっています。で、左メニューとコンテンツと右カラムにフロートを設定してます。 ↑の一番の問題点は、h1タグの次にh3タグが着てしまうことだと思います。そこで、これじゃまずいと思い、ＴＯＰページからいじり始めました。しかし、この方法でよいのかがわからないので、すべてのページに反映する前に質問させてください。 http://wingnovel.web.fc2.com/ ↑ここのサイトです。ＴＯＰページのみ（と作者についてのページ）は、コンテンツを『左右のmarginをautoに指定』してセンタリングし左右のカラムをpositionプロパティでうまく持ってきています。しかし、これだと問題があり、コンテンツのたての幅が左右のカラムよりも短いと、左右のカラムがフッタに突き刺さってしまいます。。。（作者についてのページが若干そうなっています…実際にはフッタの前に広告があるのでたいした問題ではなさそうですが）ただ、実際のところ、小説の長さが左右のカラムよりも短いということはありえなさそうなので…このサイトに関してはこの方法でも大丈夫だと思うのですが、他のサイトに流用できそうにもないので… 他にも、ＳＥＯ的に[最悪]という点がこのサイトにおいてありましたら、教えていただけないでしょうか？ひとつきになるのですが、h1のような重要なタグに画像を指定してしまうのは大丈夫なのでしょうか？alt属性はもちろん指定してあるのですが…

という感じになっているはずです… なにかよい方法を教えていただけないでしょうか。

ORUKA1951 · Accepted Answer

　なら、実際に初歩的なサンプルを、スマホ・幅広ディスプレイ対応、印刷時は別のスタイル。・・もっとも基本的なヘッダー・３カラムのセクション・フッターの５カラム構成です。左右に来るブロックが本文ブロックより長くなる可能性があれば、本文ブロックにmin-heightを指定しておけば良いです。＿＿サンプル＿＿

＿＿

サンプル

＿

＿＿

＿＿＿

質問

＿＿＿

＿＿＿＿ＨＴＭＬの記述がヘッダ⇒左メニュー⇒真ん中のコンテンツ⇒右カラム⇒フッタという感じになっています。＿＿＿

＿＿＿

＿＿＿＿で、左メニューとコンテンツと右カラムにフロートを設定してます。＿＿＿

＿＿＿

＿＿＿＿↑の一番の問題点は、h1タグの次にh3タグが着て来てしまうことだと思います。＿＿＿

＿＿＿

＿＿＿＿そこで、これじゃまずいと思い、ＴＯＰページからいじり始めました。しかし、この方法でよいのかがわからないので、すべてのページに反映する前に質問させてください。＿＿＿

＿＿＿

＿＿＿＿しかし、これだと問題があり、コンテンツのたての幅が左右のカラムよりも短いと、左右のカラムがフッタに突き刺さってしまいます。。。（作者についてのページが若干そうなっています…実際にはフッタの前に広告があるのでたいした問題ではなさそうですが）＿＿＿

＿＿＿

＿＿＿＿ただ、実際のところ、小説の長さが左右のカラムよりも短いということはありえなさそうなので…このサイトに関してはこの方法でも大丈夫だと思うのですが、他のサイトに流用できそうにもないので… ＿＿＿

＿＿

＿＿＿

回答

＿＿＿

　
　　文書の見出し

　　要約
　
　
　　本文
　　目的
　　操作
　　結果
　　考察
　　結論やまとめ
　　参考文献
　　インデックス
　
　
　　あとがき

＿＿＿

＿＿＿＿この文書構造にしたがってスタイルシートでデザインしていきますから、＿＿＿

＿＿＿

/*本文は・・*/
body>section{position:relative;}
body>section>*{margin:0 20%;}
/* 本文中の参考文献と目次は */
section div.references,section div.contentTable{
　width:20%;height:100%;
　position:absolute;top:0;
}
section div.references{left:0;}
section div.contentTable{right:0;}

＿＿＿

＿＿＿＿だけでよいはずです。＿＿＿

＿＿

＿＿＿

トップ
質問
回答

＿＿

＿＿＿

＿

ORUKA1951 · Answer

　SEOとは、検索エンジンがそのページの内容を正確に把握できるよう、その文書構造をマークアップすることに他なりません。そもそもHTMLは、それを構成する要素をタグを使ってマークアップするものですから・・　デザインは一切考えないというか、最初にメモ帳だけで書かれた文章を作って御覧なさい。そうすれば [論文]でしたら・・文書の見出し　要約　本文　　目的　　操作　　結果　　考察　　結論やまとめ　　参考文献　　インデックス　あとがきが定型ですよね。それが、他の分野の文章であっても基本的には同じはずです。そして、それぞれの要素をタグを使ってマークアップすることになります。HTML5では、文書構造をより明確にするため新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が加わったので　

文書の見出し

　
要約

　　本文　　目的　　操作　　結果　　考察　　結論やまとめ　　
参考文献
　　
インデックス

　あとがき
とかね。HTML4.01でしたら、
　
文書の見出し
　
要約

・・・【中略】・・・

　あとがき
　これをLynxで見てみます。『ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』 ※検索エンジン最適化はここまで・・　この文書構造にしたがってスタイルシートでデザインしていきますから、 /本文は・・/ body>section{position:relative;} body>section>{margin:0 20%;} / 本文中の参考文献と目次は */ section div.references,section div.contentTable{ width:20%;height:100%; position:absolute;top:0; } section div.references{left:0;} section div.contentTable{right:0;} だけでよいはずです。　HTMLも、後で見直しても、人が見ても、検索エンジンが見てもわかりやすいですよね。検索エンジンはこれらのclass名は理解してますよ。　もちろんスタイルシートもHTML見なくても、参考文献やインデックスが、どのようにデザインされているかがわかるでしょう。＞

という感じになっているはずです… 　Lynxで見れば一目瞭然・・・

　もちろん、その画像に意味がないのでしたら

見出し

としてマークアップして、スタイルシートで画像を指定するほうが良いでしょう。

ちょっとSEO意識した3カラムＷＥＢサイトの作り方

なら、実際に初歩的なサンプルを、スマホ・幅広ディスプレイ対応、印刷時は別のスタイル。

SEOとは、検索エンジンがそのページの内容を正確に把握できるよう、その文書構造をマークアップすることに他なりません。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　なら、実際に初歩的なサンプルを、スマホ・幅広ディスプレイ対応、印刷時は別のスタイル。

　SEOとは、検索エンジンがそのページの内容を正確に把握できるよう、その文書構造をマークアップすることに他なりません。