SEOを意識したサイトデザイン
完成したサイトにSEO対策を施すよりも、始めからSEOを考えて制作を行った方が効率も良く、バランスの取れたサイトが出来上がります。
基本となるデザインレイアウト
上図はネットで配布されているテンプレートなどで良く見かけるデザインですが、SEOを意識した簡易的なレイアウトとなるとどうしてもこんな感じになってしまいます。あくまで基本となるレイアウトですので、作るサイトにあわせ位置の調整や、必要な項目の追加を行ってください。
ヘッダー
ページの見出しとなるh1と、ページの概要を説明するためのテキストを配置します。h1とテキストは全ページ異なるユニークなものを記述します。
ヘッダーの左側にはロゴを配置し必ずリンクにします。ロゴは、ソースの上部に位置し、全ページ共通のトップページへのリンクとなる為、CSSの画像置換えを使用しアンカーテキストにはメインキーワードを含ませた方が良いでしょう。
イメージリンクにする場合でもaltには必ずキーワードを含めます。（ロゴに限らず、リンクとなるaltには必ずキーワードを含めます）
ヘッダーには、サイト信頼度を上げる為に分かりやすい位置に連絡先も記載した方が良いでしょう。
グローバルナビゲーション
グローバルナビにはカテゴリトップへのリンクを並べます。会社概要やお問合せページへのリンクを含めていも良いでしょう。
テキストリンクが望ましいですが、イメージリンクにする場合でもaltには、必ず各ページのターゲットキーワードを含ませます。
パンくずリスト
内部リンクの最適化とユーザビリティを考え、グローバルナビの下あたりにパンくずリストを設置します。
パンくずリストのトップページへのリンクに無理やりキーワードを含めているサイトも多いのですが、ヘッダーのロゴをトップページへのテキストリンクにしている場合には、パンくず部分はTOPやHOMEでも問題ないように感じます。
検索エンジンのクロールとユーザビリティを考え、サイトマップへのリンクもこのあたりに張っておきます。（ヘッダーに張っても良いでしょう。）
サイドバー
サイトバーにはサブコンテンツへのリンクや会社情報を記載します。リンクは必要以上に張らないようにし、会社情報の住所はaddressタグでくくります。
サブコンテンツが少ない場合には、サイドバー無くしたりメインコンテンツと左右を入れ替えても良いでしょう。
メインコンテンツ
ページごとにユニーク性を持たすために最も重要となる部分がメインコンテンツです。基本的な構成は「h2⇒p⇒h3⇒p⇒h4⇒p」でOKです。各ページ最低でも2000～3000文字程度のテキストが欲しいところです。
コンテンツ部分からのリンクは全ページ共通部分（ヘッダー・サイドバー・フッターなど）からのリンクよりも評価が高い傾向にありますので、テキストエリアからは他ページへのリンクを積極的に張ります。
フッター
フッターにはトップページやお問い合わせへのリンク、その他張りたい内部リンクを並べます。あくまで補助的なリンクですので、並べすぎる必要はありません。また、フッターにはコピーライトの他に簡易的な業務内容や営業エリアを記載しても良いでしょう。
注意点
- 基本的にリンクは全てテキストリンクにする
- グローバルナビやパンくずリスト、サイドバーリンクはliタグで記述する
- アンカーテキストはリンク先ページのターゲットキーワードを意識する
- 内部リンクのindex.htmlは無しで統一
デザインよりも重要なのはHTMLソース
上記は、ブラウザ上の表示順とHTMLの記述順が同一の場合の説明となっています。検索エンジンはデザイン上どこに何が表示されているのかではなく、HTMLを見てサイトを評価していますので、表示させる位置にこだわる必要はありません。
ヘッダー部にh1やテキストを表示したくない場合には、絶対配置（position: absolute;）を使用して位置を調整してください。今のところ、HTMLの上部に記述したものをブラウザ上ではフッターに表示してもSEOの視点では特に問題はありません。
理想的なHTMLや最適なSEOよりも時間対効果
ページごとのユニーク性を出すためにh1やh1に付随するテキスト、コンテンツ部分はできる限りソースの上部に配置するのが基本です。さらに、可能な限り無駄なタグを無くし、CSSやJavascriptなどは外部化した方が良いと言えます。
しかし、CSSスキルの無い人が理想的なHTMLと最適な内部SEOを求めサイトに修正を加えていくと、最終的にブラウザごとに見え方が異なるぐちゃぐちゃなサイトになる事が良くあります。
例え見た目も内部SEOも理想的なサイトが出来上がったとしても、それで検索順位が上がるとは限りません。サイトの修正に使った時間を新サイト作成に当てた方が成果は出ていたかもしれません。
全てに究極を求める事がSEOで成功する近道ではありません。サイト制作は自分の技術力と使える時間を考え、効率よく取り組んでいきましょう。
お世話になります。いつも勉強させていだいております。
質問させていただきます。
今回の記事の注意点の ”内部リンクのindex.htmlは無しで統一”
とは、具体的にどういう事でしょうか？
リンクはフォルダ名まででとめておく、という事でしょうか？
コメント by 木村 2009/10/26 9:58:23
コメントありがとうございます。
ディレクトリ（フォルダ）へリンクを張る際にindex.html有り無しを統一しようという事です。
記事中では無しで統一と書きましたが、全てindex.htmlありで統一しても問題はありません。ただ、今後.htmlじゃなくなったときの事を考え、無しで統一した方が良いかなと思っています。
コメント by パシフィカス 2009/10/26 10:26:31
とても参考になりました。
リンクはテキストリンクが望ましいとありますが、絶対パスと相対パスで記述する点においてどちらが好ましいというのはあるのでしょうか？
コメント by 小玉 2009/10/26 11:06:12
コメントありがとうございます。
絶対パスが良いという意見もありますが、私はどちらでも良いと思っています。
コメント by パシフィカス 2009/10/26 11:29:16
>内部リンクのindex.htmlは無しで統一
検索エンジンによっては、「/index.html」のページを「/」と登録する場合がある。
「/index.html」と内部リンクをした場合、「/index.html」と「/」が別ページとして判断されてしまう。また、他サイトからリンクを張ってもらう時にも、統一しておかないと、被リンクの価値が分散してしまうのでもったいない。
Javaという表現はやめた方がいいですよ。JavaとJascriptは別物ですからね。
面倒でもJavascriptと書いた方が、読者に誤解を受けずにすみます。
コメント by ほげ 2009/10/26 15:23:22
ご指摘ありがとうございます。
Javascriptに修正しました。
コメント by パシフィカス 2009/10/26 16:26:37
こんにちは。
内部リンクで相対パスを使って”index.html”無しでリンクをはる場合、
具体的にどのように記載することになるのでしょうか。
a href=”/” ですか？
宜しくお願いします。
コメント by 通りすがり 2009/10/27 15:04:27
こんにちは。
トップページへのリンクのことでしょうか？
それであれば「/」でOKです。
例えばcontactというディレクトリのトップへのリンクであれば、
階層によって「contact/」や「../contact/」となります。
コメント by パシフィカス 2009/10/27 17:36:58
パシフィカス様
こんにちは。昨日書き込みをした”通りすがり”です。
ご返信ありがとうございます。
>トップページへのリンクのことでしょうか？
>それであれば「/」でOKです。
説明不足で申し訳ありません。ご察しいただきました通り、
トップページのリンクの記載方法をお伺いしました。
a href=”/”で了解致しました。
分かりやすい説明、ありがとうございました。
コメント by 通りすがり 2009/10/28 12:11:16
こんにちは、参考にさせていただきます。
私が普段やっているのと同じでしたので、自信を持てました！
コード上はメインコンテンツが上で、その後にサイドバーという考え方で良いのでしょうか。
コメント by ハヤマタカシ 2009/10/28 12:28:53
こんにちは。
>コード上はメインコンテンツが上で、その後にサイドバーという考え方で良いのでしょうか。
基本的にはそれで良いと思いますが、最近ではどちらでも良いとも感じています。ただ、通常floatの左右を変えるだけで対応出来ると思うので、やっておいた方が無難ですね。
コメント by パシフィカス 2009/10/28 14:17:00
いつも ROM ばかりで申し訳ありません
メインコンテンツ と サイドバー の左右を逆に
してSEO効果を上げようとしていますが、無意味でしょうか？
HTML的には、上から読んでいくので、上部は、かなり軽く作って
いてメインコンテンツを早めに読ませています。
サイドバーがたまに、かったるかったすると、メインが出てくるのが
遅くてユーザビリティーが低下することも防げるような気がしています。
コメント by ROM 2009/10/28 20:37:20
>いつも ROM ばかりで申し訳ありません
とんでもないです＾＾
>サイドバーがたまに、かったるかったすると、メインが出てくるのが
>遅くてユーザビリティーが低下することも防げるような気がしています。
いまいち意味が分からないのですが、サイドバーの読み込みが原因でメインが表示されるまで時間がかかる場合と言う事でしょうか？
サイドバーは、左右どちらでも特に問題はありませんので、ユーザビリティを優先して良いと思います。
コメント by パシフィカス 2009/10/28 21:42:39
お初です！
久しぶりに刺激的なＳＥＯサイトみた＾＾
これは勉強になりました＾＾
コメント by 情報商材アフィリエイター＠アフィリ息子 2009/10/30 5:45:02
はじめまして。
ありがとうございます。
コメント by パシフィカス 2009/10/30 6:10:55
はじめまして、お世話になります。
Jascriptの外部化のソースが分かりません。
トップページ最下部にあるアクセス解析を外部にしたいのですが、うまく行きません。
スタイルシートの外部化は出来ました。
Jascriptが2件ある場合の外部化の書き方をご案内頂けますと有り難いです。
どうかよろしくお願い申し上げます。
コメント by 佐藤 繁 2009/11/10 18:28:27
はじめまして。
「Jascript 外部化」などで検索してみてください。なおアクセス解析のコードを外部化する必要は無いと思います。
コメント by パシフィカス 2009/11/10 19:15:57