「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？
SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。
SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。
免責事項的な
SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、その効果を保証するものではありません。「ふーんそんなことやってるんだ」程度の気分で読んでください。
アウトラインとは何か
アウトラインは（大雑把に言えば）機械から見たあなたのページの構造です。
つまりアウトラインが美しいページは、検索エンジンにより正しく解釈してもらいやすい、と言えそうです。適切に解釈してもらえれば、より適切なユーザに提示してもらえるようになりますね。
もし、なんでもかんでも検索ページに載りさえすればいい、と考えているのだとしたら、恐らくそれは間違いです。少なくともGoogleはユーザが検索結果をクリックしてから検索ページへ戻ってくる時間を計測してるはずです。不適当な相手に表示さると、それがまわりまわって検索順位の低下という形で帰ってくる可能性があるわけです。
何はともあれアウトラインを確認してみる
アウトラインを解析できるサイトです。HTML直接渡すだけでなく、URLを指定して解析させることもできます。
試しに気になるサイトのアウトラインを確認してみましょう。例えばナナピはアウトラインが綺麗です。
アウトラインの決まり方
解説しているサイトはたくさんあるので、適当にググってください。大雑把に言えば section や h1 要素が存在すると新しくアウトラインが作られます。
詳しい仕様は下記で読めます。
アウトラインが綺麗なHTMLを書くコツ
アウトラインを意識しようにもデザインの関係もあってなかなか綺麗にできないかも知れません。
そういう場合は先にアウトラインを決めてしまってから、デザイン用の div や span 要素を付け足していく、という手順を踏むといいです。
まず最初に綺麗なアウトラインを作ってしまう
HTML5にしろ、それ以前にしろ、アウトラインに影響を与えるタグと与えないタグというのは明確です。なので、まず先にアウトラインに影響を与える要素だけを並べて、理想的なアウトラインを書いてみましょう。
例えばこんな感じに書いたとします。（便宜上 body タグとかは省略してます）
<h1>サイト名</h1>
<section>
<h1>タイトル</h1>
<section>
<h1>見出し</h1>
<h2>見出し2</h2>
</section>
</section>
<section>
<h1>コメント</h1>
<section>
<!-- コメント -->
</section>
</section>
<section>
<h1>投稿者情報</h1>
</section>
できあがったHTMLのアウトラインを確認してみます。先ほどのサイトを開いて作ったHTMLをコピペして解析してみます。上記のHTMLの場合は次のように返されます
- サイト名
- タイトル
- 見出し
2. 見出し2- コメント
- Untitled Section
- 投稿者情報
おかしいなと思う箇所があったら試行錯誤をして綺麗に整えましょう。もちろんこのあとのデザインのことも考えて、要素の順番を入れ替えるとかはしても良いと思います。
schema.org
そうしたら次は（余裕があれば）schema.orgに従ったマークアップを行なっていきます。これも細々したデザインの調整を行う前にやってしまう方がいいと感じています。
schema.orgについて詳しくは次回の schema.orgに準拠してクローラと会話しよう を参照してください。
アウトラインに影響しないタグを書いていく
そうしたらコンテンツに肉をつけて行きましょう。ここから先で書いていくのは全てアウトラインに影響しない要素なので、先ほど作ったアウトラインは綺麗なまま保たれるはずです。
アウトラインが綺麗になっていると section タグなどにそのままCSSを当てれば、わざわざ div とかいれなくても大丈夫、という場合もあるかと思います。
しかし、そういう場合でも section にCSSを当てずに、それをラップする div を作ってそれにclassやidを振って、CSSのルールを書いた方がいいでしょう。
何故かというと、アウトラインに比べてデザインの方が寿命が短いからです。
section にCSSを書いていると、アウトラインと実際の見た目の結合度が高くなります。その結果として、ちょっとしたデザイン変更のときについでにアウトラインが崩れる、みたいなことが起こったりします。
まとめ
- アウトラインは機械からどう見えるかを示すものです。検索エンジンに正しく理解してもらうためにも、余裕があるなら綺麗にしましょう。
- アウトラインは一番最初に整えましょう。
QiitaのSEO事情
- HTMLのアウトライン意識してますか？
- schema.orgに準拠してクローラと会話しよう