CSSは、ウェブサイトを装飾するために使われるプログラミング言語ですが、書き方によってはGoogleからマイナスの評価を受けることがあります。Googleの検索エンジンに正しく評価してもらうためにもSEOを意識したCSSを書きましょう。
目次
CSSとSEOの概要
CSSについての詳細は下記リンク先で詳しく説明しています。
SEOについての詳細は下記リンク先を確認してください。Googleの検索エンジンに最適化させることをSEOといいます。
CSSの書き方がSEOに影響を及ぼすのは、ページの読み込み速度が変わるためです。ページの読み込み速度が遅いと、SEO上マイナスになることがあります。
Googleの検索エンジンとCSS
SEOを意識したCSSは、下記リンク先の資料をもとに記述します。
URLのパス
Googleは、httpやhttpsのプロトコルを省略して記述することを推奨しています。もともとSSL化されていないサイトでhttpを記述してしまっていると、あとでSSL化した時にSSL化が適用されません。
このURLの記述方法は、HTMLファイルの<head>タグ内の記述についても同様に推奨されています。
以下に推奨例を示しました。
推奨例
.example {
background: url(//www.google.com/images.jpg);
}非推奨例
.example {
background: url(https://www.google.com/images.jpg);
}効率的なコードの記述
可能な限りCSSのコードは省略して記述します。
推奨例
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;非推奨例
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;https://google.github.io/styleguide/htmlcssguide.html#Shorthand_Properties
0の記述
数値の0の記述について解説します。
不要な0
1.00など、不要な0は省略して記載します。1.00であれば0を省略して1を記述します。
必要な0
0.8など、少数を表現するために必要な0は必ず記載します。
16進表記について
可能な限り、3文字の16進表記を使用します。
推奨例
color: #ebc;非推奨例
color: #eebbcc;!importantについて
!importantの詳細は下記リンク先でまとめています。
Googleは!importantの使用を避けることを推奨しています。
宣言をアルファベット順に並べる
覚えやすく、管理しやすくするために、宣言をアルファベット順に並べましょう。
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;まとめ
Googleが推奨する形式でCSSを記述し、サイトをGoogleの検索エンジンに最適化させましょう。