webディレクターのdevil≒芝です。
さて今回は、久々にSEOの話に関して記述していきます。
前回のSEOの話は、初級編です。
覚えていますか？
忘れつつあるという人は、過去記事を参照してください！
ざっくりと言いますと、タグの使い方とHTMLとCSSなど分けましょうということに関して、伝えています。
今回からは、SEOとCSSの関係に関して記述していきます。
そんなに長くはありません！
reset.cssに関して
通常、htmlだけでWEBを表示させると、ブラウザ側で勝手に使用タグによって分けられます。
スタイルが決められます。※下記の図を参照
h1は、一番大きな見出しなので、大きく表示されます。
また、＜li＞タグは、リストを表すので、左に点が表示されます。
しかし、全てのタグにそれぞれのスタイルを修正していくことは、非常に面倒です！
記述の必要のない内容まで、cssに記述が必要になるのは、面倒ですよね！
そこで、一般的には、「reset.css」というcssを利用します。
reset.cssとググれば、すぐに出てきます。
それを読み込んであげれば、ブラウザでデフォルトのcssはresetされ、後は、必要な箇所にcssを記述するだけです。
これが、第一段階です。
cssを利用してやってはいけないスタイルの指定方法
これが結構、以外とあります。
代表的な例として、２つを今回は紹介します。
- 画像置換
- ＜strong＞を目立たなくさせる。
まずは、「画像置換」に関してです。
画像置換とは、画像を利用したボタンのばあいに使用する人が多くいます。
画像の下にテキストをCSSを用いて配置していたりします。
そのときに、使用するのが、「text-indent:-9999px;」「z-index:-9999;」ということです。
サイトの運営者の方は、一度、CSSファイル内にそのような記述がないか、確認してみてください！
一般的にz-indexという方法は、プラス値でしか使用しません。
ちょっと入り組んだ話になりますと、Aという画像とBという画像があり、AにBが少し重なっていたとします。
そうすると、下記のような記述をします。※まとめて一番下に画像は掲載。
此の様にz-indexは、それぞれの高さの位置を指定します。
上に表示させたい画像等程、z-indexの数値を高くします。
そのように使用する話で考えると、z-indexにマイナス値を入力していることは、 何かを隠している状態になるのです。
まぁ、z-indexでマイナス値なんて入れた人あまり見ないですが・・・。
また、text-indentは、先頭行の開始ポイントを変更する際等に使用します。
コチラは、マイナス値も入力したりします。
ただ、ほんの数ピクセルの話です。
ブラウザ左側の見えない箇所に飛ばしていることです。
特にグローバルメニュー等で使用している場合が、多いです。
誤ったSEOの知識で制作しています。
これらを利用していて、ある日、サイトのランクががくっと落ちたという企業様も見かけます。
これは、googleなどにサイト自体がスパム判定のペナルティを受けたということです。
そうなんです!!
この手法を利用すると、最悪の場合、検索エンジンからペナルティを受ける場合もあります。
ただ、現状は、限りなく黒に近いグレーゾーンです。
私は、絶対にやりませんが、やっていても、グレーなので、大丈夫かもしれない・・・。
ということです。
そこは、お任せします。
私は、やらないことと、やっていれば、すぐに止めることをお勧めしますが・・・。
次は、「＜strong＞を目立たなくさせる。」という方法です。
これも最悪の場合、ダメだ！！と判断されてしまう可能性は、十分にあります。
strongは、あくまでも強調の意味で用いられます！
しかし、＜p＞などのインライン要素では、他にも＜span＞という装飾タグもあります。
spanとstrongのタグの意味をはき違えては、ダメです！！
たとえば、下記に添付する画像のようにスタイル設定している場合です。
これでは、strongの方よりもspanの方が強調されてしまいます。
強調の意味を果たしていません！
これでは、何のためのstrongか分かりません。
意味の無い使い方は、基本的に禁止です。
strongに関しては、見た目上もcssで強調するように利用してあげれば、イイかなと思います。
因に、備考として、文字を見えづらくして消すという方法もあります。
opacityという方法で、透過させることが可能です。
ただし、これもダメです。
これは、本当にペナルティ対象です！！
見た目的には、書かれていないが、検索botを気にしたのみのSEOはアウトです！
今日の所は、スパム判定になる可能性は、排除しろ！！ということです。以上です。