sotoyoga.jp/about/
このサイトのようにheight:0でテキストを非表示にしてpaddingで背景画像を表示させるコーディングって初めてみたのですが、SEO的には問題ないのでしょうか？
みなさんはテキストを画像で見せたいときどんなコーディングをしていますか。
リンクうまくできませんでした。こちらのサイトです。
ちょっと前までは自分もheight:0;でpaddingで高さ指定していましたけど最近はtext-indent: 100%;、white-space: nowrap;、overflow: hidden;でやっています。
なるたけimgタグ
ぼくはこれです。.class名 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden;}
結局のところ、テキスト飛ばし、隠しなのでNGになると思われますよ。昔流行った？テキストを背景色と同じにして隠したり、text-indent -9999pxにしたりもNGです。
基本的には画像のところは画像を入れてaltをしているする。テキストはテキスト。
というのが、昔からほとんど変わらないけど、検索結果等に関しては問題なかったりもするから程々にしておいたほうが良いと思われます。推測です。
テキスト隠しなので、SEOスパムとして看做されるテクニックになります。
ただし、ちょっとでも使ったら即ペナルティ（インデックス削除とか）では無いので、悪質と看做されない範囲での使用なら問題ない（と思われる）ケースが多いです。※ペナルティを喰らってないけども、Hタグ等のSEO効果が弱くなっている可能性はあります
ちなみに、クライアントさんがSEOによる検索順位向上に関心が強い場合は、出来上がったサイトをSEOコンサル業者に診断してもらうことがあると思いますが、そうなると「テキスト隠し」系テクは必ず改善点として指摘されます。結果、「○○社はデザインは良いけど、コーディングはクソだよね」なんて評価されるようになり、最悪そのクライアントの次の仕事は無くなります。
まあ、いまどきSEOに興味の無いクライアントなんていませんから、テキスト隠しテクを使う場合は、クライアントの了承を得たほうが無難ですね。
へんな小細工はしません。<img src="画像パス" alt="テキスト">だけです。
画像使い過ぎると重くならない？
皆さん投稿ありがとうございました。新たに「こんな方法もあるのか」という書き方もあり興味深かったです。
HTML上はテキストで表現するのと、imgのaltにテキストを書くのとどちらが検索エンジンに評価されるかという問題のような気がしました。
私自身はh1に画像を使おうがGoogleはちゃんとaltを読んでくれるだろうと最近は楽観的に考え、imgタグのaltに文言を書いています。
背景色やtext-indentのテクニックは見たことあったのですが今回のようなものは始めてみたので、もしやこのやり方は評価が下がらないのかな？と思って質問させて頂きました。
そこまでこだわってテキスト隠しせずにシンプルにimg使ったほうがよさそうですね。
imgよりもcssの方が強力にキャッシュが効くし、スプライトによる負荷軽減もできるので小細工というわけでもない。というかアップルはじめ大手サイトでもかなりの割合で使われてる。
大手サイトはSEOを意識する必要がないからじゃないですか。
サイトの目的によるとしか
同意。バカみたいにimgタグでマークアップして、小細工してませんって思考停止も甚だしい。サイトの高速化とCSSスプライトの効果は常に天秤にかけるべき。
これからはAdobeのフォントテクニックが流行しそうな気配
それもはやればスパム扱いの対象になるような気がしますたぶんグレーゾーンで何処までスパムかわからない感じにはなると思いますが、結局現状とかわらないような
未だにh系で画像置換使うのはなしだけど、最近はロールオーバー有りのナビゲーションはcssスプライトでっていうの割りと主流になってきてますけどね。それ系のナビゲーションで逆にcssスプライトもプリロードもしてないサイトとかの方がよっぽどありえないかと。
みんなの回答 10 件
リンクうまくできませんでした。こちらのサイトです。
ソトヨガって？ | もっとソトヨガ〜3分でココロとカラダをキレイに〜 健康な体ときれいな水を守る。シャボン玉石けん presen...
http://sotoyoga.jp/about/ちょっと前までは自分もheight:0;でpaddingで高さ指定していましたけど最近は
text-indent: 100%;、white-space: nowrap;、overflow: hidden;でやっています。
ぼくはこれです。
.class名 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
結局のところ、テキスト飛ばし、隠しなのでNGになると思われますよ。
昔流行った？テキストを背景色と同じにして隠したり、text-indent -9999pxにしたりもNGです。
基本的には画像のところは画像を入れてaltをしているする。
テキストはテキスト。
というのが、昔からほとんど変わらないけど、検索結果等に関しては問題なかったりもするから程々にしておいたほうが良いと思われます。推測です。
テキスト隠しなので、SEOスパムとして看做されるテクニックになります。
ただし、ちょっとでも使ったら即ペナルティ（インデックス削除とか）では無いので、
悪質と看做されない範囲での使用なら問題ない（と思われる）ケースが多いです。
※ペナルティを喰らってないけども、Hタグ等のSEO効果が弱くなっている可能性はあります
ちなみに、クライアントさんがSEOによる検索順位向上に関心が強い場合は、
出来上がったサイトをSEOコンサル業者に診断してもらうことがあると思いますが、
そうなると「テキスト隠し」系テクは必ず改善点として指摘されます。
結果、「○○社はデザインは良いけど、コーディングはクソだよね」なんて評価されるようになり、最悪そのクライアントの次の仕事は無くなります。
まあ、いまどきSEOに興味の無いクライアントなんていませんから、
テキスト隠しテクを使う場合は、クライアントの了承を得たほうが無難ですね。
へんな小細工はしません。
<img src="画像パス" alt="テキスト">
だけです。
皆さん投稿ありがとうございました。
新たに「こんな方法もあるのか」という書き方もあり興味深かったです。
HTML上はテキストで表現するのと、imgのaltにテキストを書くのとどちらが検索エンジンに評価されるかという問題のような気がしました。
私自身はh1に画像を使おうがGoogleはちゃんとaltを読んでくれるだろうと最近は楽観的に考え、imgタグのaltに文言を書いています。
背景色やtext-indentのテクニックは見たことあったのですが今回のようなものは始めてみたので、もしやこのやり方は評価が下がらないのかな？と思って質問させて頂きました。
そこまでこだわってテキスト隠しせずにシンプルにimg使ったほうがよさそうですね。
imgよりもcssの方が強力にキャッシュが効くし、スプライトによる負荷軽減もできるので小細工というわけでもない。というかアップルはじめ大手サイトでもかなりの割合で使われてる。
これからはAdobeのフォントテクニックが流行しそうな気配
未だにh系で画像置換使うのはなしだけど、最近はロールオーバー有りのナビゲーションはcssスプライトでっていうの割りと主流になってきてますけどね。それ系のナビゲーションで逆にcssスプライトもプリロードもしてないサイトとかの方がよっぽどありえないかと。
関連するトピックス