• ベストアンサー

CSSで画像を隠すとSEO的にNGですか？

通常時とマウスオーバー時の2枚の画像を使い、メニュー部分でCSSでロールオーバーを使っています。 この場合、マウスオーバー時に画像を読み込むため一瞬アイコンがちらつくようになるのを防ぐため、同じページにマウスオーバー時の画像を敷き詰め、display: noneで非表示にしています。 隠しテキストはSEO的にNGとわかりますが、隠し画像も同じ扱いなのでしょうか？ ちなみに隠している画像にはaltは付けていません。 個人サイトですが、できるだけSEOに問題ないようにしたいので、どうかご教示ください。 また2枚の画像を使ったCSSロールオーバーで、このチラつきを防ぐいい方法があれば教えてください。 よろしくお願いします。

  • HTML
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

結論から言うと、SEO的にNGなのは、サーチエンジンがインデックスするための テキストに関する事が主で、画像に関してはあまりNGは無いと思います。 サーチエンジンがインデックスする際、<h1>タグ等の内容を、サイトの重要事項と 位置づけますので、サイトと無関係の文字列をサーチエンジン対策のためだけに記述したり、 サイトと関係のある文字列でも、見栄えを気にして<h1>等のタグの文字列を極端に小さくしたり、 背景色と同色にしたりするとNGになります。 クロール（サイトを巡回してデーターを集めるプルグラム）は、以上のように文字列のみを拾い、 そのサイトがどんな内容のサイトなのかを判断しますが、画像に関してはスルーしていると思います。

その他の回答 (2)

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.2

「display:noneを利用してテキストを非表示にするのはスパム？」 http://www.alphaseo.jp/seo-faq/inside/070123_24605.html 邪な使い方さえしなければ、問題ないと思います。

  • masaota56
  • ベストアンサー率41% (58/139)
回答No.1

