Webサイト制作者必見!SEO対策に効果的なCSSの書き方 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!SEO対策に効果的なCSSの書き方

Webサイト制作者必見!SEO対策に効果的なCSSの書き方

Webサイトを制作経験がある方で「SEO対策」という言葉を聞いたことがない人はまずいないのではないでしょうか。

見込み客を得るために必要なのは、多くの人にサイトを見てもらう必要があります。そのためにはSEO対策は必須です。

そこで今回の記事では、SEO対策を行う上で効果的なCSSの書き方についてご紹介します。

1.cssを使ったSEO対策

cssを使ってWebサイト全体の構成を行うことが、直接SEO対策に繋がるメリットがあります。

主な要因は以下の2点です。

①コーディングが正しく記述されている

検索エンジンは、Webサイトの情報を収集、文書構造を解釈していきます。そして、その解釈にしたがって優先順位を付けていきます。

検索エンジンにとって解釈がしやすい文書構成、つまり正しいHTMLの記述は検索エンジンにとっても解釈しやすいということになります。

そのような解釈しやすいWebサイトの優先順位が高くなるので、cssのコーディング自体がSEO対策につながります。

②ページの表示に時間がかからない

検索エンジンの評価ポイントには、Webページがブラウザに表示されるときの時間の短さも含まれます。

cssの記述自体がSEOの順位に直接的な影響を与える訳ではありませんが、cssの書き方次第ではWebページの表示速度に影響を及ぼします。

今はスマホページの表示速度がページ評価の要素として優先されているため、スマホページの表示速度はSEOの評価の一端となっています。

表示速度の遅さはページの離脱率が上がる原因にもつながります。そのようなページはSEOの優先順位も下げられてしまうということです。ページ表示速度は気にするようにしましょう。

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

Googleのガイダンスには理想的なcssの書き方が書かれています。まずはガイダンスに沿ったcssを記述できるようになることをオススメします。

なぜならば、検索エンジンの王様はGoogleですので、そのGoogleが検索結果のどのあたりに表示するかをアルゴリズムによって決定しています。そのGoogleの判断基準に沿うのが賢明なのです。

cssの処理速度を速められるかどうかがポイントです。複雑になればなるほど、処理速度が遅くなったり、推奨されないcssになっていき、Googleからの評価も下がってしまいます。

ポイントをいくつか紹介します。

①URLのパスについて

httpやhttpsといった、プロトコルを省略して書きましょう。

非推奨の書き方:
.example {
background: url(https://www.example.com/images/id.jpg);
}


推奨の書き方:
.example {
background: url(//www.example.com/images/id.jpg);
}



②引用符について

引用符とは、シングルクォーテーション(’)、ダブルクォーテーション(”)のことを指しています。

非推奨の書き方:
@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;
}



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

タイプセレクタに続けてIDとクラス名を記述しないようにします。タイプセレクタとは、要素名で対象を指定してスタイルを適用する基本的なセレクタです。

非推奨の書き方:
ul#example {}
div.content {}


推奨例:
#example {}
.content {}

ulやdivなどのタイプセレクタにクラス名を付けて書いている場合は、書き方を見直してみましょう。


④16進法を短縮する

色指定コードが連続で2つ続く場合は、16進数表記の3文字に短縮して書くことができます。

非推奨の書き方:
color: #ffcc00;

推奨例:
color: #fc0;

まとめ

今回のコラムでは、SEO対策におけるcssのコーディングノウハウをご紹介しました。

cssのコーディングによって、Webサイトの表示速度にも影響を及ぼしますので、正しい構造になっているか、また表示速度のチェックは必ず行うようにしましょう。

そして、表示速度が遅いようでしたら、Googleのガイダンスに沿ってcssを修正することで表示速度の向上ができないかどうかを試してみてもよいでしょう。

SEO対策は今や多くのWebサイトが行っていることであり、この対策なしで多くの人に自社サイトを見てもらうことは難しくなってきています。cssは必ず見直して改善をかけていくことをオススメします。
ページ先頭へ