論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO

論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO
42

デザインが先にあって XHTML を書こうとすると、論理的な文章構造殻から見たときにおかしなことになることがあります。 コーディングに慣れないうちはこういう失敗もよくありますねー。 正しい文章構造でマークアップをすれば SEO的にもいいかもしれません。

今更なんですけど、Webサイトって XHTML で書かれていて、スタイルシートで装飾されていますよね。Webデザイナーから見ると、Webサイトってとかく見た目、デザインの部分、スタイルシートばかりに目がいきがちですが、Webサイトで大事な部分ってXHTMLの文章の論理構造だったりします。まずは XHTML があってのWebサイトだと思うんです。

Webサイトを作るときに、多くのWebデザイナーさんがそうしてると思いますが、私もまず Photoshop をつかってWebサイトのデザインを作ります（みんな違うのかな？）。そのデザインを元にして、CSS での装飾をどうしようかなーと考えながら XHTML を書いて行きます。

制作の順番からすると、XHTML より先にまずデザインになっちゃうんですよね。その結果、デザインに合わせたXHTML でついつい書いてしまいがちです。

論理的な文章構造をしたXHTML

Webサイトをインデックスしていくクローラーにとっては XHTML が一番大事。オンページでできる SEO対策だって XHTML をどうするかってことが多いと思うし、検索エンジンのクローラーも主に XHTML をクロールしていきますよね。

見た目が思い通りになっていることは、人に見せるページとしてもちろん重要なんですけど、XHTML の文章が論理的に正しい構造になっているかってことも同じように重要だったりします。

論理的な構造をした XHTML ってどんなものなんでしょう。まずはタイトルがあって、ページのコンテンツを表す大きい見出しがあって、写真や文章などのコンテンツ、必要なら中見出しやリストなどっていう順番が理想です。

正しい文書構造のXHTML
何を当たり前のことを … なんですけど、時々これが知らず知らずのうちに守られてない時があるかもしれないってお話です。デザインを先に作ってあってそれに合わせて XHTML を作っていくとき、論理的な構造を意識して作っていかないと、XHTML の文章構造がおかしなことになる場合があります。

論理的な構造がおかしいマークアップ

簡単な例をあげてみると、このブログのトップページでは次の写真のように記事を並べています。サムネイル画像があって見出し（記事タイトル）があって文章が続きます。

Webデザインレシピのトップページ
これを何も考えずに XHTML を書くと、ついつい左側から書いてしまいがちですし、CSS で配置するときも簡単です。

XHTML

<div class="post">
  <img src="images/example-image1.jpg" alt="ツイッター12月のつぶやき..." />
  <h2>ツイッター12月のつぶやき まとめ 12/1 ~ 12/31 2010</h2>
  <p>ここに文章が続きます ...。</p>
</div>

<div class="post">
  <img src="images/example-image2.jpg" alt="デザインを勉強したことがない人でも..." />
  <h2>デザインを勉強したことがない人でもデザイン...</h2>
  <p>ここに文章が続きます ...。</p>
</div>

CSS

.post img { float: left; }

ちょっと簡単すぎますが、画像を float させてさっきのレイアウトを作りますよね。でも、これを XHTML の文章構造で見てみると下のようになっています。

おかしな文章構造のXHTML
見出しよりも前にコンテンツである画像がきちゃってますし、次の記事のコンテンツである画像が前の記事に入り込んでいる感じです。

正しい文章の構造としたら、以下のようになるはずですよね。

XHTML

<div class="post">
  <div class="wrap">
    <h2>ツイッター12月のつぶやき まとめ 12/1 ~ 12/31 2010</h2>
    <p>ここに文章が続きます ...。</p>
  </div>
  <img src="images/example-image1.jpg" alt="ツイッター12月のつぶやき..." />
</div>

<div class="post">
  <div class="wrap">
    <h2>デザインを勉強したことがない人でもデザイン...</h2>
    <p>ここに文章が続きます ...。</p>
  </div>
  <img src="images/example-image2.jpg" alt="デザインを勉強したことがない人でもデザイン..." />
</div>

CSS

.post .wrap {
  width: 400px;
  float: right;
}
.post img {
  width: 150px;
  float: left;
}

こんな感じにすれば、見出しの後に関連するコンテンツがきちんと収まって、文章の構造的に正しくなりますね。

文章の論理構造からみたWebサイトのヘッダー部分

このブログ、Webデザインレシピのヘッダー部分には、ロゴがあって、その後にナビゲーションと検索フォームが続いてます。一般的なWebサイトではよく見かけるレイアウトですよね。これも普通にデザインどおりに XHTML を書いていくときっと以下のようになると思います。

XHTML

<div id="container">
  <div id="header">
    <h1>Webデザインレシピ（ブログタイトル）</h1>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <form>
      <input type="test" id="search" value="" />
      ... 省略 ...
    </form>
  </div>
  <div id="main">
    <h2>ツイッター12月のつぶやき ... <h2>
    ここにコンテンツ
  </div>
</div>

