サイト構造とコンテンツの分離——それってSEOにどう関係するの？

自らを開発者と位置づけ、どんな言語を指定されてもコードが書けると言う人はたくさんいる。しかし、優秀な開発者と卓越した開発者の違いはプログラムにあるんじゃない。つまり、書いたプログラムがどれだけうまく機能するかとか、バグがどれだけ少ないかとは無関係なんだ。卓越した開発者が書くプログラムは、さまざまなコンポーネントがお互いに独立していながらうまく機能する。

今回は、いくつかの例をざっと検証して、同じ考え方をSEOに適用してみたい。さまざまな論理コンポーネントを1つずつ切り離して考えたほうが役に立つ場面はたくさんある。その一例がWebサイトだ。

「MVC」という言葉を聞いたことがある人も多いだろう。これは、モデル・ビュー・コントローラ(Model - View - Controller)の頭文字を取ったもので、Webサイトを構成するさまざまなコンポーネントを切り離すために作られたソフトウェア・パターンの1種だ。MVCの場合、格納された情報（モデル）を、ユーザーインターフェイス（ビュー）から切り離す形で設計されている。コントローラは、ビューとモデルの間の情報伝達を管理する。

大規模な開発チームだと、開発の各段階にエキスパートがいることも多く、モデル（通常はデータベースのマッピングを行う）とすべてのビジネスルールを理解している人が誰かしらいる。フロントエンド（ビュー）では、HTMLとCSSの専門家がいる。僕はこれまで、モデルからコントローラの役割をうまく切り離せたためしがないので、その部分はさらっと流して、みんなに気づかれないことを祈ろう。

Webページのコードを書くのにどのようなソフトウェア・パターンを使うにしろ、サイトの構造と表示の仕方を分離するのは正しいやり方だ（今もそうだし、ずっと以前からもそうだった）。HTMLの中に、ページをどう表示するかという情報を含めるべきではない。HTMLは、ページに必要な構造と論理的意味を示すに留めておくべきなんだ。テーブルを使ってレイアウトしているようなWebサイトでは、こういう重要な点が守られておらず、ほとんどの場合、HTML内に見栄えを指示する情報がたくさん紛れ込んでしまっている。

大半のWebサイトでは、コンテンツをサイトの構造から分離する段階で満足してしまっている。コンテンツをデータベース内に格納し、ページがリクエストされたとき、それをHTMLに埋め込むというやり方が普通だ。

それに対し、僕ら（のほかにも多くの人）は、これをもう一歩進めて、このコンテンツからHTML（の大部分）を剥ぎ取り、マークダウンと呼ばれるマークアップ言語で置き換えて、テキストベースのフォーマットで格納する。こうすれば、クライアントはWebサイトを更新するためにHTMLを学ぶ必要がなくなり、ほんのわずかなルールに従うだけで、論理的に意味付けされたコードが得られるというわけだ。

なるほど、けっこうな理屈だ。しかし、それがSEOにどう役立つのだろう？ いちばん大きな利点は、開発の場合と同じで、サイトのさまざまな部分について、それぞれ別の人間が手分けして取り組めるということだ。サイトのコンテンツと構造を分離することで何がどう変わるのか見てみよう。

1. 技術面のレビュー

サイトに対する技術面のレビューを行う際、修正の必要な個所を、すべてとはいかないまでもかなりの大部分、プロジェクトの初期段階で見つけらるようになる。こうした技術的レビューは、バックエンドを担当するチーム（往々にしてサイトのテンプレートを担当するチームでもある）が実施すべきだ。サイトの構造は本来、いかなるコンテンツの変更とも完全に切り離して調べることができるものだし、そのような形で実装することが可能なものなんだ。

テンプレート化を取り入れていないと、ほぼ間違いなく、ほんのわずかな修正のためにサイトの全ページを更新しなければならない、という苦労を味わうことになる。6、7年前、あるいは8年ぐらい前は、大半のサイトがこういうやり方で作成されていた。そのせいで、そうしたサイトの大部分は、構造部分がめったにアップデートされなかったんだ。

2. コンテンツ作成

大規模な組織では多くの場合、コンテンツを作成している人たちに向かって、「検索キーワードに配慮してくれ」と頼むのはかなり難しい。HTMLを書いてもらうことなんて望むべくもない。でも、コンテンツをテンプレートから切り離しておけば、HTMLも意味的なマークアップも理解していない人たちが作成したコンテンツであろうと、確実に最適化することが可能だ。

3. サイトの設計変更

僕はWebサイトにすぐ飽きてしまうという悪い癖があって、僕がディレクターを務めるDistilledのサイトは、この2年間で大がかりな設計変更を2回行い、その間にも細かな調整を度々重ねてきた。仮にDistilledのコンテンツが、見栄えを決定する情報と一緒くたになってコンテンツ管理システムに格納されていたとしたら、こうした変更はすべて、もっともっと（変更しないほうが得なぐらい）困難になっていただろう。

補足として、僕がいつも不満に思っている例を挙げよう。ソースコードを調べていると、次のような記述を目にすることがある（冗談じゃなくて、本当にあった例なんだ）。

<pre><code><div class="blue-arial-14pt-bold">テキスト</div></code></pre>

こんなクラス名の付け方は意味がない。さて、デザイナーが現れて、上に書いた要素のスタイルを、12ポイントの「Verdana」にして文字色を緑に変えたいと思ったとしよう。「blue-arial-14pt-bold」というラベルの付いたテキストは、今や文字色が緑でフォントは「Verdana」になった。CSSの更新を引き継いだ人は、残されたわけのわからない記述を見て、さぞかし前任者に好感を抱いてくれることだろうね。

一貫性

ページ数の多いサイトの抱える問題点の1つは、何か助けになるツールなしに、全ページのコードを調べるのは不可能だということ。ビューを含むパターンやテンプレートを使用してサイトが記述されているということを知っていれば、あるページにおけるH1タグの使用法が正しいことがわかった時点で、それと似たような他のページでも、きっとH1タグが正しく使われているはずだと確信できるんだ。

僕がここではっきりさせたいのは、ちゃんとしたWebサイト（やツール、あるいはプログラムなど）が書けるだけでなく、「正しい」書き方を知っている優秀な開発者がいれば、大きな違いが生じるということだ。だからといって、すぐ目に見える恩恵をSEOにもたらしてくれるというわけではないけれど、コンテンツの開発や作成に役立つものであれば何でも、長期的にはSEOの取り組みをより効果的なものにしてくれるはずだよ。