• ベストアンサー

h1,h2タグに背景画像

よろしくお願いします。 このページでoff-leftというテクニックを知りました。 http://www7.plala.or.jp/zeroxstyle/use_xhtmlandcssoffleft.html h1タグなどに背景画像として文字画像を表示させ、テキストはCSSのtext-indentで画面の外に追いやるというものです。 確かにこれなら見た目も綺麗だし、文章構造もすっきりしたアクセシブルなサイトになりますが、googleからSEOスパムと判定されるのではないか疑問です。 実際にこのテクニックを使っているサイトってあるのでしょうか? 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?

  • SEO
  • 回答数2
  • ありがとう数42

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

  • ベストアンサー
  • JeanneNet
  • ベストアンサー率48% (100/208)
回答No.1

こんにちは、じゃんぬねっと です。 微妙は微妙ですが、そういう微妙なものはスパムと判定されません。 完全に悪意がある不正な対策をスパムと判定するようです。 例えば「H1 にキーワードをつめこみまくる」とか。 > 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・? 無難は無難なんですが、モバイルから表示した時をイメージしてみてください。 前者の方法の何がアクセシビリティ的に良いかを考えるとわかるでしょう。

kura2005
質問者

お礼

じゃんぬねっとさん、回答ありがとうございます。 なるほど、「悪意」が無ければとりあえずは大丈夫なんですね。 よくよく考えたら、このoff-leftテクニック、例えばモバイル環境で[スタイルシートON][画像OFF]の設定にしてると、画像も文字も表示されず、見出しが跡形もなくなっちゃうんですね。 とすると、alt属性つきの画像をh1タグで囲ったほうが実は親切、ということになりますね。

その他の回答 (1)

noname#19399
noname#19399
回答No.2

こんにちは。 スパムかどうかの判定はgoogleでどう処理しているのか分からないのでなんとも言えませんが、海外のサイトでは結構このテクニックを使用しているところが多いみたいですね。 スタイルシートでレイアウトしているサイトを色々紹介しているところ(off-leftテクニック使用してます)を参考URLにはっておきます。

参考URL:
http://www.804case.com/
kura2005
質問者

お礼

ご回答ありがとうございます。 紹介してくださったサイト、とても参考になります。 デザイン的にも素敵なサイトが多いですね。 ソースを見て勉強してみます。 ありがとうございました。

