適切なCSSの実装は処理速度を高め、ユーザービリティを高めることにつながり、結果としてSEOへの効果が期待できます。そこで本記事では、SEO対策の効果が見込めるCSSの正しい書き方についてご紹介します。
• CSSがSEOに与える影響
• コーディングのガイドライン
• CSSチェックツール
もくじ
CSSがSEOに与える影響とは？
CSS（Cascading Style Sheets）はスタイルシートとも呼ばれており、サイトの文章構造等を形作るHTMLと組み合わせて装飾を加える言語となります。初心者は骨組み（HTML）に肉付け（CSS）するようなイメージを持つと良いでしょう。
より具体的には、画像やテキストが盛り込まれた企業サイトにおいて、画面全体のレイアウトや画像の表示はHTMLが担い、色やフォントなどで彩りを加えるのがCSSの役割となります。
一方、以上の内容だけではSEOに与える影響が掴み切れないことから、ここでは2つの大きなポイントを詳しく見ていきましょう。
ページ処理速度を高める
CSSが直接的にSEOに影響を及ぼすわけではありませんが、本来短くて済むコーディングを長文記述してしまうと、サイトのページ処理速度を低下させてしまう要因となるでしょう。
そして、現在Googleが提唱している検索アルゴリズムにおいては、スマホでサイトを閲覧した際の表示速度も評価指標の１つであるため、端末が読込みやすいよう必要最低限に止めておく必要があります。
一方、十分に簡素化されたCSSであれば、サーバーからダウンロードして画面に構成するまでのページ処理速度は着実に向上します。ページスピード（ページの表示速度）の向上として検索エンジンの評価を上げる効果が期待できるため、SEOに与える影響は決して小さいものではないといえるでしょう。
レンダリングに影響する
レンダリングとは、表現、あるいは解釈といった意味を持つ英単語であり、プログラミング業界においてはCSS等のリソースを整形して、実際に画面へ反映させることを指しています。そして、ここで注意したいのが、外部ファイルの読込み位置やサイズが規定されていない要素を含んでいるために発生する「レンダリングブロック」という現象です。
インターネットに接続している端末は、ユーザーがリンク等をクリック（リクエスト）すると、データローディングを開始して画面を描画、スクリプト実行という作業を高速で実行しています。ここでCSSが適切でないと、一連の流れを阻害するレンダリングブロックが発生するため、結果的にページの処理速度は低下、ユーザーエクスペリエンスのクオリティも落ちてしまうでしょう。
以上のことから、CSSはSEOに大きな影響を与える要素であり、サイトのパフォーマンスを向上させるようなコーディングが重要となっています。
Googleのガイドラインに沿ったコーディング方法
ここからは、Googleガイドラインで提唱されているコーディング方法を4つのポイントに分けて見ていきましょう。是非参考にして下さい。
CSSのスタイルルール
ここでは、CSSのスタイルルールをご紹介します。
- ID及びクラスの命名
- ID及びクラス名のスタイル
- タイプセレクタ
- ショートハンドプロパティ
- 「0」と単位
- 小数点数値「0」
- 16進法
- プレフィックス
- ID及びクラス名の区切り文字
- CSSハックは最後の手段に
CSSには意味のないIDや、見た目だけのクラス名だけでなく、検索エンジンのクローラーが判別しやすいように命名しましょう。
最大限短縮されたスタイルで、クローラーが理解しやすい記述を心掛けて下さい。
タイプセレクタ、あるいは子孫セレクタにはIDとクラス名を含めないようにコーディングしなければなりません。
ガイドラインに沿うだけでなく、行数を省くためにもプロパティを一括指定しましょう。
値が0の場合は基本的に単位を省略して下さい。
値が小数点のケースにおいても0を省略しましょう。
黒は#000、白であれば#fffといったように、コードが2つ続く際は16進数表記に基づいて3文字で記述して下さい。
大規模サイトにおいては、ID及びクラス名が重複してしまう可能性がありますが、基本的に末尾へハイフンを付けてプレフィックスを設定して下さい。
ID及びクラス名が2つ以上の単語になる場合は、ハイフンで繋げるようにしましょう。
CSSハックは最終的な手段として用いるようにして、なるべく別の表現方法を採用して下さい。
CSSの書式ルール
ここでは、CSSの書式ルールについてご紹介します。
- プロパティ宣言の順序を守る
- ブロック毎のインデント
- 宣言の終わりにセミコロン
- プロパティ名の終わりに半角スペース
- セレクタ及び宣言を分離する
- CSSルールを分離する
- CSSには単一引用符を使う
プロパティ宣言はアルファベット順に記述して、ベンダープレフィックスは考慮せず、接頭辞（プレフィックス）の順序を守るようにしましょう。
ブロック毎にインデントして、階層を判断しやすくして下さい。
宣言はセミコロンを付けて終わるように記述しましょう。
プロパティ末尾のコロンには半角スペースを入れて下さい。
宣言とセレクタは改行して分離するように記述します。
プロパティは1つずつ改行を入れましょう。
プロパティ値、あるいは属性セレクタには単一引用符を使用して、URLには含めないようにして下さい。
CSSのメタルール
CSSのメタルール重要であり、セクションごとの区切りには注意が必要となります。CSSのセクション毎の区切りでは、改行と用途等のコメントを記述しましょう。
CSSを外部ファイルで読み込む
CSSはHTMLのスタイル内、あるいはインラインで記述することもできますが、外部ファイル化も可能となっています。簡単なイメージとしては「CSSファイル」を別途作成して、HTMLファイルから読込ませるということであり、現在のウェブサイト作りにおいては最も一般的な手法といえるでしょう。
その背景としては、2つ以上のHTMLに同じコードを適用できるというメリットが挙げられており、大規模サイト運営の際は変更作業の簡易化、そしてSEO対策ではユーザービリティ向上に繋がります。
以上4つのポイントを遵守してコーディングをすれば、SEO対策に効果が見込めるため、是非参考にして下さい。
CSSチェックツールがおすすめ
CSSには記述ミスが付き物である一方、SEO効果を高めるためにはユーザーにとって利便性の高いページに仕上げなければなりません。そこでここからは、設定を確認することのできるCSSチェックツールを解説していきます。いずれも正確なコーディングに役立つスペックであるため、しっかり押さえておきましょう。
Dirty Markup
CSSはもちろんHTMLも同時にチェックできるDirty Markupは、コードをペーストするだけでエラーを検知してくれるツールです。
また、clean機能を用いれば無駄なコードを整理するだけでなく、インデント等も自動で追加してくれるため、コーディングにおいては大変利便性が高いスペックといえるでしょう。
ちなみにDirty MarkupはJavaScriptにも対応していることから、サイトの統一性を保ちたい方には特におすすめとなっています。
W3C CSS Validator
W3C CSS Validatorは、エラーやタイプミス、CSSの誤用がないかがチェックできるツールです。
利用方法はCSSのURLを入力、あるいはデータファイルの直接アップロード、テキストを打ち込むといった3つのパターンに対応しており、レベルに分けて検証結果が確認できる機能も保有しています。
そして、特に注目したいのはそれらが全て無料サービスとなっているポイントであり、コストをかけずメインとして採用できるスペックを備えたツールといえるでしょう。
以上2つのチェックツールを活用すれば、SEO対策に繋がるCSSを実装することができるため、現在ウェブサイトを作成している方は是非検討してみて下さい。
まとめ
本記事では、SEO対策に効果のあるCSSの実装方法について解説しましたが、いかがでしたか。適切なCSS実装はWebサイトのユーザビリティを高めることにつながり、SEO効果を高めます。自社サイト運営においてもCSSの適切な実装を心がけるようにしましょう。
