引用です
2013年9月11日 の記事
http://html5experts.jp/tsuj/2333/

HTML5のSEO－マークアップで注意すべき３つのポイント
辻 正浩（株式会社so.la）
Canvas,CSS,SEO,マークアップ
2013年9月11日

HTML5を採用したWebサイト構築をする際に、SEOはどのようなポイントを考慮すべきなのか？　HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説します。

HTML5化によるSEO効果の影響はあるか

WebサイトをHTML5でマークアップをする際、特にHTML4などからHTML5にリニューアルする場合に、それによって検索エンジンによる評価が変化するのかどうかは非常に気になる問題です。

dtl_thm_016

各検索エンジンでは、この疑問について公式に説明しています。GoogleはHTML5化することでプラスにもマイナスにもならないと度々公式に言及していますし、Bingは「List of things you really ought to know as an SEO today(今SEOとして本当に知っておきたいこと)」と題した記事の中で、HTML5について言及しています。こうした情報を併せて考えると、主要な検索エンジンは、HTML5化は問題ない、もしくは推奨しているとさえ言っても良いでしょう。

しかし、本当にHTML5化することでSEO上の問題は起きないものでしょうか。 私はSEOの専門家として、HTML5のWebサイトに多く関わってきました。お客様のWebサイトでのHTML4からHTML5への変更も何度か経験しましたが、実際HTML5化で検索流入が伸びたことも減ったこともありません。しかし過去に数度、HTML5化を含むリニューアルの結果、大幅に検索流入を落としたWebサイトの話を聞いたことがあります。

「問題ない形のHTML5化」であれば、検索エンジンはその評価を変えることはないと私は考えています。しかし、SEOの知識を一切持たずにHTML5化すると、犯しがちなミスもあります。 本稿では、SEO上の問題を起こさずにHTML5化するために注意すべきポイントを説明しましょう。

HTML5のマークアップをする際の注意点

FlashからHTML5へ。リッチな表現のSEO手法

ほんの1～2年前までWebでリッチな表現をするには主にFlashが使われていましたが、FlashコンテンツのSEOには明確なベストプラクティスがありました。それは、FlashコンテンツはJavaScriptを使って呼び出すようにし、JavaScriptを扱えない環境向けにテキスト情報を追加するという方法です。noscript要素やSWFObject等を使った代替要素としてのテキスト情報を加えることや、それに加えてページ分割やSWFAddressを併用することで、Flashであっても非常に高いレベルの検索エンジン対応が行うことが可能でした(この詳細は4年前の拙筆ですがこの記事に詳細を記してあります)。

FlashコンテンツのSEOは、このように代替要素を使用する方法が一般的でした。その手法を検索エンジンも公式に推奨する場合もありましたし、検索エンジンのアルゴリズムとしても、Flashを認識するようになっていきました。その結果、Flashを活用したリッチなコンテンツを検索できる状態にする方法が確立したのです。しかしそのようなFlashの登場から、そのSEOのベストプラクティスが確立するまでには、長い期間を必要としました。

さて現在ではFlashを使う機会は減り、同じニーズに対してHTML5を使うシーンが多くなりました。HTML5では様々な描画を行うcanvas要素や、動画を再生するvideo要素、音声を再生するaudio要素などが追加されています。それらの新要素を中心としたWebページを制作する場合、どのように検索エンジンに認識させるべきか、という議論はほぼ行われていません。

この方法として、いくつかの方法が考えられます。例えばcanvas要素は、要素内にフォールバック・コンテンツとして、テキスト情報を組込むことができます。2013年9月1日現在、このテキスト情報はGoogle、Bingの検索エンジンでは認識しています。しかし一部の検索エンジンでは、canvas要素のフォールバック・コンテンツを認識しませんし、サイト内検索等で使われるシステムでは認識しないことがありました。対応されている検索エンジンにおいても、検索エンジンが公式にサポートしているものではありません。今後扱いがどのように変わっていくかも不透明でしょう。フォールバック・コンテンツだけに頼ることは不安があります。

