CSSを使ったhtml制作とSEOについて - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

法人・ビジネス ホームページ・Web制作 2008/10/16 14:44

お世話になります。
htmlをCSSを使った下記手法は、SEO的にはマイナスになるのでしょうか。
"text-indent:-9999px;"
画像を下記の手法で、CSSで背景に設定して、HTMLソース上はテキスト情報として記述する。
画像を表示させマウスオーバーの機能も付けております。
<h1>情報としては、通常のテキストデータに該当させております。
確かにあまりにSEO効果を考えたテキスト情報をソースに記載することは、SEO上 望ましくないですがいかがでしょうか。

--- HTML ---
<ul class="menu">
<li class="btn01">
<a href="abcd.html">会社概要</a>
</li>
</ul>
--- CSS ---
.menu li a {
display: block;
width: 180px;
height: 38px;
background:url(../images/menu_btns.jpg) no-repeat;
text-indent:-9999px;
font-size:0;
line-height:0;
}
.menu li.btn01 a {
background-position:0px 0px;
}
.menu li.btn01 a:hover {
background-position:0px -38px;
}

DELLTさん ( 千葉県 / 男性 / 60歳 )

回答:5件

中沢 伸之 専門家

中沢 伸之
Webプロデューサー

- good

CSS text-indentによるSEO対策の影響について

2009/03/06 16:37 詳細リンク

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

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

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

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

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

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

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

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

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

回答専門家

中沢 伸之
中沢 伸之
(埼玉県 / Webプロデューサー)
ストークデザイン ウェブデザイナー

集客・売上アップを実現! 営業ツールとしてのWebサイトを制作!

お客様の事業内容やターゲット、目的に合わせた最適なWebサイトを制作し、集客・売上アップの実現を目指します。SEO対策を施した「安心料金・安心対応」の制作がモットー。海外向けサイトコンテンツの翻訳業務や英語サイトの制作も承ります。

中沢 伸之が提供する商品・サービス

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
藤田 匡史

藤田 匡史
Webプロデューサー

- good

記述方法の例として

2008/10/18 19:56 詳細リンク

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

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

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

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

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

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

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

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


表現上、極端なマイナス評価になるとは考えにくいです

2008/10/18 02:00 詳細リンク

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

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

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

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

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

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


個人的な見解ですが。

2008/10/20 23:52 詳細リンク

はじめまして。
ソースの記述は、
「いかに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/]]


デザイン表現を優先するか、SEOを優先するか。

2008/10/26 09:28 詳細リンク

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

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

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

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

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


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

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

PHP&MySQLによる会員制サイトの構築について こつこつがんばさん  2014-05-01 18:22 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)