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

Posted under - Web Design

42

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

HTML + CSS + SEO

Attention

現在ではデザインを変えたので、この記事の中で取り上げている例と、現在のマークアップとは一致していません。

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

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

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

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

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

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

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

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

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

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

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

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

画像・見出し・文章が続くトップページのレイアウト

このブログのトップページ

これを何も考えずに 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 の文章構造で見てみると下のようになっています。

おかしな構造のHTML

ちょっとおかしな構造のHTML

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

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

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;
}

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

2. 文章の論理構造からみた 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>

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

ブログの個別記事の場合

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

2.1. 理想は<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: absolute;
  top: 0;
}

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

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

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

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

今回のデザインリニューアルで、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。

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

Comments

Thank you for the comment.