ロールオーバーですが、 ２枚の画像をつなげて１つの画像にして、 マウスオーバー時に表示位置を変更する方法もありますよ

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでグローバルナビゲーションメニューをつくりたい

    CSSで、グローバルナビゲーションメニューのボタンリンクをコーディングしたいと思っています。ボタンをマウスでポインタしたらロールオーバーし、カレントページのボタンはマウスでポイントした時と、同じようにロールオーバー画像を表示させたいと思っておりますが、可能なのでしょうか？

  • CSS による画像を使ったロールオーバー

    よろしくお願いします。 CSSを使って、画像のロールオーバーをしようとしています。 HTMLの構成としては、 タイトル画像（幅800px）の下に、CSSを使って作った ロールオーバーするメニューを横並びで配置したいと思っています。 http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html のサイトを参考に（ほとんどまる写しですが）して、 作成してみたのですが、HTML全体を左寄せしても、中央寄せ してもロールオーバーしたメニューの項目の左側に隙間というか 余白が入ってしまい、上のタイトル画像とズレが生じててしまいます。 この余白をなくす方法がありましたらお教え下さい。

    • ベストアンサー
    • HTML
  • CSSでのロールオーバー

    CSSでのロールオーバーについての質問です。 通常時A ロールオーバーB クリック時C この３つの画像を使ってメニューをロールオーバーさせたいのですが、 クリック時に切り換えさせる術を知らず、困っております。 a:link,a:visited{background-image:url(通常時A); a:active,a:hover{background-image:url(ロールオーバーB); でロールオーバーさせることは出来たのですが、クリック（Onclick）時に画像を切り換えることは、CSSで可能なのでしょうか。 宜しく御願い致します。

    • ベストアンサー
    • HTML
  • cssとjavascriptを使って画像の一部をロールオーバー

    以下の条件でロールオーバーをさせることが可能かどうか、また可能な場合はどのようにしてやるのか教えていただきたいです。 (1)1枚のgif画像がある。画像内にいくつか文字があり、文字の上にカーソルが上がった時に文字の色を変えたい。 (2)文字がすべてロールオーバーしていない元画像と、文字がすべてロールオーバーした画像の2枚を用意。 (3)CSSとjavascriptを駆使して作りたい。 元画像を背景に設定し、その上にロールオーバー後の画像を配置し、隠す。→文字の上にカーソルが来たら、隠していたロールオーバー後の画像の一部をその同じ場所に表示させる というような考え方でやってみたのですが、どうもうまくいきませんでした。Flashでやった方が簡単なのですが、Flashは使わずに作るということになっているので困っています。 何卒、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • JavascriptでのロールオーバーはSEOには不利なのですか？

    素人な質問ですが宜しくお願いします。 CSS+XHTMLでサイトを作成していますが、いつも、ロールオーバーボタンで悩んでいます。 CSSでももちろん実現は出来るのですが、Javascriptを用いたものはやはりSEO対策としては不利なのでしょうか？ 例えばメニューとかであれば、リスト+Javascriptロールオーバーとすれば同じ効果が得られるものではないのでしょうか？ HTML本文でのJavascriptの呼び出しソース自体が不利ということでしょうか？ ロールオーバーって共通パーツ以外にいろんな所で使うので、その都度CSSで設定する必要があり、javascriptで実現した方が簡単な気がするのですが・・・（「慣れ」かもしれませんが・・・。） どうか、よきアドバイスお願いいたします。

    • ベストアンサー
    • HTML
  • cssでロールオーバーした画像が、一部だけずれてしまいます。

    cssで、ulやdisplay:blockを使って、画像が８個横に並んだメニューを作り、ロールオーバーさせていたのですが、横に並んだメニューの一番左の画像だけが、マウスのオンオフに関係なく、なぜか3pxほど下に沈んでしまうのです。 始めは普通に表示されていたのですが、メニューより下の項目を色々いじっている間に、いつの間にやら下がっていました。 もしや、変なマージンやパディングがいけないのではと思い、メニュー以下の項目を全部消してみたのですが、元には戻りませんでした。 cssバグなども色々調べてみたのですが、もう本当にわかりません。 cssやhtmlをここに書きたいのですが、文字数制限にひっかかってしまうので、何かこういった現象の原因になりそうな要因、できれば解決方があれば教えていただけると幸いです。 お力を貸していただければと思います。 よろしくお願いします。

  • CSSで動く画像ロールオーバーの利点について

    javascriptを使わずCSSのみで動かすロールオーバー画像の利点と欠点が↓以外にあれば教えて下さい。私の解釈が間違っていればご指摘願います。 ■利点 1.HTMLのソースが綺麗＝ソースコードが軽くなる。 2.検索ロボットが余分なソースを読まなくてもよくなる為、SEO対策に有効。 3.listタグ（UL、LI）はSEOで重みづけが大きい？従ってlistタグで作成されたメニューはロボットに重要視される。 ■欠点 1.CSSファイルが複雑化。 javascriptでもできる事をあえてCSSでしようとする意図がイマイチ掴めません。 また、メニューの背景のみを画像にした場合（メニュー名はテキスト）、CSSもさほど複雑化しないと思いますが、もしメニューひとつひとつを画像にしていた場合はCSSが複雑化しないんでしょうか。

  • cssスプライトで作ったボタンがIE6でロールオーバー時に消える

    ＣＳＳでロールオーバーするボタンを作りました。（ＣＳＳスプライトという手法で作っています） ところが、ＩＥ６でのみ、ロールオーバー時に、ボタン画像が消えます。 ためしにjavascriptで先にキャッシュを読み込ませてみましたが、やっぱり消えてしまいました。 どうしたらＩＥ６でも正常に表示できますか？

  • 画像のロールオーバーがずれてしまいます。（CSS）

    テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。 しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像 （背景として設定しているもの）が微妙に１pxほど斜め下にずれて表示されてしまいます。 このような事を防ぐためにはどんな事に気を付ければ良いでしょうか？ ちなみに、ロールオーバー前の画像とロールオーバー後の画像２枚を 全く同じサイズにしています。 参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。 -------------------------------------------------CSS td.1{ 　　　background:url(image01.jpg) no-repeat; 　　　} td.1 a{ display:block; } td.1 a:hover{ background-color:transparent; } td.1 a:hover img{ visibility:hidden; } -------------------------------------------------HTML <table> <tr> <td class="1"> ←このtd内の画像 <a href="top.html"><img src="image01.jpg"></a> </td> <td> <a href="top02.html"><img src="image02.jpg"></a> </td> <td> <a href="top03.html"><img src="image03.jpg"></a> </td> </tr> </table>

  • Javascriptなどでドロップダウンさせる場合

    例えば階層式のナビゲーションをJavascriptを使ってドロップダウンにする場合などに、マウスオーバーで表示する部分を隠す方法なのですが、 現在わたしはHTMLでは、隠す部分も含めて全て書いておいて、一旦表示してからJavascriptで非表示にしています。 そうするとページ読み込み時に一瞬隠す部分が表示されてから消えます。 はじめからCSSでdisplay:noneなりをすれば表示されませんが、その方法だとSEO上不安です。 隠す部分をHTMLには書かずに、あとからJavascriptで追加する方法も考えましたが、HTMLにメニュー部分が含まれないことになってしまうので、これもSEO上良くないと思います。 上記のほかに、良い方法は無いでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する