Flashコンテンツが一般化することで、検索エンジンに認識させる様々な方法が試されて検索エンジンも対応を始めたように、今後HTML5が一般化した後にリッチコンテンツを検索エンジンに認識させるためのベストプラクティスが出てくるものでしょう。しかしそれが確立していない現状では、いろいろと試す必要があるのです。

さて、実際に現段階ではどのようにするべきでしょうか。まず考えられるのは別ページを作ることです。Flashが一般化する前は、Flashを中心としたページとは別に同じ内容をテキスト中心で知らせるWebページが作られていたように、テキスト中心の別ページを作ることが確実でしょう。ただそれが困難な場合には、何らかの方法でテキストでの代替要素を配置するしかありません。FlashはJavaScriptで呼び出すことが多かったため、代替要素が配置しやすかったのですが、JavaScriptを使わないHTML5の新要素では別の方法を考える必要があります。

代替要素を作るためには、CSSを利用した切り替えを用意しておくことが、現段階では一番お勧めできる方法です。ユーザへの適切な情報提供を目的としてテキストを切り替える形で配置することは問題がないと、Googleは公式に説明していますので、Canvas等のリッチな表現を使いたくない人向けの情報も同ページで提供した上で、切り替えて使用できるようにするのが最も適切でしょう。

canvas要素の場合にはフォールバック・コンテンツとしてのテキスト情報追加も選択肢の一つです。先にも書きました通り、一部検索エンジンは対応していませんし、今後の扱いは不透明です。しかし日本で圧倒的なシェアを持つGoogleは現段階では対応していますし、今後についても、HTML5の公式仕様に基づいたマークアップを大きく不利にする可能性は低いものです。対応しなくてはならない検索エンジンがGoogleだけなのであれば、フォールバック・コンテンツは良い選択肢でしょう。

ここまで、リッチな表現のSEO手法について書いてきましたが、本来リッチな表現を検索させる上で、最も重要な事は技術的な要件ではありません。そもそもの話ですが、検索される必要がある情報をリッチコンテンツを中心として制作するのが誤りでしょう。そのWebページで伝える事を表現するのに適切な手法は何なのか、ということから考えてみることをお勧めします。

SEO効果があるh要素の使い方

HTML5とSEOを考える上で、よく言及されるのはhx要素をどうするかということです。

HTML5ではh1要素を複数設置できるようになりました。しかしh1要素の扱いはSEOの観点で極めて重要です。Googleが公式に配布しているSEO初級者向けの「検索エンジン最適化スターターガイド」でも「見出しタグを適切に使おう」として、1ページ丸々を費やしてユーザに説明をしています。実際、数年前のように、h1要素とするだけで順位アップといった単純な効果はありませんが、hx要素をうまく使って文書を整理することは、検索エンジンもその文書の構造を把握しやすくなり、様々な面でプラスとなります。

h要素のSEO要件が語られる際に必ず言われることとして、「h1要素はそのページのテーマを示す内容として、1ページに1つのみにする」があります。しかしHTML5では、h1要素を複数使用することは、仕様として推奨されています。では、HTML5の仕様どおりにh1要素を複数でマークアップすることは、SEOにとって不利になるものでしょうか？

これは不利になる場合もあるし、ならない場合もあるというのが私の考えです。実際にWebページによって、hx要素の番号がどうなっていても検索エンジンの評価に影響を与えないような場合もあれば、甚大な影響を与えるケースも確認しています。

有力な検索エンジンは。ページ内のどこが重要な情報かを識別しようとしています。サイドバーやフッターなどに記された情報は、あまり検索結果に表示されづらいですし、メインカラムの情報は表示されやすいということは、少し注意して検索エンジンを利用しているとわかることでしょう。これはサイドバーなどに共通の情報が記載されがちなことが原因である場合もありますが、例えそのページにしかない情報がサイドバーに記載されていても、検索結果には表示されづらいものです。

