ウェブマスターフォーラム

Web 制作 (SEO, SEM, CSS, Web デザイン等) に関する話題を扱うフォーラムです。

新規ユーザー登録 | パスワードを忘れた

テーマ : ウェブデザイン

★東京オフ会予定 3/1 (土)
★大阪オフ会予定 2/23 (土)
オフ会FAQ

スタイルシートや配色・レイアウト、ナビゲーションやユーザビリティについての話題を扱います。

トピック : CSS :: SEOと見ための両立について

indent css

次の古いレス20件 << 最新のレス20件 >> 次の新しいレス20件

No.1 - 2006年11月27日 02:49 MIX （10ポイント）: 初めまして。みなさんのご意見等を伺いたく投稿をさせて頂きます。よろしくお願いします。

一般的な2カラム（3でもいいですが）のcssによるレイアウトがあったとして、トップに200x800px（タテヨコ）程度のヘッダがあるものとします。左上にロゴがあって、トップページへのリンクとなっている。全ページ共通のヘッダぶぶんです。ブログなどによくある定型的なデザインです。

んで、デザイナー的な視点ではヘッダ部にテキストを入れたくなく、画像（あるいはflash）のみのデザインにしたいわけですが、SEO的にはbodyの始まりぶぶんに<h1>～</h1>をテキストリンクで入れよということになるので、以前はトップのロゴをh1タグで囲んでaltを入れるということをやっていましたが、altのぶぶんは検索ボットに読んでもらえないかもと教わりましたので、ヘッダ部のさいしょに<h1>～</h1>をテキストで記述し、それをcssによるposition指定で、ヘッダの下の方にずらすということをやっております。

つまり、「見た目は、ページの一番上にロゴとか、カテゴリボタンとか、いろいろトップの装飾的な画像がいちばん上にあってh1で囲まれたぶぶんは下の方にきているわけですが、ソースを見るとh1がbodyの始まりに記述されてある」という方法を自分なりに考えてみました。これは単に位置をずらしているだけなので、文字を見えないほどに極小化するとか、レイヤーの下に隠すなんていうスパム的なやり方ではないだろうとじぶんでは思っています。また、これをやることにより、たとえばヘッダの下が3カラムのデザインだったとしても、真ん中のカラムにh1を入れることができていいかなと思いまして。

と前置きが長くなってしまったのですが、ここからが本題です。私は上記のようなやり方でいつもデザインをするのですが、他サイトのソースもよく見ます。「みんなはどうやってるのかなぁ」ということにすごく興味があるので。それで今日もひとつ見てみたら、とある大手自動車メーカーのブログサイトのcssをチェックしたしたところ、ページ上に見えないh1, h2, h3がソースの中には記述されており、text-indent: -10000px;で隠しているのを見つけました。これはペナルティにならないのでしょうか。みなさんはいかが思われますか。

私は一介のフリーのデザイナーで、あっちはびっくりするような大手のサイトなのでケチをつけるのもおこがましいのですが、ナヌ～と思いました。このやり方は正しいと思われますか。ということを質問してみたかったのでした。該当ページのurlはいちおう伏せときます。まだこのフォーラムに不慣れなもので書き込んでいいものかどうかわかりません。書き込んでよいものでしたら、そのようにおっしゃってくださいませ。

また、上記質問以外にも「SEOとデザインの見た目を両立させる」というテーマでご意見、アドバイス等頂けたらと思います。長文になりましたがよろしくお願いします。
No.2 - 2006年11月27日 11:09 Marz （34ポイント）: 質問の回答というより私個人の意見になりますが、例え「見出し語」を隠していようといまいと、検索エンジンの結果順位付けが、そのページにたどり着きたいユーザーを正しく導くためのものだとすると、結局は「見出し語」の内容が問題になるんじゃないでしょうか？
検索結果として意図したものにしたいから「見出し語」を隠すのではなく、ユニバーサルデザインを意識してそうなったソースだとしたら、それをスパムと判定した検索エンジンのスパム判定そのものの精度が疑われてしまうと思います。
要するに、「見出し語」を隠しているかどうかがスパムではなく、そのサイトを正しく表現しているかどうかが基準なのではと思います。
その大手自動車メーカーのサイトは、検索結果に正しい結果を促すに値しない語句を隠していたりするのでしょうか？
No.4 - 2006年11月27日 13:53 幸之介（84ポイント）: まずなにより、Marzさんの意見ごもっともだと思います。

