display:none;でSEO効果を下げないように使わないことにした理由

SEOの最適化が優先!ブログで『display:none;』を使ってコンテンツを隠さないようにした理由

SPONSORED LINK


cssで『display:none;』を使ってコンテンツの表示・非表示を切り替えられるようにしようかなーと思ったら、ふとこんな疑問が。

みやあき
これってSEO的にどうなんだろう?

ブログはコンテンツの内容が重視される訳だけど、『display:none;』を使ったらコンテンツが消えちゃうよね。でもHTML上には存在している訳だから、問題はないのかな?

心配になったので調べてみたところ、やっぱりGoogleさんは『display:none;』を使ってコンテンツが非表示にされていることを見分けることができるみたいです。また、それによってSEO効果がしっかり受けられないかもしれない、ということもわかりました。

cssの中でも『display:none;』はなにかと便利でよく使っていたのですが、僕は色々と調べた結果、ブログ内のコンテンツでは『display:none;』を使って隠さないことに決めました。

おそらく僕みたいにコーダー出身のブロガーさんたちは特に迷われると思うので、そんなときの参考にしてみてくださいな!

SPONSORED LINK

『display:none;』のおさらい

CSSのdisplay:none;を使った実例

まずおさらいですが、『display:none;』とは指定した要素を並び替えたり、主に表示・非表示を切り替えられるcssのプロパティです。

.div_hide{
    display:none;
}

こうすることで、『.div_hide』とクラス名のつけられた要素が非表示になるわけです。そして表示したいときには、この要素をブロックしてあげればいいんですよね。

.div_hide{
    display:block;
}

また最近だと、横並びにするときに『float』を使わず、displayプロパティーを使うパターンも多く見かけますね。
これだとインライン要素のまま移動させることができますから、『overflow:hidden;』や『clear:both;』を使わずに設定できるので便利です。

.div_hide{
    display:inline-block;
}

『display:none;』を使うとSEO的にどうなのか

ただ、『display:none;』を使うとコンテンツが隠れてしまいますから、SEO的に心配になりますよね。

そこでGoogleガイドラインを見てみたところ、項目の『隠しテキストと隠しリンクなどには』にこのように書かれていました。

Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドライン(品質に関するガイドライン)への違反にあたります。過剰なキーワードなどのテキストは、次のような方法で隠される場合があります:

  • 白の背景で白のテキストを使用する
  • テキストを画像の背後に置く
  • CSS を使用してテキストを画面の外に配置する
  • フォント サイズを 0 に設定する
  • 小さな 1 文字(段落中のハイフンなど)のみをリンクにしてリンクを隠す
  • サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。

Googleガイドライン

ポイントは“偽装行為と見なされることがあり”、というところですね。ただ、一体どこからが偽装行為でどこからが正常な使い方なのかまではさすがに定義されていません。

それと、『display:none;』以外にもやってしまいがちなのが『font-size:0;』ですね。これもGoogle的には隠しコンテンツだとみなす可能性がある訳ですから、使うときには注意が必要です。

『display:none;』を使うと全てがスパム扱いされる訳ではない

ただ、『display:none;』を使うと全てがスパム扱いされる訳でもないそうです。

サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。

ただし、隠しテキストがすべて偽装行為と見なされるわけではありません。たとえば、サイトで JavaScript、画像、Flash ファイルといった検索エンジンにとってアクセスしにくい技術が使用されている場合、そのようなアイテムについて説明テキストを使用するとサイトのアクセシビリティが向上することがあります。

Googleガイドライン

スパムと見なす可能性がある…と言っておきながら、今度はアクセシビリティが向上することがある…ときましたか!(笑)。難しいことを言いますねぇGoogleさん!

ただこのことから分かるのは、普通にブログを書いている分にはSEOに問題がない、ということです。また逆にいうと、不必要にコンテンツを隠さないほうがいい、ということでもあると僕は解釈しています。

レスポンシブデザインで『display:none;』は使わざるを得ない

Googleは利用者の端末に合わせてHTMLを分けるユーザーエージェントではなく、1つのHTMLでのレスポンシブデザインウェブサイトを推奨していますが、これを実装するためには『display:none;』は欠かせませんよね。

なので『display:none;』を使うことそれ自体は全く悪いことではないと思われますし、ユーザーエクペリエンスを向上させるためにもレスポンシブデザインのサイトではこれを使うべきでしょう。グローバルナビゲーションの要素をマウスホバーで表示させたり、ウィジットエリアを切り替えたりなど、これらは今となっては当たり前のように『display:none;』が使われていますから問題なさそうです。

ただし、メインとなるコンテンツ(ブログ記事の内容など)に使うときには注意が必要かな、と思いますね。検索エンジンにとって重要な要素は間違いなくコンテンツなので、それを隠してしまうとスパムと判断されることはないものの、SEO
の効果を受けられなくなることは大いに考えられます。

SEOを最適化することに力を入れよう!

僕も本当は『display:none;』とJQueryのtoggleを使って、コンテンツの表示・非表示を切り替えたかったんですよね。

使おうと思っていた場所はここです。映画の感想でネタバレがある部分とない部分の切り替え。これを実装したかった!

映画のネタバレをdisplay:none;で隠そうとした

だけど、検索エンジンに評価されるようになるには、Googleのガイドラインを理解してSEOを最適化することが何よりも大切だなと、今回調べてみてわかりました。

ネタバレを見たくない読者にとってはタップで切り替えられた方がいいんだろうけど、それよりもまずGoogleに評価してもらえないと読者の元へ届かないんですよね(笑)。なんで、表示・非表示を切り替える諦めてSEOの最適化に徹することにしました。

まとめ

ブログをやってると自分のサイトをあれもこれもとカスタマイズしたくなってしまうのですが、SEOにとって逆効果になってしまっていないかは、サイトを運営する上で気をつけなくてはいけません。

いくら読者が読みやすくなると言ったって、検索結果に乗らなければ記事を読んでもらえない訳ですからね。『読者よりSEOが大切!』というと邪道に感じますが、そのぐらいの心算でやってよさそうです。

ということで以上、『display:none;』とSEOについてのお話でした!

SPONSORED LINK