CSSを使ったhtml制作とSEOについて

こんにちは。
パワーソースの杉田です。
ご質問の件ですが、最近では、検索ロボットはCSSファイルも読み込んでいると言われているので、このような疑問が出るのは当然かと思われます。

一般的に見た目とは違うテキスト情報がある場合、スパムサイトとして見られてしまう可能性があると言われています。
例えば、背景色と同じ文字色を使用してテキストを並べたり、「display:none;」で表示させなかったり、H1タグの文字を極端に小さく表示するといったことはスパムとして見られてしまうようです。

今回の質問のような場合はどうかと考えて見たいと思います。
まずHTMLのソースだけを見た場合、Web標準的なコードだと判断できます。
次にCSSですが、「text-indent:-9999px;」や「font-size:0」といった記述は上記のようなスパムという判断がされる可能性はあるように感じられます。

だからといって、そういった記述があれば全てスパムサイトだという判断ももちろんできないと思われますので、絶対にやめた方がいいとは言いきれないでしょう。
表現上、質問のコードのようになてしまうこともあると思います。
しかし、スパムと見なされる要因にはなると考えておいた方がよいと思います。

SEOに関しては一部の評価だけではなく、外部リンクやテキストの正確性などの総合的なランク付けによって行われていると思われますので、総合的な判断が必要かと思います。

ホームページ制作･広告代理店パワーソース

はじめまして。
ソースの記述は、
「いかにhtmlを正確な書き方でシンプルに書くか。」だと思っています。
-9999pxというのは、個人の見解でもうしわけないのですが、無理矢理感がありませんか?

[[http://css-happylife.com/template/07/:http://css-happylife.com/template/07/

上記URLをご参考下さい。
横並びのメニューですが、基本的な表現しかたは一緒だと思います。
このサイトは、私もよく参考にさせていただき、勉強になるサイトです。

こちらの手法の方がキレイな気がします。
(あくまで個人の見解ですが…。)

また、JavaScriptを使用した方法も何パターンかあります。

やはりシーンに合わせた手法がありますが、
スパム行為にみなされる危険性があるものはなるべく回避していったほうが
いいと思います。



*茨城・首都圏のホームページ制作、WEB構築、DTP印刷、デザイン、システム運用・活用・開発
[[株式会社ココロ http://www.cocoro.co.jp/:http://www.cocoro.co.jp/
**茨城県のうるおい生活情報ポータルサイト「うるおいプラス」
[[「うるおいプラス」 http://www.uruoi-plus.com/:http://www.uruoi-plus.com/]]

CSSに関してはまだこれ!と言った一定の基準がないため、制作者は頭を痛める部分です。

現状で、text-indent:-9999px;
という手法は多くのサイトで使われているもので、もしスパム扱いになった場合大騒ぎになるでしょうね。
私自身も表現上どうしてもという場面で使用したことはあります。
実際はCSSで上記のようなマイナスの値を使用したからSEO対策が極端に落ちると言う例は聞いたことがありません。
(上記の専門家の方の見本サイトでもtext-indent:-9877emが使用されています。)

ただtext-indent:-9999px;を使用した場合、 font-size:0; line-height:0;あたりは不要かと思います。私もfont-sizeに0を使用するのはちょっと怖い感じがします。あくまでも感覚ですが。

SEO対策を必須と考えるのであれば、バックに画像、テキストはあくまでもテキストとしてhtmlに置くことをお勧めしますし、ここはデザイン的にも画像を使用したいのであれば、上記の方式で問題ないと思います。

デザインを優先した方が良いサイトと、徹底的にSEOを考えた方が良いサイトがあり、これはサイト戦略を総合的に考え、どこまで基準にするかをサイト計画の段階で考えることが、サイトを成功させるコツだと思います。基準を決めることでクライアントに説明ができますし、制作者としても悩まず制作ができますよね。がんばってください。


ITのことなら何でもご相談下さい。
有限会社カンマ・デザイン
樋口

はじめまして FSFIELD 藤田匡史です。

CSSを検索エンジンが読み込んでいる為、弊社でもこの部分の話を良くしています。

私的な考えですが、背景に画像を置き、display:blockを使いブロック要素にし
ボタンとして使用する場合、テキスト自体を-9999pxとして画面から見えなくする
手法より、visibility:hidden;を使っています。

visibility:hidden;も賛否両論ですが、CSSが適用されない時のことを考えて配置して
いる為、マイナス要因としては考えにくいのでは?と推測しています。

現在まで、上記のvisibility:hidden;を使い順位が下がった経験はありません。

回答になってないとは思いますが、FONTサイズを0pxや見えないところに配置するのは
あまり私個人的にはお勧めはできません。

簡単ではありますが、ご参考までに。

ホームページ制作会社 (株)エフズフィールド

初めまして、ストークデザインの中沢と申します。

text-indentで画面から飛ばしてしまい、テキストを表示させない手法によるSEO対策の影響ですが、私の経験上で回答させて頂きます。

ご質問内容のソースを見る限り、“画像置換え”と呼ばれるリスト表示ですね。
マウスオーバーで別画像(一つの画像で表示をズラす)を表示させる物だと思いますが、私が管理しているサイトの一つで同じ様な手法を使っておりますが、特に検索結果に問題はありません。

こちらの手法をサイト全面に使用し、明らかにユーザーと検索エンジンを騙すような作り方にしますと問題がありそうですが、リストタグでのメニュー表示程度でしたら、今の所は問題無さそうです。

しかし、最近ではこの“画像置換え”は問題も指摘されています。

その問題の一つとして、画像を表示させずにCSSだけを有効にしたブラウザで見た場合は何も表示されないという事です。

こちらの手法は制作者の間でも議論になる事もありますが、2008年中のウェブ専門雑誌には、あえて使用した例も載っていましたので、問題にはならないかと思います。

ただし、こちらの手法については、以前からスパム説も流れていますし、将来はスパムと判断されてしまう可能性もあります。

こちらを回避する別の方法としては、javascriptを外部ファイルとして読み込んで、ロールオーバーさせる方法(smartRolloverが有名)がありますが、どちらにもメリット、デメリットがありますので、その時の状況で使い分けされればよろしいかと思います。