Google HTML/CSS Style Guideを読んだ

Google HTML/CSS Style Guideを読んだ。

Google HTML/CSS Style Guide

 

前にSEO対策の一環としてより良いコンテンツを作ることが挙げられるということをまとめた。

 

今回読んだのはGoogle HTML/CSS Style Guide。

Style Guide、つまりHTML/CSSを書いていく際にSEO対策として有効なスタイルは何かということが書かれてある。

 

たくさんのTipsが書かれてあるがそれのメモ書き。

 

 

埋め込みリソースにはhttpsプロトコルを使う。
ex) <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" > </ script>

一度に2回だけインデント
<ul>

  <li> Fantastic
  <li> Great
</ ul>


全てのコードは小文字。
末尾の空白は削除。

ヘッダーのエンコーディングには
<meta charset="utf-8">

必要に応じてコメントも書くと良い。

HTML5であるという宣言を忘れない。
<!DOCTYPE html>

セマンティックHTMLを用いる。

メディア(画像、動画、アニメーション)を埋め込むときaltを用いる。
<! - Recommended - > <img src = "spreadsheet.png" alt = "スプレッドシートスクリーンショット。>

省略可能なタグは省略する。

type属性は今は必要ない。
<! - おすすめしません - > <link rel = "stylesheet" href = "https://www.google.com/css/maia.css" type = "text / css" >
<! - Recommended - > <link rel = "stylesheet" href = "https://www.google.com/css/maia.css" >


属性値を決めるときは必ずダブルクォーテーション
<! -推奨- > <a クラス= "maia-button maia-button-secondary"> ログインする</a>

IDとクラスの名前は意味があったり一般的なものを使用する。そして、その名前は必要最低限の長さで意味を伝えられるもの。
コードに関しても必要な情報を短く書く。

0の単位は必要な場合を除き、書かない。

16進数は可能であれば3文字で。

idとクラス名の単語はハイフンで区切る。

cssはアルファベット順に宣言する。

cssのブロックコンテンツはインデントして記述する。

全ての宣言の後にセミコロンを使用する。
test {
display: block;
height: 100px; }

propertyとvalueの間のコロン後にスペースを入れる。
h3 { font-weight: bold; }

selectorとcurly braces の間にスペースを入れる
#video { margin-top: 1em; }

selectorと宣言は別々の行に記述
h1,
h2,
h3 {
font-weight: bold;
line-height: 1.2;
}

塊と塊の間は2行間隔
html {
background: #fff;
}

body {
margin: auto;
width: 50%;
}

CSSではシングルクォーテーション、urlには何もいらない
@import url(https://www.google.com/css/maia.css);

html
{

font
-family: 'open sans', arial, sans-serif;
}

コメントを用いてわかりやすく
/* Header */

#adw-header {}

 

 

まとめ

とにかくわかりやすくということが挙げられる。

コメントも書くことが推奨されていたり、クラス名も何かがわかりやすく書かれてあるほうがいい、_(アンダーバー)ではなく、ー(ハイフン)のほうがいいという内容もあったのでGoogleクローラーはそんなところまで見ているのかという印象だった。

 

ここまでを完璧にやろうとするとCSS設計のBEMはちょっと工夫しなければならない。

なぜならクラス名に_を使うこともあるから。

 

何が正解かはわからないSEOの世界ではやはりそれを管理しているGoogleのいうことを聞いておくに越したことはないだろう。