cssはseoに影響する！GoogleのCSSガイダンスに沿ったコーディングを目指そう

cssはGoogleのガイドラインに沿って、なるべく記述量を抑えてSEOスパム判定とならない書き方をしていくべきです。

そうする事でWEBページの読み込み・表示速度が上がり、SEO対策上も有利に働くとされています。

cssは全て外部ファイルやimportで読み込まずに、必要に応じてインライン化するなどの工夫をしましょう。

cssは書き方次第ではSEOに影響します

本記事ではSEOを念頭にしたCSSの見直しという事で、Googleが推奨しているCSS（スタイルシート）の書き方・注意事項についてまとめました。

何も考えずhtmlをデザインする為だけにcssを書くと、場合によってはGoogleからの評価が落ちる可能性が出てきます。

cssを記述する敷居は低くなりましたが、SEOを狙うためWEBデザイナーやプログラマーの方に覚えておいて欲しいポイントをご紹介します。

cssの処理速度が足を引っ張る可能性

基本的にcssの記述自体がseo順位に直接影響を与える訳ではありません。

しかしcssの書き方次第ではWEBページの表示速度（レンダリングスピード）に影響を及ぼします。

今はMFIによりスマホページの表示速度がページ評価の要素として優先されていますよね。

つまりスマホページの表示速度はSEOの評価の一端となる訳です。

Googleのガイドラインに沿うcssの書き方

Googleの推奨するcss記述のガイダンス

Googleのガイダンスに、理想とするべきcssの書き方が指南されています。

ですのでまずはそのガイダンスに沿ったcssの書き方を覚えておくべきと言えるでしょう。

コツとしては「いかにcssの処理速度を速めるか」がポイントです。

参考：Google HTML/CSS Style Guide

Googleは全体的に簡素化されたシンプルなソースコードのcssスタイルシートの読込を望んでいます。

逆に複雑になればなるほど、推奨されないcssになっていくので注意が必要ですね。

記述量をなるべく抑えて省略できるところは省略しファイルサイズを抑える、そのためのポイントをいくつか紹介します。

記述量を抑えるためのcss書式ルール

URLのパスについて

Googleはhttpやhttpsのプロトコルを省略して書く事を推奨しています。

非推奨例：

