SEOに強いCMSはすべての見出しにid/nameを自動で付けるようになる
今日は、CMSとSEOの話題を。グーグルが検索結果の表示にある変更を加えたことで、今後、CMSでは、コンテンツのHTML出力にまた新しい仕組みを入れるのが、SEO向けの機能として重要になりそうなのです。
グーグルは10月末に、検索結果の表示のなかに、以下の2つの機能を追加しました。
- ページの内容一覧と各セクションへのリンク
- ページのなかで検索キーワードに合致している部分に直接ジャンプする機能
これまでの検索結果は「ページ」へのリンクでしたが、「ページ内の各部分」への直接リンクが検索結果に表示されるようになったということです。
具体的な例は、グーグル公式ブログの「新しくなったスニペットで検索結果の目的の場所までひとっ飛び」の記事に示されているものを見るのがわかりやすいでしょう。
→ http://googlejapan.blogspot.com/2009/10/blog-post_14.html
どちらの機能も、基本的に、
- ページのコンテンツが見出し（h2とかh3）で区切られている
- 各見出し（h2とかh3）にアンカーが付けられている
という状態が前提になっていて、自動処理されています。
→ http://googlewebmastercentral-ja.blogspot.com/2009/10/blog-post_29.html
ここでいう「アンカー」とは、idやnameの属性のことです。ふつう、見出しというと
という書き方が多いのですが、これを
のようにしておけば、リンクURLの最後に「#cms_seo_feature」を付けてアクセスするとブラウザはこの見出しまで自動的にスクロールしてくれます。この仕組みを利用して、検索結果ページから直接そこに飛べるようになるということです（仕様ではアンカー名の指定はnameでもidでもどちらでもOK）。
せっかくSEOをして検索からユーザーを誘導できても、ページ内のどこに目的のコンテンツがあるか見つけられず離脱してしまうユーザーがいるともったいないですよね。この機能は、そういった事態を解決してくれますし、そもそも検索結果ページでわかりやすく、クリックしやすくなっています。
となると、サイトのすべてのページで見出しにアンカー名を設定していきたくなるのですが、コンテンツを作るときに見出しごとにid属性を手で入れていくのは大変なものです。ですから、コンテンツ制作者がふつうにh2やh3などで見出しを入れておくと、CMSが自動的にHTMLをチェックして、idまたはnameが付いていない見出しすべてにアンカー名を付けていってほしいところ。そして、ページ内の見出しの一覧を自動的に作って、そこから各見出しへリンクを張っておいてくれればいいですよね（GoogleサイトやPukiWikiなど、同様の機能を備えているCMSも昔からあるようです）。
CMSというとコンテンツの管理機能が重視されると思いますが、こういった機能があれば、Web担当者が意識しなくても検索エンジンからの誘導のチャンスが増えるので、導入する側にとって良いCMSだということになりますよね。CMSベンダーさんたち、いかがでしょうか？
h2タグにname属性を付けた例を示していましたが、そもそもHTMLの仕様ではh[1-5]要素にname属性は使えませんでした。かといってh[1-5]要素にa要素を入れてそこでname属性を使う例を示すのも適切ではないので、例ではidだけにしました。
XHTMLの仕様では、ページ内の場所（fragment）の指定はnameではなくidを使う必要があると明確に定義されているので、XHTMLでページを作るときはnameは使えないんですよね。HTMLの仕様ではa要素のname属性も使えますし、name属性のほうが文字参照を使えるのでURLをよりわかりやすくできて良いのですが。
安田 英久（やすだ・ひでひさ）
株式会社インプレス
Web担当者Forum 編集統括（初代編集長）
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、Webサイト 「Web担当者Forum」初代編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開いる。現在は編集統括として媒体に携わる。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
- Twitter：@Hidehisa
- Facebook：https://www.facebook.com/hidehisa.yasuda
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
コメント
すばらしい情報ありがとうございます。
安田様
いよいよセマンティックWeb夜明け前という感じでしょうか。弊社CMS、Web Meister ですがhttp://www.web-meister.jp/ 元々、見出しにidやnameを付けれる仕様です。実装しても何の意味もなかったので今まで一度も実装していませんが。h2、h3にidやnameを自動的に付ける際の注意点として全てに付ければ良いのではなく、それが「見出し」なのか「本文」なのかをどう判別するかという点があります。Web Meister の場合はコンテンツエリアを分割されたXMLモジュールで持っていてそれぞれが「見出し」、「本文」を持っているので「本文」中のh2、h3には付与せず、「見出し」のみに付与することができます。そんな感じです。
さすがWeb Meister
おお、やっぱり実装してますか。せっかくの機能なので、実装しているベンダーさんは製品の特徴の1つとして押し出していくといいと思いますよ。
ちなみに、本文中の見出し（小見出し）にも、アンカーは付いているほうがいいと思いますよ。べつにグーグルのSERPがどうであれ、メールやTwitterで「ここ」とズバリの場所を指したURLを送れるメリットがありますから。
まずはWeb Meister サイトに実装します。
安田様
自分でできれば今すぐにでもやりたいのですがエンジニアの稼働に空きがないので12月にはWeb Meister サイトに実装します。結果についてはまた報告します。
この辺は事例が増えてからどうすべきということは議論されてくるのだと思いますが、リスト表示、強調表現の代わりとしてh2、h3を使っていることもあると思います。その場合、h2、h3だけで本文が空ということが発生するのであんまりよろしくないと個人的には思います。
見出し以外のh[1-5]要素
上のコメントツリーでもやっと理解できましたが、
> リスト表示、強調表現の代わりとしてh2、h3を使っていることもあると思います。
そういう発想、たしかに昔は自分でもしていましたね（blockquoteで左インデントを付けるとか）。
まぁでも、個人的には、ページ内のすべての場所に固有の場所idが存在してもいいと思うので、べつにそういう場合にもid付けても別にいいんじゃないかな、とは思いますが。
見出しだけじゃなくて、段落、画像、オブジェクト、リスト、引用、div、あらゆる要素にidが付いていると、意外と便利じゃないかな、と（特にブロック要素）。自動処理であまりにも長いハッシュとか付けると無駄にHTMLのファイルサイズが大きくなるので良くないですが。
おもしろそうだったので、実装してみました。
RCMSというCMSを開発しているのですが、当記事を拝見して面白そうだったので、実装してみました。
h2、h3タグでIDがふられていないタグ全てに自動的にウィキペディアと同じロジックでIDがふられます。
ちょっと、IDが重複してしまう危険性があるんですが。。
無料版で開発に協力していただいている500サイトに適用されるので、試行錯誤してみます。
マイクロフォーマットへの流れなんでしょうね。
Googleもh2、h3全てにIDをふられると重要度などがわからなくなってしまうから、目次としてリンクされているかどうかという点を判定要素として使っているような感じですね。（同じページとは限らず）
なので、SEOとして有効にするには目次も作ってあげないといけないですが、その辺がSEOとページ設計とのバランスなんでしょうねー。
自己レスですが。
RCMSではサイトマップも自動的に作成されるのですが、サイトマップに各ページのhタグへのリンクも自動的に書いておくとSEO的にもユーザーにとってもいいのかも！と思いましたが、hタグを正しくつかってもらえてない場合にサイトマップが逆に見難くなってしまうかも。。
それは間違ったマーク付けですよね
>
これは単純に間違ったマーク付けと言えるので、CMS側としてはこれらの間違ったケース避ける工夫よりも、ユーザーが間違ったマーク付けをしないようなUIや制限、という方向でがんばっていただきたいです。CMSの選定、提案を行うエージェンシー側からすると、あまりにも高い編集自由度をユーザーに与えることで本来意図したデザインを逸脱してしまうという危惧が常にありますので…。
なんか話がずれてしまった気がしますが、それを踏まえた上での見出し要素のへID付与は粒度の高いコンテンツへのリンカビリティを生みますので、SEO以外でも他のサイトからのリンクを期待できるかもしれない良い施策だと思います。って同じ事をすでに安田さんが書いてましたね。
ユーザーが間違ったマーク付けをしないようなUIや制限
小久保さん
> CMS側としてはこれらの間違ったケース避ける工夫よりも、
> ユーザーが間違ったマーク付けをしないようなUIや制限、
> という方向でがんばっていただきたいです。
ですね。ただ、なにをやってもユーザーさんは想定外の使い方をするものなのが、CMSベンダーさんや実装者さんとしては頭の痛いところだと思います。
Web業界の人 「それはHTMLとしておかしなマークアップです」
普通の人 「いいじゃん、見た目はちゃんと見えるんだから。何が悪いの？」
こういった会話が日常的に、あちこちでされているんでしょうね……
ここらへんは、エンドユーザーさん（CMSを使って更新する人）のリテラシーに応じてテンプレートの実装を変えていったり、CMS側としてそれをやりやすいように何通りかのインターフェイスを用意しておいて実装者さんが選べるようにしたりできるといいですね。
CMSのマークアップの件
小久保さん
ご無沙汰しています。
CMSでのマークアップの件ですが
こんなことができるわけです
これをCMS側でできなくするにはここでは「題名」以外にhを使えなくすることになります。
要は使えるか使えないかの設定をすることになりますが
使える場合、CMSがそのタグが文脈的に合ってる合っていないを判別することはできません。
それなのでここでは「コメント」に入っているhにはidを付けずに「題名」のみにidを付けることで
間違った使い方をしている可能性があるものにはidをふらない制限をつけることができます。
現状ではこれが妥当だと思っています。
それ以上はユーザの意識を高める方向性になると思います。
なるほど便利そうです
さすがGoogleといいますか、便利な機能ですね。
下側の例は少々紛らわしい気もしますが、ユーザビリティ向上につながりそうです。
あとまあ、CMSの機能というよりは、使い手側の意識の問題も大きそうですね。
Re: なるほど便利そうです
鎌田さん、コメントありがとうございます。
> 使い手側の意識の問題も大きそうですね
いや、言いたかったのは、せっかくCMSという仕組みが普及してきているので、CMSがここらへんを自動的に処理してくれれば、使い手がどんな人でもうまくいきますよね、ということなのです。
意外と必須の機能になるんじゃないかな、なんて思ってます。
無作為なHタグ
いえ、僕のコメントは、糟谷さんのコメントに絡んでいるのですが、
いくら機能として搭載されても、無作為なHタグを書かれたらCMSとしては判断しにくいでしょう。
もちろんCMSの機能がどこまで厳格かということにもよりますが、Hタグだからといって全てにアンカーをつけるというわけにはいかないはず。 本当にそれがHタグとして相応しいのかどうかを、CMSでは判断しにくいでしょう、ということです。
自動化するのであれば、糟谷さんのコメントのように、特定のHタグに制限するか、使い手側が意識を持ってHタグを使用するか、ということになると思います。
Re: 無作為なHタグ
なるほど。見出し以外の目的でh要素を使うという発想はありませんでした。たしかに利用者の意識が重要ですね……。
web-meister.jp で実験しています。
「Web Meister」マニュアルページで実験しています。
http://www.web-meister.jp/demo/publishing/index.html
元々、これ以下のページはアンカーリンクのためにフォームから手作業でidを付けていましたが、どう検索しても各セクションへのリンク がでません。それなので
http://googlewebmastercentral-ja.blogspot.com/2009/10/blog-post_29.html
を詳しく読んだところ、
3. そして、そのページ内に、各アンカーにリンクされている目次を作成してください
と記載されています。要はidを付けているそのページの中にアンカーリンクの付けた目次が必要なのではないでしょうか？昨日、そのページ内に目次を付けてみたのでインデックスが更新された後、セクションリンクが出るのであれば目次が必要なのだと思います。セクションリンクがもっとも良く出るのはwikipediaですがwikipediaには目次があります。
そのページ内に、各アンカーにリンクされている目次を作成してください
安田です。
> 要はidを付けているそのページの中にアンカーリンクの付けた目次が必要なのではないでしょうか？
ああ、そこちゃんと書いてませんでしたね。グーグルの記述にはそうなっています。
ただ、目次が大切なのではなく、そのアンカーの場所へのリンクがどこかから張られていないと、グーグルが「場所」として認識できないということなのだと理解しています。
ですので、各ページに目次を置くスタイルが適切でない場合は、どこか他の場所から各アンカーへのリンクを張っておくといいのではないかと。
現状わかっている条件
サイズ糟谷です。
せっかくなので条件を明確になればいいなと思います。
自社サイトではまだ反映がされていませんが現状わかったこと。
google のヒントより
> 1. まず、ページが複数のトピックから構成される場合には、各トピックを明確に異なるセクションに分けてください
id/nameで異なるセクションに分けていればhではなく、a nameでも良い。
googleの事例
http://tatujin.net/influenzakensa.html
> 2. 次に、各セクションにわかりやすい名称（例えば「第 2 章」などではない名称）のアンカーを埋め込んでください
id/nameで異なるセクションに分けていればページ内で異なるものと認識できれば数字でも良い。
googleの事例
http://tatujin.net/influenzakensa.html
> 3. そして、そのページ内に、各アンカーにリンクされている目次を作成してください
これに関しては現在、十数サイト見ましたが今のところ100％
そのページ内に目次が存在します。
これは必須だと思っています。
他に調べている人いないですかね？
必須な理由について目的と技術的な点の２点からその方が良いと考えられます。
そのページ内にアンカーリンクが必要な理由
サイズ糟谷です。
そのページ内にアンカーリンクが必要な理由ですが
以下のように考えます。
まず、この機能の目的がページ検索に対しての補助機能であるということ。
id/nameを設定してあるページに対してそこへのアンカーリンクは
googleが自動生成して表示することは可能ですが
そのid/nameが本来の見出しとして設定されているものかは機械的に判別がつきません。
ふさわしくないリンクが検索結果に大量発生する可能性があります。
そのサイト内にアンカーリンクがある場合、サイト側が見出しとして使っている可能性が高い、
また、サイト側でアンカーリンクとして使っていないものを検索結果にリンクとして
googleが表示する必要性もないと思われます。
それではページ内ではなくサイト内にあれば良いのではということになりますが
ページ外アンカーリンク、特にサイト外部リンクの場合、ページ間の関連性など
そのリンクの評価を入れなければならなくなります。
そのページ内にアンカーリンクがある場合、そのページのみで
制限と評価が行えるので現時点ではそうしているというのが妥当だと思います。
セマンティックWebへ向けてコンテンツの粒度をページ単位からトピック単位でも
検索できるようにしていく為の現時点ではあくまで補助機能としては十分だと思います。
この件はトピックの分割が目的で分割されたトピックの利用に関しては
リッチスニペットで検索結果をより分かりやすく
http://googlejapan.blogspot.com/2009/11/blog-post_20.html
Microformats あるいは RDFa の議論とした方が望ましいかと思います。
Re: そのページ内にアンカーリンクが必要な理由
たしかに。どこにリンクがあっても技術的には大丈夫そうですが、検索結果としての扱いを考えると、ページ内にあるべきものという考えが良さそうですね。
Drupalでそういったモジュール……だれか作ってくれないかな……。
Drupal 6ならそんな感じのがあるんですけどね。