どこの部分が重要かという検索エンジンの判別は、一つの要因だけで行うものではありません。様々な要因を使って判定していると考えられますが、私はその要因の一つとしてhx要素の番号が使われていると考えています。hx要素の番号がその判別に重要な役割を果たしているようなWebページでは、hx要素を全てh1要素とすると流入の減少につながりますし、他の要因が重要なページでは大きな影響が出ないことでしょう。

そのため、必ずしも全サイトで必須とは言い切れませんが、SEOを考えるとやはりh1要素は1つで、h2要素以後もうまく使って文書構造を示しておくのが安全と考えられます。

先に述べたとおり、HTML5化したサイトではh1要素を複数使うことが一般的です。hx要素は全てh1要素にした上で、section要素の入れ子構造で文書構造を示すのはHTML5の仕様上正しいとされていますが、h1要素は1つとしてh2要素を中見出し、h3要素を小見出し……と使っていっても問題はないとされています。どちらでもよいのであれば、SEOには確実に問題がない後者の方法を使うべきでしょう。

とは言え、大規模サイトでページ内のパーツを様々なページで流用する場合に、hの番号の整合性が取りづらいため、全てh1要素にするWebサイトも多くあります。そのような場合もページのテーマとなる部分一箇所だけにh1要素を適用して、流用するパーツにはh1要素を使わずにh2要素から始めるようにしておくだけで大きなSEO上の問題は避けられるでしょう。流用する部分は全てh2要素から始めておくことは全ての使用ケースで問題がないわけではないかもしれません。しかし、全てh1要素にすることで発生するSEO上のリスクを考えると、どちらかというと問題は小さいと考えます。

HTML5の把握でレベルが高いGoogleの検索システムは、日本では圧倒的なシェアを持っています。しかし、100%ではありません。Google以外の検索エンジンでは、まだHTML5をうまく扱えないものがあります。その際に一番大きな問題となるのはこのhx要素です。実際、HTML5化した際にある検索エンジンでは、h1要素が複数あることで大きな問題となっている事象を確認しています。h1要素は検索エンジンスパムにもよく使われるため、非常に問題を起こしやすいものでもあるのです。

ご存知の通り、HTML5は普及したといえる段階ではありません。現状ではHTML5に対応していない環境のことを考える必要があります。そのためにもh1要素は1つにしておくべきでしょう。

HTML5で追加・削除・復活した要素

HTML5では、いくつかの要素が追加・削除・復活しました。

まず気になるのは、nav要素やfooter要素などの意味を持った要素でしょう。これらの要素は、現段階での私の観測の範囲では、検索エンジンからはこれまでのdiv要素と同じ扱いを受けているようです。しかし今後HTML5が普及した際には、様々な形で検索エンジンも活用し出すことが考えられます。

今後を考えれば、ページの情報を正しいHTML5でマークアップをしておくことが、唯一の対策となるでしょう。検索エンジンは正しいHTMLしか評価しないわけではありません。インターネット上で公開されているWebページのほとんどは、マークアップ上のミスを含んでいますので、主要検索エンジンはそのミスを織り込んでWebページを認識しようとしています。HTML5は、現段階では人によって使い方に大きなブレがあります。そのため必ずしも正しいHTML5しか評価できないように、アルゴリズムを組んでくるはずはないと考えられます。しかし今後どのような評価を行ってくるかはわかりませんし、全ての検索エンジンが、HTMLのミスを織り込めるほどの技術を持っているとは限りません。やはり最大限仕様上は、正しい形でのマークアップをお勧めします。

次に注意するべきポイントとして、これまでは推奨から外れていたものの復活した要素です。

