連載編集長ブログ―安田英久
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担のメルマガを試してみる（毎週月曜日配信）この記事へのコメント
必見！ はてブホッテントリ記事
Webサイトを作ったらまずやるべきことチェックリスト 2342 users- ○○円ならどこまでできる!? ウェブサイト制作の相場早見表 1836 users
- Dropbox徹底解剖 - 一度使ったら手放せなくなる! オンラインストレージサービ… 1753 users
- メンテナンス中画面を出す正しい作法と.htaccessの書き方 1640 users
- SEO基本技術のチートシート（トラの巻）を作ってみた 1369 users
- 検索エンジンが順位を決める53の要因（39人のSEOプロが評価した重要度とコメント付き） 1240 users
- “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 1204 users
- 企業で使えるオープンソースCMS一挙12種類解説（機能やインストール/管理の難易度評… 1183 users
- 40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート 1117 users
- SEO重要要因ランキング（Yahoo! JAPAN版）―日米SEOプロ60人が評価し… 928 users
この記事へのトラックバックURL:
ver1.3 では、PayPal によるクレジットカード決済やデジタルコンテンツのダウンロード販売に対応するなど、ショッピングカートが強化さ...
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には目次があります。
そのページ内に、各アンカーにリンクされている目次を作成してください
>>1244
安田です。
> 要はidを付けているそのページの中にアンカーリンクの付けた目次が必要なのではないでしょうか？
ああ、そこちゃんと書いてませんでしたね。グーグルの記述にはそうなっています。
ただ、目次が大切なのではなく、そのアンカーの場所へのリンクがどこかから張られていないと、グーグルが「場所」として認識できないということなのだと理解しています。
ですので、各ページに目次を置くスタイルが適切でない場合は、どこか他の場所から各アンカーへのリンクを張っておくといいのではないかと。
現状わかっている条件
>>1246
サイズ糟谷です。
せっかくなので条件を明確になればいいなと思います。
自社サイトではまだ反映がされていませんが現状わかったこと。
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％
そのページ内に目次が存在します。
これは必須だと思っています。
他に調べている人いないですかね？
必須な理由について目的と技術的な点の２点からその方が良いと考えられます。
そのページ内にアンカーリンクが必要な理由
>>1248
サイズ糟谷です。
そのページ内にアンカーリンクが必要な理由ですが
以下のように考えます。
まず、この機能の目的がページ検索に対しての補助機能であるということ。
id/nameを設定してあるページに対してそこへのアンカーリンクは
googleが自動生成して表示することは可能ですが
そのid/nameが本来の見出しとして設定されているものかは機械的に判別がつきません。
ふさわしくないリンクが検索結果に大量発生する可能性があります。
そのサイト内にアンカーリンクがある場合、サイト側が見出しとして使っている可能性が高い、
また、サイト側でアンカーリンクとして使っていないものを検索結果にリンクとして
googleが表示する必要性もないと思われます。
それではページ内ではなくサイト内にあれば良いのではということになりますが
ページ外アンカーリンク、特にサイト外部リンクの場合、ページ間の関連性など
そのリンクの評価を入れなければならなくなります。
そのページ内にアンカーリンクがある場合、そのページのみで
制限と評価が行えるので現時点ではそうしているというのが妥当だと思います。
セマンティックWebへ向けてコンテンツの粒度をページ単位からトピック単位でも
検索できるようにしていく為の現時点ではあくまで補助機能としては十分だと思います。
この件はトピックの分割が目的で分割されたトピックの利用に関しては
リッチスニペットで検索結果をより分かりやすく
http://googlejapan.blogspot.com/2009/11/blog-post_20.html
Microformats あるいは RDFa の議論とした方が望ましいかと思います。
Re: そのページ内にアンカーリンクが必要な理由
>>1249
たしかに。どこにリンクがあっても技術的には大丈夫そうですが、検索結果としての扱いを考えると、ページ内にあるべきものという考えが良さそうですね。
Drupalでそういったモジュール……だれか作ってくれないかな……。
Drupal 6ならそんな感じのがあるんですけどね。
なるほど便利そうです
さすがGoogleといいますか、便利な機能ですね。
下側の例は少々紛らわしい気もしますが、ユーザビリティ向上につながりそうです。
あとまあ、CMSの機能というよりは、使い手側の意識の問題も大きそうですね。
Re: なるほど便利そうです
>>1237
鎌田さん、コメントありがとうございます。
> 使い手側の意識の問題も大きそうですね
いや、言いたかったのは、せっかくCMSという仕組みが普及してきているので、CMSがここらへんを自動的に処理してくれれば、使い手がどんな人でもうまくいきますよね、ということなのです。
意外と必須の機能になるんじゃないかな、なんて思ってます。
無作為なHタグ
>>1238
いえ、僕のコメントは、糟谷さんのコメントに絡んでいるのですが、
いくら機能として搭載されても、無作為なHタグを書かれたらCMSとしては判断しにくいでしょう。
もちろんCMSの機能がどこまで厳格かということにもよりますが、Hタグだからといって全てにアンカーをつけるというわけにはいかないはず。 本当にそれがHタグとして相応しいのかどうかを、CMSでは判断しにくいでしょう、ということです。
自動化するのであれば、糟谷さんのコメントのように、特定のHタグに制限するか、使い手側が意識を持ってHタグを使用するか、ということになると思います。
Re: 無作為なHタグ
>>1241
なるほど。見出し以外の目的でh要素を使うという発想はありませんでした。たしかに利用者の意識が重要ですね……。
すばらしい情報ありがとうございます。
安田様
いよいよセマンティックWeb夜明け前という感じでしょうか。弊社CMS、Web Meister ですがhttp://www.web-meister.jp/ 元々、見出しにidやnameを付けれる仕様です。実装しても何の意味もなかったので今まで一度も実装していませんが。h2、h3にidやnameを自動的に付ける際の注意点として全てに付ければ良いのではなく、それが「見出し」なのか「本文」なのかをどう判別するかという点があります。Web Meister の場合はコンテンツエリアを分割されたXMLモジュールで持っていてそれぞれが「見出し」、「本文」を持っているので「本文」中のh2、h3には付与せず、「見出し」のみに付与することができます。そんな感じです。
さすがWeb Meister
>>1236
おお、やっぱり実装してますか。せっかくの機能なので、実装しているベンダーさんは製品の特徴の1つとして押し出していくといいと思いますよ。
ちなみに、本文中の見出し（小見出し）にも、アンカーは付いているほうがいいと思いますよ。べつにグーグルのSERPがどうであれ、メールやTwitterで「ここ」とズバリの場所を指したURLを送れるメリットがありますから。
まずはWeb Meister サイトに実装します。
>>1239
安田様
自分でできれば今すぐにでもやりたいのですがエンジニアの稼働に空きがないので12月にはWeb Meister サイトに実装します。結果についてはまた報告します。
この辺は事例が増えてからどうすべきということは議論されてくるのだと思いますが、リスト表示、強調表現の代わりとしてh2、h3を使っていることもあると思います。その場合、h2、h3だけで本文が空ということが発生するのであんまりよろしくないと個人的には思います。
それは間違ったマーク付けですよね
>>1240
>
これは単純に間違ったマーク付けと言えるので、CMS側としてはこれらの間違ったケース避ける工夫よりも、ユーザーが間違ったマーク付けをしないようなUIや制限、という方向でがんばっていただきたいです。CMSの選定、提案を行うエージェンシー側からすると、あまりにも高い編集自由度をユーザーに与えることで本来意図したデザインを逸脱してしまうという危惧が常にありますので…。
なんか話がずれてしまった気がしますが、それを踏まえた上での見出し要素のへID付与は粒度の高いコンテンツへのリンカビリティを生みますので、SEO以外でも他のサイトからのリンクを期待できるかもしれない良い施策だと思います。って同じ事をすでに安田さんが書いてましたね。
ユーザーが間違ったマーク付けをしないようなUIや制限
>>1250
小久保さん
> CMS側としてはこれらの間違ったケース避ける工夫よりも、
> ユーザーが間違ったマーク付けをしないようなUIや制限、
> という方向でがんばっていただきたいです。
ですね。ただ、なにをやってもユーザーさんは想定外の使い方をするものなのが、CMSベンダーさんや実装者さんとしては頭の痛いところだと思います。
Web業界の人 「それはHTMLとしておかしなマークアップです」
普通の人 「いいじゃん、見た目はちゃんと見えるんだから。何が悪いの？」
こういった会話が日常的に、あちこちでされているんでしょうね……
ここらへんは、エンドユーザーさん（CMSを使って更新する人）のリテラシーに応じてテンプレートの実装を変えていったり、CMS側としてそれをやりやすいように何通りかのインターフェイスを用意しておいて実装者さんが選べるようにしたりできるといいですね。
CMSのマークアップの件
>>1252
小久保さん
ご無沙汰しています。
CMSでのマークアップの件ですが
こんなことができるわけです
これをCMS側でできなくするにはここでは「題名」以外にhを使えなくすることになります。
要は使えるか使えないかの設定をすることになりますが
使える場合、CMSがそのタグが文脈的に合ってる合っていないを判別することはできません。
それなのでここでは「コメント」に入っているhにはidを付けずに「題名」のみにidを付けることで
間違った使い方をしている可能性があるものにはidをふらない制限をつけることができます。
現状ではこれが妥当だと思っています。
それ以上はユーザの意識を高める方向性になると思います。
見出し以外のh[1-5]要素
>>1240
上のコメントツリーでもやっと理解できましたが、
> リスト表示、強調表現の代わりとしてh2、h3を使っていることもあると思います。
そういう発想、たしかに昔は自分でもしていましたね（blockquoteで左インデントを付けるとか）。
まぁでも、個人的には、ページ内のすべての場所に固有の場所idが存在してもいいと思うので、べつにそういう場合にもid付けても別にいいんじゃないかな、とは思いますが。
見出しだけじゃなくて、段落、画像、オブジェクト、リスト、引用、div、あらゆる要素にidが付いていると、意外と便利じゃないかな、と（特にブロック要素）。自動処理であまりにも長いハッシュとか付けると無駄にHTMLのファイルサイズが大きくなるので良くないですが。
おもしろそうだったので、実装してみました。
>>1243
RCMSというCMSを開発しているのですが、当記事を拝見して面白そうだったので、実装してみました。
h2、h3タグでIDがふられていないタグ全てに自動的にウィキペディアと同じロジックでIDがふられます。
ちょっと、IDが重複してしまう危険性があるんですが。。
無料版で開発に協力していただいている500サイトに適用されるので、試行錯誤してみます。
マイクロフォーマットへの流れなんでしょうね。
Googleもh2、h3全てにIDをふられると重要度などがわからなくなってしまうから、目次としてリンクされているかどうかという点を判定要素として使っているような感じですね。（同じページとは限らず）
なので、SEOとして有効にするには目次も作ってあげないといけないですが、その辺がSEOとページ設計とのバランスなんでしょうねー。
自己レスですが。
>>1269
RCMSではサイトマップも自動的に作成されるのですが、サイトマップに各ページのhタグへのリンクも自動的に書いておくとSEO的にもユーザーにとってもいいのかも！と思いましたが、hタグを正しくつかってもらえてない場合にサイトマップが逆に見難くなってしまうかも。。