.example { background: url(https://www.example.com/images/id.jpg); }

推奨例：

.example { background: url(//www.example.com/images/id.jpg); }

上と比べると、下は「https」の部分が省略されていますよね。

SSL化する時に修正が必要な箇所になる

SSL化する時はCSSの記述上にhttpの表記があるとSSL化が完了した事になりません。

その意味でもプロトコルは消しておくべきです。

この書き方は、headタグ内のURL記述についても同様の書き方が推奨されています。

引用符について

非推奨例：

@import url("//www.example.com/css/style.css"); html { font-family: "open sans", arial, sans-serif; }

上記は属性セレクタやプロパティ値にダブルコーテーションが使われている例です。

推奨例：

@import url(//www.example.com/css/style.css); html { font-family: 'open sans', arial, sans-serif; }

属性セレクタやプロパティ値には単一の引用符（シングルコーテーション）を使用しましょう。

またURLには引用符を使いません。

小数点数値「0」の削除

非推奨例：

font-size: 0.5em;

推奨例：

font-size: .5em;

0.5などの数字をプロパティ名後に記述する際、「.5」という形でゼロを含めない記述を推奨しています。

px等の単位

非推奨例：

margin: 0px; padding: 0px;

推奨例：

margin: 0; padding: 0;

値が0の場合は単位を省略することができます。

IDやクラス名の単語連結

非推奨例：

.web_status {}

推奨例：

.web-status {} .sample-img {}

IDやクラス名に2つ以上の単語や省略後をつなげて指定する際は、アンダーバー「_」は使わずにハイフン「-」を使いましょう。

タイプセレクタにはIDやクラス名をつけない

タイプセレクタに続けてIDとクラス名を記述しないようにします。できれば子孫セレクタも同様に避けましょう。

非推奨例：

ul#example {} div.content {}

推奨例：

#example {} .content {}

ulやdivなどのタイプセレクタにクラス名を付けている人はたくさんいると思います。これを機に見直してみましょう。

ショートハンドプロパティ

できる限りプロパティを一括で指定するようにしましょう。

記述量を大幅に節約できますし、管理もしやすくなります。

非推奨例：

font-size: 100%; line-height: 1.4; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; padding-top: 0; border-color: #cc0000; border: 1px; border-style: solid;

推奨例：

padding: 0 10px 20px; border: solid 1px #cc0000;

これだけの行数を必要としていたのがたったの2行で済むわけですから、使わない理由が見当たりません。

16進法を短縮する

色指定コードが連続で2つ続きの場合は、16進数表記の3文字で記述することができます。

例えば白なら#fff、黒なら#000となります。

非推奨例：

color: #ffcc00;

推奨例：

color: #fc0;

その他のcssチェック項目

などに注意しましょう。

非推奨例：

.red{ font-weight:bold; color:#cc0000; }

推奨例：

.red{ color: #cc0000; font-weight: bold; }

上記はプロパティ名の前とコロンの後ろに半角スペースが入り、プロパティ名はアルファベット昇順にしています。

SEOスパムに注意CSSチェックポイント

クローキングによるSEOスパムの判定

時にWEBサイトは、検索エンジンに見せる内容とユーザーが見せる内容を変えなければならないケースがあります。

結論としてそれが「Googleのため」なのか、「ユーザーのため」なのかによって取るべき対策が変わってきます。

Googleに対する対処のケース

といったGoogleへの何らかの操作を要求する場合です。

現在のGoogleのガイドラインでは上記の方法はスパムと認定されてペナルティを受ける可能性が高いです。

ですのでこの設定は即停止するべきです。

ユーザーに対する対処のケース

それに対して下記のようにユーザーへの何らかの操作を強いる場合もあります。

特定のユーザーへ閲覧制限をかけたり、同一URLのまま内容が大きく異なるコンテンツを切り替えて見せる場合などですね。

基本的にはこの行為はユーザーのためであり、その意図はGoogleに伝わるはずなので問題は無いと言えます。

しかし100%保証する訳では無いので、気になる様であればrobots.txtやheadタグ内のmeta noindexを使ってブロックしておくべきです。

小さすぎるフォントサイズの多様

あまりに文字が小さいと読みにくくなります。それはユーザビリティをも損ねてしまいますよね。

その理由としてはスマホで閲覧するユーザーが多くなったことが一つの要因ですね。

PCならブラウザの拡大縮小機能で大きくする事もできますが、スマホだとそうはいきません。

誰が見ても小さいフォントは控える

誰が見ても明らかに小さいと認識できるくらい可読性も下がる様なCSSのフォントサイズ設定はまずいと思います。

特に読み物のサイトでは、小さいフォント設定は避けるべきだと思います。

リンク同士が近すぎる

特にスマホページでリンクボタンの間隔（タップできる部分）が近すぎる場合に、Googleのモバイルフレンドリーで指摘される場合があります。

Googleのモバイルフレンドリーテストガイドラインで、ボタンの間隔やサイズにおけるある程度の基準が設けられています。

それに最低限沿った形で適切な間隔で設置するのが好ましいでしょう。

背景色と同じ色のテキストを入れる

こちらに関しては、昔から知られている隠しテキスト・隠しリンクですね。

単色で敷き詰められた背景画像の上に同色によるテキストを入れてテキスト量を増やした行為は、スパム判定になるとされていました。

白地の背景に白のテキストを書くのも同じ扱いです。

Googleの診断技術も日々向上してはいます

仮に画像の上に設置した文章が見にくくても「デザイン性を重視して意図的にそうしている」と判断してもらえるかも知れません。

しかしGoogleから特に注意がある訳ではありません。診断の際はスパムかスパムじゃないかの二者択一でしかないのです。

スパム判断される可能性が少しでもあるようなら、cssの背景色に同化してしまう色の指定は避けるべきでしょう。

タブやアコーディオンで表示・非表示のコンテンツ

最近はタブメニュー等でコンテンツを切り替えたりアコーディオン開閉式の要素を使用しているWEBサイトが多くなりましたね。

特にモバイルファーストインデックスが実施される事を受け、スマホページのコンテンツが重要視されている事もあります。

スマホページは表示領域がどうしても狭いので、初期状態での表示コンテンツ・非表示コンテンツが選別されます。

見えていない部分は評価対象に入らない

Googleは初期状態で非表示のコンテンツを「検索結果の診断対象部分に入れない」という公式発表していました。

クローラーによるインデックスはされますが、検索結果の指標としては使っていないという事ですね。

最近はその発表の力強さが薄れているような気がしますが、気になる様であればタブ表示などで隠さずに全て最初から見せておくのが良いでしょう。

アコーディオンなども同様にカテゴリ別の区分けだけに留めて、後は見出しと説明テキストを常時表示させておきましょう。

cssを外部ファイルで読み込み

これまではcssの書き方を中心とした説明でしたが、以下からは読込操作の工夫に入っていきます。

ページ共通のCSSは外部ファイルとしてheadタグ内で記述・参照する事がほとんどだと思います。

一般的にはheadタグ内に以下のように記述しているはずです。

headタグ内css記述

推奨例：

<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

これが容量的に大きなサイズのcssの場合は、上記の様に外部ファイルとして読み込むべきだと思います。

しかし小さなサイズのCSSであればインライン化する方が、ページの表示速度が改善される場合があります。

インライン化とは

インライン化とは、cssファイルに記述するのではなくheadタグ内に直接記述する事を指します。

本来cssに書くはずの部分を直接headタグに書くのです。wordpressなどはよくheadタグにcssの記述がありますよね。

推奨例：

<head> … <style type="text/css"> p{ color: blue } h2 { margin: 10px; padding: 0px; font-size: 14px; } </style> … </head>

最初に画面に表示する部分を中心にインライン化

全てのcssをインライン化しろと言っているのではありません。

あくまで表示速度を上げる事が目的なので最初に画面に映る部分が中心です。

最初に端末画面に映るエリア（ファーストビュー）の表示に必要なCSS記述箇所をインライン化するのです。

それ以外は外部ファイルで読み込んでよいのです。

なぜファーストビューの部分をインライン化した方が良いのか

WEBページ一部分を表示するのに必要な速度と、全てを表示させるための速度は当然違いますよね。

いきなりページ全てをレンダリングさせるよりも、ページ上部のみをレンダリングする方が負荷が掛かりません。

ですので、まずはページ上部の表示に集中できるようにすれば、わずかな差ですがページ表示時の初速が速くなる訳です。

ページ上部を表示させつつ他のファイルを読み込めば、結果全ページをレンダリングする事になります。

これがページ表示速度の改善につながるとされています。

cssの@import機能を使用しない

cssファイルをそれぞれ分割しておいて、読み込む際にimportを使って読み込む事ってよくありますよね。

headタグでは1つのcssファイル（インポートファイル）のみを読み込んで、そのファイル内にimport記述をいれて複数のcssファイルを読み込む仕組みです。

headタグ内のcss読込

非推奨例（import.css内）：

<link rel="stylesheet" href="css/import.css" type="text/css" media="all">

cssファイルが増えても、インポートファイル内にcssの追加をすれば簡単に増設する事ができるので便利です。

でもこのimport機能はページ表示速度を遅延させると言われています。

@import機能の問題点

このimport機能はブラウザの読み込み速度低下につながります。

cssをheadタグ内に直接記述した場合、ほとんどのブラウザでパラレルにロードされます。つまり同時に読込される訳です。

しかし上記の@importを使うと1ファイルずつ順番にダウンロードされるので、その分時間が掛かるのですね。

仮に1つのcssファイルを読み込みに0.3秒かかった場合

という計算になります。

@importを使わずに通常通りheadタグ内に記述をすれば、5つのcssファイルを同時（パラレル）に読み込みます。

5つのファイルでも0.3秒で読込されれば圧倒的に早いですよね。

@importは使わない

上記の理由もありページの読み込みスピードを高速化するため、全てのcssファイルをheadタグ内で読み込む事を推奨されています。

大きな要因ではないかも知れませんが、Googleの検索順位決定の指標のうちの一つでもあります。

訪問者のユーザビリティも上がりますので、まだ@importを使っている場合はheadタグ内へ直接記述したほうが良いでしょう。

推奨例：

<head> … <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/responsive.css" type="text/css" media="all"> <link rel="stylesheet" href="css/custom.css" type="text/css" media="all"> … </head>

cssファイルはrobot.txtでブロックしない

貴方のWEBページのcssやjavascriptは、Googleクローラー（googlebot）に対しきちんと見てもらえる様になっていますか？

googlebotがCSSやjavascriptをブロックしてしまうと、WEBサイトの内容を正しく判別する事ができない場合があります。

googlebotがコンテンツをしっかりと表示確認する事が不可能になれば、評価が低くなり競合他社に負ける事もあり得るのです。

もしrobot.txt内にcssやjs系のファイルをブロックしている箇所があったら、今すぐに外しましょう。

まとめ

以上SEOを念頭にしたcssの書き方による表示速度アップの方法をご紹介しました。

何も考えずhtmlをデザインする為だけにcssを書くと、Googleからの評価が落ちる可能性がある事をご理解いただいたと思います。

Googleが推奨するガイドライン、モバイルフレンドリーにおけるコンテンツのあり方などはこれからも重要視されてきます。

Googleに配慮したcssの記述をする事がSEO対策においても重要だと言えますが決して難しい事ではありません。

デザイナーやプログラマーもcssの基本的な考え方を理解して頂ければ、十分SEOやマーケティング技術を補えるのではないかと思っています。

一押し人気コーナー紹介