関連するQ&A

  • h1タグとSEOのいろいろ

    h1タグに画像を挿入したい場合、画像を背景処理してテキストを飛ばして画面から見えなくする。 という方法がありますが、これはスパム扱いされる。ということも聞きます。 それならば、小細工なしに画像にalt指定をする方法を取る方がいいのでしょうか。 下記の3パターンのうち、皆さんはどれが最良の方法だと思われますか? 皆さんのご意見をお願い致します。 (1)画像にalt こちらは一番ノーマルなやり方だと思います。 ただ、altタグはSEOを考えた場合、あまり意味がないと聞きます。 もちろん、アクセシビリティ的には必要ですが。 (2)text-indent:-9999px; こちらは一番流行った?やり方だと思います。 ですが、一部ではスパム扱いされる、と言う方や、 背景にした画像とテキスト表記が同じであれば大丈夫という方もいます。 ホントのところはどうなんでしょう? (3)position:absolute; こちらは(2)と似たやり方で、画面の外にテキストを飛ばしてしまうというやり方。 スパム扱いされるとそれほど聞きませんがどうなんでしょう?

  • SSIでH1タグを読み込んだらSEOに悪影響?

    私のサイトでは、H1タグを画像にしてALT属性で名前をつけています。 で、それをSSIで読み込んでページを作ろうと思うんですが これだとSEOに悪影響でしょうか? 外部ファイルにH1タグがある、ということにはなりますので、 気になります。

    • ベストアンサー
    • CGI
  • hタグの右横に画像を表示

    hタグ(今回は<h3>タグ)の右横に、「new」の画像を表示したいと思っています。 <h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。 全てに「new」がつく訳ではなく、任意のものだけに表示です。 css の background image で試してみたのですが 当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。 right 指定で%で指定していけば、なんとなくバランスよくはできますが あくまでなんとなくであって、 更にタイトルの文字数によって変わってきてしまうので 個別にcssを指定していかなければなりません。 (そういうものなのでしょうか。) ※例えば「new」画像が左置きなら、 background image を使って、hタグの css に padding-left:100px; などとすれば済みますよね(画像の分だけpaddingで空きを作る)。 でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。 hタグのタイトルから右横に(例えば)20px空きをつくり画像を配置、 ということが簡単には出来ないものでしょうか。 それとも <h3>テキストテキストテキスト<img src="********"></h3> なんてことをしてもいいものでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • <h1>などの見出しタグ 【SEO】

    質問させて下さい。 よくSEO的には<h1>や<h2>タグの中のテキストがロボットエンジンに 重要視されるとあります。 そこで疑問です。 サイトの見栄え上、見出しタグの中にテキストを入れずに画像を入れ ているとします。その場合に画像のalt(代替え)指定に「ラーメン」 等と入れておけばテキストのみの場合と効果は同じだと思われますか? 理想↓ <h1>ラーメン</h1> 希望↓ <h1><img src=ra-men.jpg alt=ラーメン></h1> ※タイトル画像とは別に<h1><font size=1>ラーメン</font></h1> などと目立たないようにテキストを入れた方がよいのかな?とも 思ったのですが・・・どうなんでしょう。

    • ベストアンサー
    • HTML
  • ALT属性に見出しタグをつけると画像がズレます。

    見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • h1タグを置く場所の背景について

    こんにちは、最近HPビルダーでHPをつくり、教えてGOOなどで H1タグのことなど知って勉強しているのですが、h1タグを 外部CSSというのでしょうか、スタイルシートのテクストファイルを 作ってそこにリンクさせて小さくしたり文字色を変えたりしています。 文字色は白、文字の大きさは11ピクセルです。 h1とh2まででh3は無いですが、h1とh2は同じ条件で 設定しております。 外部cssで文字の大きさを変えるのははSEO上問題ないという意見が 多く見られると思うのですが、色はどうなんでしょうか? またh1、h2タグを置いている場所(セル)の背景が濃い青色で スタイルシートの設定なしでみると、H1なので当然でかくなるのですが 背景が濃い青のため黒い文字が見えにくくなってしまう感じです。 検索エンジンは文字を見えにくくすることにペナルティーを与える といったことを聞いたことがあるのですが、検索エンジンは見えにくい と判断してしまうのでしょうか? それともcssで文字色を白にしていることも何かリスクはあるのかなと・・・ デザイン的な問題でやっているので特に上位表示されたいというこ ともないのですが、ペナルティーは受けたくないので、この状態に ついて改善した方が良いことなどあれば、また私のやっていること が知らずにペナルティーを受ける様な行為にあたるのかどうか 教えていただけないでしょうか。よろしくお願いします。

  • H1タグを画像にしたい

    有名なサイトなど見てみると、H1タグを画像で置き換えたりしていますが、あれってどうやってるんですか?私もH1タグを、ロゴにしたいんです。

    • ベストアンサー
    • HTML
  • 画像(alt要素)のマークアップとSEO

    質問です。 最近、検索エンジンのクローラーはaltを認識していないと、このページを読んで知りました。 http://www.hyperposition.com/ranking/heading.html ということは、画像のalt要素に<h1><h2>や<strong>タグをつけるのは無意味なんでしょうか? 私のサイトは、タイトルにロゴを使用しているので、どうしても画像に<h1>タグがくる構成になっています。 認識しない要素に見出しタグをつけると、スパム扱いになったりするんでしょうか? 上のアドレスのページにも、最後のほうに「画像はマークアップしない」とありますし・・・SEO的にはどうなんでしょう?

    • ベストアンサー
    • HTML
  • altタグの文字数は何文字が適当ですか?

    今、HPを作っていて、画像にはaltタグを入れています。 このaltタグは何文字ぐらいが適当でしょうか? 写真の画像で、写真の内容をaltタグで説明しようとすると 「○○○○と××××の△△△△写真」 のような感じで文字数が長くなってしまいます。 altタグにキーワードを詰め込むと検索エンジンからスパム扱い されるとの話もあり、長くなっても良いのかどうかよくわかりません。 それから、一つのページ中に、 「○○○○と××××の△△△△写真」 「○○○○と××××の△△△△拡大写真」 というaltタグを入れたいのですが、これは問題ないでしょうか? ちなみに、altタグはユーザビリティーの観点から入れるだけで、 SEO的なことは考えていません。 スパムに引っかからなければ良いと思っています。 教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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