アクセシビリティのために、たとえば「通常は見えない（隠しておく）けど、音声ブラウザ用のテキストを記述しておく」といったこともあるので、h1のテキストを隠すこと自体は問題ないと思います。
それをマイナス1万ピクセルとして記述することは気持ち悪く感じますが、現状のCSS状況ではやむなしと思っています。いまはこの方法が定石ですが、きっと将来はもっといい記述の仕方ができるようになるでしょう。

あと、少し話はそれますが、h1絶対主義は迷信だと思います。サイトのロゴをh1で記述するのがマークアップ的に適当かどうかの議論はありますが、仮にロゴをh1、ページ見出しをh2にしたとしても、ページ見出しをh1でマークアップした時とSEO効果は変わらないでしょう。
検索エンジンはサイト全体を見回して、「このサイトはh1がすべて同じだ。ということは、これはサイト共通のロゴであって、ページを個性づける最重要な見出しはh2だな」と判断するはずです。いわんや、title要素にh2の見出しテキストが記述されていればなおのこと。

あと、該当URLは書き込んでもいいでしょう。書き込む本人が遠慮するかどうか、リンクされた側が嫌がるかどうかの問題で、ルールとしてリンクを張ってはダメな場合はありません。
No.5 - 2006年11月27日 14:14 ciel （100ポイント）: >MIXさん

http://forum.su-jine.net/theme/web-design/41/
トピック : CSSのみでのレイアウト
No.15
に私が同じような内容テーマの書き込みを以前しておりますので参考になれば...

見本ページ
http://park12.wakwak.com/%7Eciel/sa/index.html

わたしはSEO的な狙いと言うよりもやはり見た目の為に画像置換を結構使ってますが今のところスパムとしてペナルティはないと感じています。
私の場合は念のためrobots.txtでCSSでを記述した外部ファイルをロボットはじいています。

弊害と言うか、ユーザービリティを考えるとかなりめんどくさい事にはなります
ttp://www.fsiki.com/jet/css-xhtml/text-indent.html
No.6 - 2006年11月28日 01:36 MIX （10ポイント）: みなさん、レスをありがとうございます。

Marzさん、幸之介さんのレスを読んで「あぁそういうものか」と思いましたです。でも「隠す」ちゅうのはじぶん的にいやなんですけど、まぁ好みの問題ですねw。お二人の意見を読んでほぼ納得できたんで該当ページのurlをここに記述しないでおきます。そこに書かれてある見出し語はサイトの内容に照らして相応の言葉があったのでたぶんMarzさんのおっしゃるような意図で挿入されているんでしょう。

あと私もh1が絶対だなんて思っておりませんです。これの記述がないサイトでアクセスがたくさんあるところも多いですよね。まぁ、なんというか、入れないときもちわるいみたいなのがあるんで、どうしても入れたいのですw。

cielさん、挙げて下さったurl、参考になります。cssとjsのオンマウスオーバーは私もよく使いますが、確かに言われてみればアレもそうですね。外部cssをrobots.txtでハジくというやり方は知りませんでしたので私も今後取り入れてみようかなと思います。.htaccessでハジいちゃうと「厳禁！」みたいなかんじになってこれはどうかと思いますが、robots.txtは「できるなら見ないでね」程度なのでこっちの方がよいなと思ったりしました。

次の古いレス20件 << 最新のレス20件 >> 次の新しいレス20件