• ベストアンサー

SEO対策について-<h1>タグ-その2

以前、<h1>タグについてSEO対策について質問をしました。 今回はCSS+HTMLを利用した際に下記のような場合 どのような判断がされるのでしょうか? ○CSS h1 { background-image: url(img/aaa.gif); background-repeat: no-repeat; width: 100px; height: 20px; } h1 span { display: none; } ○HTML <h1><span>タイトル</span></h1> text-indent:-9999px;を使えば回避はできる問題なのですが、 <span>が間に入ることで<h1>を検索エンジンのロボットはどのように判断されるのでしょうか? どなたかご教授願います。

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

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

  • ベストアンサー
  • taba
  • ベストアンサー率61% (349/567)
回答No.3

ほぼその通りの書き方でブログをカスタマイズしていますが、少なくともGoogleには読まれています。 永遠に大丈夫という保証はないですけどね。 あまり細かいことに気を遣うより、中身を充実させた方が良いです。リンクがある程度あれば、いずれにしても読まれますので。

elm005
質問者

お礼

確かにその通りですね。 今後の辺は大丈夫とは言い切れませんからね 回答ありがとうございます。

その他の回答 (2)

  • partita
  • ベストアンサー率29% (125/427)
回答No.2

私も#1さんと同じ考えです。 text-indent:-9999px; としてもgoogleはh1内のテキストを拾ってくれることを 私が仕事で作成した企業サイトで確認済みです。

  • bavarois
  • ベストアンサー率34% (34/100)
回答No.1

この場合、h1のほうが効くと思いますが、検索ロボットがdisplay: none;をスパムの一種と判断する可能性が強いと思います。

elm005
質問者

補足

CSSを外部ファイルにしたときもスパムとして見られてしまうんでしょうか?

関連するQ&A

  • h1にタイトル画像を指定しているのですが・・

    h1にテキストでは、ページのタイトルを入れて、CSSで背景を指定しています。 【HTML】 <div id="header><h1>タイトル</h1></div> 【CSS】 #header h1{ text-indent: -9999px; background-image: url(../images/share/title.gif); background-repeat: no-repeat; height: 43px; width: 317px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; text-align: left; } FirefoxとIEでは表示されているのですが、Operaで見ると表示されていません。Operaで表示させることは難しいのでしょうか?

  • CSSでマウスオーバーを作成しています。

    CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEの時に空白ができてしまします。

    CSSを使ってホームページ制作をしはじめたのですが、まだまだ勉強不足の為修正の仕方がわかりません。申し訳ございませんがどなたか詳しいかた教えて頂けないでしょうか。 内容はと言いますとリモートロールオーバーを設定している際にIEで#Content01 ul li#menu01~03 aの背景画像の下に空白ができてしまうのです。FireFoxでは思い通り表示できているのですが。。。 ---HTML--- <div id="Content01"> <!- コンテンツ01 -!> <ul> <li id="menu01"><a href="#"><span>あああああ</span></a></li> <li id="menu02"><a href="#"><span>いいいいい</span></a></li> <li id="menu03"><a href="#"><span>ううううう</span></a></li> </ul> </div> ---CSS--- /* コンテンツ01 */ #Content01{ position:relative; background:url(../.jpg) no-repeat right top; width:800px; height:300px; } #Content01 ul li#menu01 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu02 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu03 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li{ position:relative; margin:0px; right:40px; top:0px; } #Content01 ul li a span{ display:none; } #Content01 li{ list-style:none; } #Content01 ul li#menu01 a:hover span{ position:absolute; top:0px; right:-40px; display:block; width:600px; height:300px; text-indent:-9999px; } #Content01 ul li#menu02 a:hover span{ position:absolute; top:-100px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu03 a:hover span{ position:absolute; top:-200px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu01 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu02 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu03 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 a:hover{ border:none; } このような記述を致しております。 色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。

  • 【CSS】h1を画像にしたいのですが、Dreamweaver上では表示されてもプレビューで消えてしまいます!

    h1にテキストをいれていますが、それを背景画像で見せたいため、display:none;で見えなくしています。 背景画像logo.pngは表示させたいのですが、Dreamweaver上では表示されてもプレビューでどのブラウザでも消えてしまいます! どなたかよろしくおねがいします! 【CSS】 #logo{ margin:40px 50px 0px 0px; padding:0px; background:url(images/logo.png) no-repeat; } h1{margin:0px;   padding;0px;} h1 span{display:none;} h2{margin:0px 50px 0px 0px;   padding:0px; } h2 span{display:none;} --- 【HTML】 <h1 id="logo"><span>Ethiopa</span></h1> <h2><span>Ethiopa Blog</span></h2>

    • ベストアンサー
    • HTML
  • CSSでの画像メニューの設定について

    現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像(白)、ページのin時の画像(赤)、hover(青)の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 (もし良い講座のページ、本がありましたら教えて頂ければと思います。) 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • これってスパムですか?

    CSS+HTMLでテーブルを使用しないサイト制作をしていますが、<h1>タグに関してはCSSで背景画像を設定して、下記のようなソースにしているのですが、これってGoogleなどでスパム行為としてペナルティーなど受ける可能性があるのでしょうか? ●CSS-------------- h1 { font-size: 14px; color: #FFFFFF; background-image: url(img/title.gif); background-repeat: no-repeat; margin: 0px; } .hidden { display: none; } ●HTML------------ <h1><span class="hidden">プロフィール</span></h1> よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • IE7で見出しタグ(hタグ)をみるとずれる

    サイトを作成してIE7で躓いてます。 <div class="box"> <div class="top"></div> <div class="mid"></div> <div class="under"></div> </div>と <div class="box">で囲みtopとmidとunderで3等分してます。 <div class="top">をpddingで上部を10px幅をあけてます。 中に<h3>の見出しタグを入れてます。 IE8以降 クローム Firefox では10px分の幅の後に、<h3>タグが入ります。 IE6はアンダースコアハックしました。 IE7ですと<div class="top">で設定したpddingが無視されて<h3>との間に空白ができません。 IE7でも他のブラウザと同じように表示されるようにするにはどうしたらよいでしょうか? 検索で探してみたものの見つからなかったので解決法または、解決法が記載してあるサイトを教えていただけますでしょうか? よろしくお願いいたします。 ■test.html <div class="box"> <div class="top"> <h3>■■■■■</h3></div> <div class="mid"> ●●●この部分は文章の長さで伸びます●●●● </div> <div class="under"> </div> </div> ■CSS body{ font-family: "メイリオ", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 75%; line-height: 2; color: #333333; margin: 0px; padding: 0px; } h1 h2 h3 h4{ padding:0; margin:0;} .top{ width: 690px; height:70px; color:black; background: url(img/top.gif) no-repeat; padding:10px 30px 0 30px; } .mid{ width: 690px; min-height: 200px; color:black; background: url(img/mid.gif) repeat-y; padding:0px 30px 0 30px; } .under{ width: 690px; height: 20px; color:black; background: url(img/under.gif) no-repeat; } h3{ line-height: 20px; color:blue; font-size:17px; }