[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ

見出しのテキストを非表示化するとSEO的にスパムになる?!

 <h1>や<h2>などの見出し要素のテキストをスタイルシートで隠し、代わりに画像を配置するテクニックは、デザイン上の必要性からよく使われています。

 ここでは、そんな見出しテキスト非表示のテクニックとしてよく使われている代表的なCSSの一例をご参考までにご紹介したいと思います。

 なお、このページでご紹介する方法については、検索エンジンなどでSEOスパムと看做される可能性がゼロではないようですので、SEO的なデメリット(の可能性)を避けたい方は、あくまでも参考にとどめ、ご利用・転用を避けていただくのが賢明です。

 この点、テキストと画像の内容が一致していればスパム認定される可能性は低いとも考えられますが、それをどうやってクローラーが正確に判断できるのか疑問です。

 確かに検索エンジンの方針に振り回されるのは不本意ですが、デザイン上のメリットよりもSEO的なデメリット(の可能性)を避けたい方は、やはり利用を控えておくのが無難です。

インデントをマイナス方向へ設定する

 テキストインデントプロパティをマイナス方向へ設定して、見える範囲内から外側へ消してしまうテクニックです。マイナス方向へ数千・数万ピクセルずらすという通常ありえない方法ですが、意外によく使われている方法です。テキストを消した代わりに背景画像を指定することができます。

h1 { text-indent: -9999px;}

h2 { text-indent: -100%; }

ディスプレイプロパティで非表示にする

 表示形式を指定するディスプレイプロパティを非表示にして、見出しのボックスそのものを画面上から消し去ってしまう方法です。この方法だと背景画像も表示されなくなります。これもよく使われているテクニックです。

h1 { display: none;}

ポジションプロパティで見えない所へ移動させる

 テキストインデントの方法と似ていますが、今度はポジションプロパティを使って画面の外に追い出してしまう方法です。設定次第では、バナー画像等の後ろに隠すこともできそうです。

h1 {
 position: absolute;
 top: -500px;
}

サイトトップページへ戻る