SEOに適したレイアウトとナビゲーション

SEOに強いホームページレイアウト

SEOに強いレイアウトは基本的には１つしかありません。そして同時に、使ってはいけないレイアウト技法もあります。

SEOに強いレイアウトはアクセシビリティ面も良好なので積極的に取り入れましょう。

L字型（コの字型）

L字型レイアウトとは、ページ上部に幅一杯のタイトル領域があり、中段にコンテンツ領域とナビゲーション領域、下部にコーポレート表示領域があるものです。

当サイトももちろんL字型を採用しています。

L字型レイアウト

HTMLで書かれた内容は左上から右下の順に表示されます。

他ページへのリンク（ナビゲーション領域）は若い行番号に書くほど優位性が高まるため、左ナビ右コンテンツはお約束ごとでもあります。

フルCSSレイアウト

各領域の配置をスタイルシートで行う方法で、Web標準のW3CやアクセシビリティJIS規格でも推奨されています。

配置設定に自由度があるので中段コンテンツ領域とナビゲーション領域を左右逆にできるなど、レイアウトの幅が広がります。

但し、ホームページ作製ツール上のメンテナンス性が悪いという欠点があるため、企業サイトではテーブルレイアウトを併用したハイブリッドレイアウトが用いられるケースが多いようです。

テーブルレイアウト

テーブル（表）を用いて、区切ったセルを領域としてあてがう手法です。

テーブルレイアウトはSEOで不利？

テーブル＝表がSEOで不利になることはありません。

問題となるのはテーブルの多重化（入れ子）と文書構造の矛盾ですが、多重化はハイブリッドレイアウトを採用すれば防げますし、「左ナビ右コンテンツ」は文書構造に矛盾を発生させません。

ソースの冗長化を問題視する意見もありますが、適切な手法を用いればフルCSSレイアウトと大差はありません。

ハイブリッドレイアウト

テーブルを大外の共有枠だけに使用し、実際の内容はCSSで組むことでテーブルレイアウトの欠点を払拭したものです。

技術難度が低くメンテナンス性が良いことから企業サイトで多く使われます。

▲上に移動

ナビゲーション

ナビゲーションの方法でSEOの効果は大きく違ってきます。

大部分はユーザビリティの向上施策でもあるため、なるべく採用するようにしましょう。

ナビゲーションの技法にはSEOのノウハウがたくさんありますが、当サイトの性質上、概要のみの記述としています。

タイトル領域のナビゲーション（レイアウト例「1」の部分）

  • 左上に店舗ロゴなどの画像を配置し、トップページのリンクを仕込む
  • 最上部中央、もしくは右上にホームページの紹介文を記述（META-DESCRIPTIONの代用）
  • 受注や問合せのリンクを大きめに貼る（見栄えを意識するなら画像＋ALT属性）
  • カテゴリが多い場合はカテゴリのトップへ誘導するナビゲーションを設置
  • ナビゲーションリンクが多い場合は「本文へ移動」のスキップリンクを設置してコンテンツ領域まで瞬時移動できるようにする

中段のナビゲーション（レイアウト例「2」の部分）

  • カテゴリが無い場合、全てのページへのリンク、多い場合はカテゴリ毎の小メニューを表示
  • お知らせなども全部ここ（お知らせは書き換えず新規ページで蓄積するとサイト規模を大きくすることができます）

コンテンツ領域（レイアウト例「3」の部分）

  • カテゴリが多い場合、トピックパス（※）を設置
  • コンテンツの最下部に「ページ最上部へ移動」のリンクを設置

トピックパス（パンくずリスト）

パンくずリスト

現在位置を表すナビゲーションのこと。「パンくずリスト」の語源はグリム童話。

コーポレート表記領域（レイアウト例「4」の部分）

  • 左寄りに会社ロゴ、もしくはリンクバナー（無くても良い）
  • 中央、もしくは右寄りにサイト案内系コンテンツへのリンク（トップページ、問合せ、地図、サイトマップなど）
  • 無意味なことをしたくない人でありたいなら「COPYRIGHT」の表記はしない

▲上に移動

SEOではNGなレイアウト

SEOではやってはいけないレイアウトです。

ほとんどの企業サイトにおいて、SEOにおけるNG技法はアクセシビリティの面でも避けるべき技法でもあります。

L字以外のレイアウト

主には上下分割型やブログ型3カラムレイアウトが挙げられます。

上下分割型レイアウトはナビゲーションが少ないので絶対的なサイト内リンク数が減ります。

コンテンツが少ないサイトでは見栄え的に上下分割のようが良いですが、ページを増やすこともSEOの一環です。

右ナビゲーションのL字型レイアウト

基本的に「右ナビ」はナビゲーション記述の行番号が遅くなるのでSEOでは不利です。

ですが、次のような場合は「右ナビ」でも問題ない、あるいは効果的な場合もあります。

  • スタイルシートで右側に配置する場合（当サイトはこの手法です）
  • 主なコンテンツが写真の場合（コンテンツのタグが少ない）

フルFLASHレイアウト・FLASHによるナビゲーション

デジタルアートデザイナーが好みますが、FLASHで書かれた内容は検索エンジンに取り込まれないのでSEOの考え方とは根本的に逆行します。

操作を理解するのに時間がかかる、PCに負担がかかる、汎用性が低いなど、アクセシビリティ面でも著しく問題があります。

JAVAスクリプトによる展開式ナビゲーション

マウスをあてるとメニューが展開するナビゲーションで、主に視覚効果目的で用いられます。

展開式ナビゲーションは「デザインを優先させるために本来見えるべきものをあえて隠す」という目的で使用されます。

採用しているデザインに強い意味や目的がなければ単なる作り手のエゴです。

適用される箇所がページ先頭付近になるため、スクリプト（プログラム）を読み込む際にロスが発生します。

また、スクリプトの書き方によってはリンクや文字を無視する検索エンジンもあるのでSEOにおいては好ましくない手法といえます。

フレームレイアウト

二世代前の企業サイトや素材提供系の趣味サイトが好みますが、SEOでは代表的なNG技法でもあります。

フレームを用いていけない理由は次のとおりです。

  • ページが断片化するので検索エンジンに読まれにくい
  • 検索や直リンクされた際にナビゲーションがないので他のページに移動しにくい、あるいはできない
  • 低解像度ディスプレイでは表示できない箇所が発生することがある
  • トップページ以外はブラウザの「お気に入り」に登録できない

SEOはもちろんアクセシビリティにも著しく問題があるため、SEOを意識しなくても避けるべき手法といえます。

  • 直前のページへ
  • ページの先頭へ