CSSがSEOに影響しそうな要素

2017年8月30日

CSS(カスケーディング・スタイル・シート)は、Cascading Style Sheetsの頭文字を取った言葉で、htmlのスタイルを指示する言語です。ここではCSSとSEOに関連する情報をまとめます。基本的にはCSS自体の記述がランキングに影響を与えるといった事はありません。




CSSの3パターンの記述例

CSS外部ファイル参照の例

ページ共通のCSSは外部ファイルとして参照する場合が多い。
一般的には<head>内に以下のように記述する。

<link rel=”stylesheet” href=”/example/example.css” type=”text/css” media=”all”>

小さなサイズのCSSであればインライン化する方が表示速度が改善されます。
また、ファーストビューの表示に必要なCSSはインライン化し、それ以外は後で読み込むように工夫する事で表示速度の改善につながります。


CSSインライン化の例

<style type=”text/css”> p {color: red} h2 {color: blue; font-size: 120%} </style>

大きなサイズのCSSをインライン化すると表示速度に影響がでます。


body内CSS直書きの例

例えば<body>内でCSSで直接装飾

<p style=”font-weight:bold;color:#1E9A5C”>

GoogleのPage Speed Insightsの解説ではコードの不要な重複につながる場合があるためこのような記述は避けた方が良いとの事です。
CSS の配信を最適化する」の「CSS 属性をインライン化しない」参照。




CSSの記述とSEO

Googlebotのインデックスシステムは昔は100kbぐらいまでしか取得できず、それを超えるとインデックスされませんでした。
CSSの直書やHTMLのソースが長くなってしまう事でクロールを途中でやめてしまう事もあったようですが、現在は処理能力も上がった為、SEOとの関連性は薄くなりました。


Googleが処理できるCSSサイズ

GoogleのJohn Mueller氏のコメントでは、数十MB以下であればCSSのサイズが問題になる事はないようです。


現在のCSSで注意すべき点は以下の2つです。


robots.txtでCSSなどのファイルをブロックしない

CSSファイルやJSファイルをrobots.txtでブロックしてしまうと、クローラーが正しくコンテンツをレンダリングできず内容を判別できないケースがあるようです。


ページ表示速度はGoogleの順位指標の一つ

CSSと検索順位に関して関連性があるとすると、ページの読み込みスピードがあります。
ページの読み込みスピードの点では、cssを軽量化したり、@importは使わないといった事で改善される場合があります。
cssの@importについては、「CSS @import を使用しない」の記事をご参照ください。


ページの表示速度改善については、「ウェブサイトのページ読込・表示速度の高速化はECサイトのSEOに重要」で解説しています。



このエントリーをはてなブックマークに追加


野澤洋介

この記事を書いた人

アレグロマーケティング代表取締役 野澤洋介

SEOは考え方はシンプルですが、いざ実践するとなかなか思うようにいきません。
当ブログでは、読者の方に成功も失敗も合わせて情報を共有し、同じような悩みを解決できればという思いで運営しています。


著書:「最強の効果を生みだす 新しいSEOの教科書」(技術評論社)

follow us in feedly


関連記事


SEO管理ツール Spresseo(エスプレッセオ)

コンテンツが増えてきたらランキングの管理をツールで効率化しましょう。
ページごとの内部最適化や、キーワードの順位取得や競合比較、獲得した被リンクのレポートを自動化できます。



▲ ページトップ ▲
自動XMLサイトマップ管理ツールトライアル版配布中