ブログのトップページあたりだとこれでも違和感がないかもしれませんが、これをシングルページ（独立した記事ページ）でみてみるとこうなります。

ブログの記事ページのXHTML

ナビゲーションや検索フォームって論理的な構造からいったらもっと相応しい場所が他にあるような気がします。それから<h1>タグって、ページで一番大きな見出しなんですけど、ブログの名前ってシングルページ（記事）ではページのコンテンツを表してるとはいえないかもしれません。

理想は<h1>タグが最上部

ブログのシングルページでは<h1>タグをブログタイトルではなくて、記事のタイトルを入れる方法がよくとられています。なのでトップページではブログ名を<h1>タグで囲んでいますが、シングルページ（記事ページ）ではブログタイトルには<h1>タグ、見出しを使わないで、記事タイトルに<h1>タグを入れてみました。

記事タイトルにh1タグ

でもこうすると、<h1>見出しよりも前にナビゲーションのテキストが先にきていてちょっと変ですね。文章の構造的には一番上に<h1>タグ見出しがくるのが理想です。なので思い切ってナビゲーションや検索フォームをページのずーっと下に下げてしまいました。

h1タグを一番上に
文章の論理構造的にはこの方がページのコンテンツと合ってるのかなと思います。

Webデザインレシピでは右にサイドバーがあるレイアウトを使ってるのでそのままコーディングしてますが、コンテンツの後にサイドバーを書いて、CSSでレイアウトしなさいってことはSEO的によく言われてますよね。クローラーはページの上部にあるものを重要視するからだとか …。それならヘッダー部分にも同じ考え方ができるのかなと思ってナビゲーションや検索フォームを思い切って下に下げています。

XHTML

<div id="container">
   <div id="header">
      <h1>ここに記事のタイトル</h1>
  </div>
  <div>
      ここにコンテンツ ...。
  </div>

  <div id="top-segment">
    <div id="logo">Webデザインレシピ（ロゴ）</div>
     <ul>
     <li>about</li>
     <li>contact</li>
     </ul>
     <form>
       ここに検索フォーム
     </form>
  </div>
</div>

ページの下部に記述した #top-segmentの部分がナビゲーションや検索フォームのブロックです。これを CSS でページの最上部に表示するようにレイアウトします。

CSS

#container { position: relative; }

#top-segment {
  position: abolute;
  top: 0;
}

こうすれば XHTML の構造的にはページの下の方にあっても、表示されるのはページの一番上になりますね。もちろん正しいマークアップで書くのは大事だし、SEO 的にも大事なことだと思うので、XHTML validator でチェクしたいですね。でも論理的な文章構造までは XHTML validator でチェクできないので意識してマークアップしたいと思います。

SEO対策って都市伝説みたいなので基本的なことをやればいいのかな

SEO対策として私ができることはこんな風にして正しい XHTML と論理的な文章構造でページを作ることぐらいかなと思います。キーワードの頻出率とか、もちろん大事だとは思うんですけど何をしたから検索順位があがったとか、下がったとかいう因果関係は確認しようがないのかなと … Googleに聞くしかないような気がしてます。

もちろん SEO対策を研究している人もたくさんいて、すごいノウハウを持っていると思うんですけど、私にはそんなノウハウはないし、オンページできることといえば正しいマークアップをすることとか、論理的な文章構造を守るとか、そんなことくらいかもしれません。SEO は苦手です w

今回のデザインリニューアルで XHTML の構造も変わっているので SEO 的にどうなるか楽しみでもあります！とりあえず SEO 的にどうなるのか、後で振り返ることができるように記録として今やってることを書いておきます。

  • All in One SEO Pack（WordPressのプラグイン）で記事ごとにkeyword、descriptionを書いてる。
    All in One SEO Pack
  • Google XML Sitemaps（WordPressプラグイン）でサイトマップを更新してる。
    Google XML Sitemaps
  • SEO Friendly Images（WordPressプラグイン）で記事中の画像のaltタグに記事タイトルを入れてる。
    SEO Friendly Images
    本当は画像毎にきちんと自分でaltタグ内を書けばいいんだけど … 面倒なので、これ使ってます …
    今後の課題にしよう … 自筆 …
  • パーマリンクにキーワードを入れるようにしてる … 英語だけど …
  • トップページはブログタイトルを<h1>、記事ページでは記事タイトルを<h1>にしてる。
  • <h1>タグをページ最上部にしてる。
  • 記事内の見出しが<h2>、<h3>タグになってる。
  • ナビゲーションや検索フォームを XHTML では下の方に書いてる。
  • 記事の<title>タグ内は記事のタイトルだけで、ブログのタイトルを入れてない。
  • XHTML Validatorで合格点。
    でも、ツイッターやソーシャルメディア関連の API などの部分がダメなので記事ページはエラー多い …
    トップ、About、Contact などは OK。
    W3C Markup Validation Service

こんな感じですねー。それはダメだよーとか、もっとこうしたらいいよーとかありましたら教えていただけると嬉しいです！

follow me on twitterfollow me on twitter RSS feedStay up to date via RSS