特に注意するべきはiframe要素でしょう。XHTMLで非推奨とされていたiframe要素も、HTML5で復活したことで、使用するWebサイトも増えているようです。しかし、検索エンジンはiframe要素の扱いが得意ではありません。検索エンジンは、iframe要素を呼び出すURLへのa要素と同様に扱うのが通常ですが、iframe要素で呼び出すコンテンツをそのページのコンテンツとして認識している例もあります。

iframe要素に関わるアルゴリズムも進化を続けていますが、現段階では「iframe要素内のコンテンツは、ページ内のコンテンツとして認識されることもあれば、されないこともある」という非常に微妙な状態です。そのためiframe要素で呼び出されるコンテンツは「検索対象になるかもしれないしならないかもしれない」ものとして扱う必要があります。検索されるコンテンツを作る上では非常に使いづらいものですので、HTML5で復活したといっても、SEOを考える必要があるWebページでは使用しないことをお勧めします。

b要素やi要素など、スタイルを使いながら目立たせるために使われることが多いものの、セマンティクス上、重要という意味を持たない要素があります。それとは違い、strong要素については「他の部分に比べて重要」という意味を持ちます。SEOの知識としてstrong要素は「他に比べて重要」という意味であり多く使うと意味が薄れるため、限定的に使うべきとご存知の方もいるかもしれません。

ではHTML5で復活したb要素などは、無制限に使ってもいいのでしょうか。私はそれを勧めません。それは過去の期間において、b要素もstrong要素と同様に「他に比べて重要」という意味を検索エンジンが認識していたことがあります。現段階の認識が変わっているか確認できていませんが、継続している可能性もあります。その場合は、b要素・i要素が大量にあることで、strong要素も意味がなくなる可能性はあります。

HTML4では、b要素やi要素は使わずにCSSで表現するのがWeb制作の常識でした。HTML5でb要素が復活しましたが、使うことが義務づけられたわけではありません。これまで通りのspan要素とCSSを使ったマークアップをしておくことが無難と考えられます。

SEOを考えるとHTML5を使うべきか？

SEO観点でのHTML5でのマークアップにおいて注意するべきポイントを説明してきました。

現段階ではHTML5は普及しきっていませんので、検索エンジンの対応も中途半端です。その状況で何も考えずにサイトをHTML5化した場合、SEOに悪影響を及ぼす可能性はあります。

では、SEOのためにはHTML5は選択すべきではないのでしょうか。それは違います。今後の長期的なWebサイト運営を考えると、私はHTML5化を強くお勧めします。今後、HTML5を採用したWebサイトにはSEO観点でも何らかの利点が出る可能性が高いと考えます。ページの論理構造を作りやすいマークアップや、セマンテックウェブとの適合性は、今後のSEOで利点が出てくると考えられますし、様々な拡張性はより魅力的なコンテンツを作るのにも有益になります。それはSEOには極めて重要なポイントです。通常のWebサイトでは、HTML5を採用するかどうかという選択が行えるタイミングは、数年に一度しかないでしょう。選択できるタイミングでHTML5を選択しなければ、次に変更できるのは数年後かもしれません。その頃にはすでに、HTML5のSEO観点での利点は発生している可能性は否定できません。

冒頭でHTML5化を含むリニューアルで、大幅に検索流入を落としたWebサイトの実例があると述べました。それは詳細を調査すると、必ずしもHTML5が悪いわけではありませんでした。あるWebサイトでは、テキストでの代替コンテンツを含んだFlashコンテンツを全廃して代替コンテンツを含まないCanvasに置き換えたり、iframeを使い始めて検索流入を落としたということもありました。この問題についても、HTML5が悪いわけではありません。SEOの基礎知識がないことと、HTML5の正しい知識が少なかったことが問題です。その二つの知識があれば、HTML5はSEO観点で怖いものではありません。

まずは、今回ご紹介した3つのポイントに注意していれば、大きな問題になることはないでしょう。さらにHTML5を活用するために、SEOも少し配慮してWebサイト構築を進められることをお勧めします。

Tags : Canvas,CSS,SEO,マークアップ