SEO対策のためのCSSの正しい書き方とは?

    css

    適切なCSSの実装は処理速度を高め、ユーザービリティを高めることにつながり、結果としてSEOへの効果が期待できます。そこで本記事では、SEO対策の効果が見込めるCSSの正しい書き方についてご紹介します。

    この記事でわかること

    • CSSがSEOに与える影響
    • コーディングのガイドライン
    • CSSチェックツール

    CSSがSEOに与える影響とは?

    CSS(Cascading Style Sheets)はスタイルシートとも呼ばれており、サイトの文章構造等を形作るHTMLと組み合わせて装飾を加える言語となります。初心者は骨組み(HTML)に肉付け(CSS)するようなイメージを持つと良いでしょう。

    より具体的には、画像やテキストが盛り込まれた企業サイトにおいて、画面全体のレイアウトや画像の表示はHTMLが担い、色やフォントなどで彩りを加えるのがCSSの役割となります。

    一方、以上の内容だけではSEOに与える影響が掴み切れないことから、ここでは2つの大きなポイントを詳しく見ていきましょう。

    ページ処理速度を高める

    CSSが直接的にSEOに影響を及ぼすわけではありませんが、本来短くて済むコーディングを長文記述してしまうと、サイトのページ処理速度を低下させてしまう要因となるでしょう。

    そして、現在Googleが提唱している検索アルゴリズムにおいては、スマホでサイトを閲覧した際の表示速度も評価指標の1つであるため、端末が読込みやすいよう必要最低限に止めておく必要があります。

    一方、十分に簡素化されたCSSであれば、サーバーからダウンロードして画面に構成するまでのページ処理速度は着実に向上します。ページスピード(ページの表示速度)の向上として検索エンジンの評価を上げる効果が期待できるため、SEOに与える影響は決して小さいものではないといえるでしょう。

    レンダリングに影響する

    レンダリングとは、表現、あるいは解釈といった意味を持つ英単語であり、プログラミング業界においてはCSS等のリソースを整形して、実際に画面へ反映させることを指しています。そして、ここで注意したいのが、外部ファイルの読込み位置やサイズが規定されていない要素を含んでいるために発生する「レンダリングブロック」という現象です。

    インターネットに接続している端末は、ユーザーがリンク等をクリック(リクエスト)すると、データローディングを開始して画面を描画、スクリプト実行という作業を高速で実行しています。ここでCSSが適切でないと、一連の流れを阻害するレンダリングブロックが発生するため、結果的にページの処理速度は低下、ユーザーエクスペリエンスのクオリティも落ちてしまうでしょう。

    以上のことから、CSSはSEOに大きな影響を与える要素であり、サイトのパフォーマンスを向上させるようなコーディングが重要となっています。

    Googleのガイドラインに沿ったコーディング方法

    ここからは、Googleガイドラインで提唱されているコーディング方法を4つのポイントに分けて見ていきましょう。是非参考にして下さい。

    CSSのスタイルルール

    ここでは、CSSのスタイルルールをご紹介します。

    • ID及びクラスの命名
    • CSSには意味のないIDや、見た目だけのクラス名だけでなく、検索エンジンのクローラーが判別しやすいように命名しましょう。

    • ID及びクラス名のスタイル
    • 最大限短縮されたスタイルで、クローラーが理解しやすい記述を心掛けて下さい。

    • タイプセレクタ
    • タイプセレクタ、あるいは子孫セレクタにはIDとクラス名を含めないようにコーディングしなければなりません。

    • ショートハンドプロパティ
    • ガイドラインに沿うだけでなく、行数を省くためにもプロパティを一括指定しましょう。

    • 「0」と単位
    • 値が0の場合は基本的に単位を省略して下さい。

    • 小数点数値「0」
    • 値が小数点のケースにおいても0を省略しましょう。

    • 16進法
    • 黒は#000、白であれば#fffといったように、コードが2つ続く際は16進数表記に基づいて3文字で記述して下さい。

    • プレフィックス
    • 大規模サイトにおいては、ID及びクラス名が重複してしまう可能性がありますが、基本的に末尾へハイフンを付けてプレフィックスを設定して下さい。

    • ID及びクラス名の区切り文字
    • ID及びクラス名が2つ以上の単語になる場合は、ハイフンで繋げるようにしましょう。

    • CSSハックは最後の手段に
    • CSSハックは最終的な手段として用いるようにして、なるべく別の表現方法を採用して下さい。

    CSSの書式ルール

    ここでは、CSSの書式ルールについてご紹介します。

    • プロパティ宣言の順序を守る
    • プロパティ宣言はアルファベット順に記述して、ベンダープレフィックスは考慮せず、接頭辞(プレフィックス)の順序を守るようにしましょう。

    • ブロック毎のインデント
    • ブロック毎にインデントして、階層を判断しやすくして下さい。

    • 宣言の終わりにセミコロン
    • 宣言はセミコロンを付けて終わるように記述しましょう。

    • プロパティ名の終わりに半角スペース
    • プロパティ末尾のコロンには半角スペースを入れて下さい。

    • セレクタ及び宣言を分離する
    • 宣言とセレクタは改行して分離するように記述します。

    • CSSルールを分離する
    • プロパティは1つずつ改行を入れましょう。

    • CSSには単一引用符を使う
    • プロパティ値、あるいは属性セレクタには単一引用符を使用して、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の適切な実装を心がけるようにしましょう。

    SEO対策について相談する

    瀧晃一

    記事の投稿者: 瀧晃一

    Appmartで営業を担当しています。 コンテンツマーケやSEOを通して、クライアントのお役に立てるよう励んでいます。 出勤前のサウナと出勤後のビールでアイデアを活性化させています。

    ↑