SEO内部対策の基本！ガイダンスに沿ったhtml/CSSのコーディング方法とは
Webサイトを構築するための「htmlコーディング」という作業は、SEO内部対策を行うためには少なからず必要な知識です。
このコーディングは、タグの閉じ忘れや、無駄な改行などの多少間違った記述や無駄のあるコーディングでも表示できてしまいます。
しかし、これらを改善させることによってクローラーが正しくページの内容を読み取ることができ、その結果、インデックスが早くなるなどのクローラーの最適化が期待できます。
今回ご紹介する、Googleが推奨するコーディングのガイドライン「Google HTML/CSS Style Guide」に沿ったコーディングはそこまでSEO対策に大きな影響はありませんが、クローラーに伝わりやすいサイト構築を目指しましょう。
目次
- 1 一般的なスタイルのルール / General Formatting Rules
- 2 一般的な書式設定のルール / General Formatting Rules
- 3 一般的なメタルール / General Meta Rules
- 4 HTMLスタイルルール / HTML Style Rules
- 5 HTMLの書式ルール / HTML Formatting Rules
- 6 CSSスタイルルール / CSS Style Rules
- 7 CSS書式ルール / CSS Formatting Rules
- 8 CSSメタルール / CSS Meta Rules
- 9 ガイダンスに沿ったhtml/CSSコーディング法まとめ
Googleのhtmlガイダンスに沿ったコーディング方法について
一般的なスタイルのルール / General Formatting Rules
プロトコルの省略
<!-- 非推奨 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- 推奨 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
urlの指定から「http:」と「https:」のプロトコルを省略します。
プロトコルを省略することによって、httpでページを閲覧していればhttpで表示され、httpsならhttpsとなります。
画像やスクリプトのurlからもプロトコルを省略することが推奨されています。
htmlだけではなく、cssにも背景画像などのurl指定があれば省略します。
一般的な書式設定のルール / General Formatting Rules
インデント
<ul> <li>Fantastic <li>Great </ul>
インデントを使用する場合はタブは使用しません。
半角スペースを2つ使ってインデントする事が推奨されています。
大文字/小文字
<!-- 非推奨 --> <A HREF="/">Home</A> <!-- 推奨 --> <img src="google.png" alt="Google">
タグには小文字を使用することを推奨しています。
cssに使用するセレクタやプロパティにも小文字を使用します。
文末のスペース
<!-- 非推奨 --> <p>What?_ <!-- 推奨 --> <p>Yes please.
文末のスペースは削除しましょう。
スペースでマージンを調整するのではなく、cssで調整しましょう。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
一般的なメタルール / General Meta Rules
エンコード
<meta charset="utf-8">
エンコードは「UTF-8（BOM無し）」を指定します。
DreamWeaverではデフォルトでBOM無しに設定されています。
コメント
必要に応じてコードを説明するコメントを記述します。（省略可）
コメントは以下のように記載します。
<!-- コメントが入ります -->
アクションアイテム
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
コードに「TODO（ユーザー名など）:内容」をコメントとして記述します。
HTMLスタイルルール / HTML Style Rules
ドキュメントタイプ
<!DOCTYPE html>
GoogleはHTML5で記述することを推奨しています。
HTMLバリデート
バリデートとは、検証することを意味します。
<!-- 非推奨 --> <title>Test</title> <article>This is only a test. <!-- 推奨 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
可能な限り正確なhtmlで記述し、W3C HTML validatorで仕様に準拠しているかどうかテストする事ができます。
セマンティック
意味を持たせるといった意味で使われる「セマンティック」ですが、htmlの場合はタグを正しく使い分けているかという事を表します。
リンクはa要素、見出しはh要素のように、本来の目的に合った要素を使用しましょう。
<!-- 非推奨 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推奨 --> <a href="recommendations/">All recommendations</a>
マルチメディアの代替
<!-- 非推奨 --> <img src="spreadsheet.png"> <!-- 推奨 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
画像や動画などのマルチメディア要素には、内容を伝えるために必ず代替テキスト（alt）を記述します。
構成要素の分離
<!-- 非推奨 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css" media="screen"> <link rel="stylesheet" href="grid.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center> <!-- 推奨 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!
文書構造（html）と、見た目（css）と動き（スクリプト）は分けて構築します。
htmlに直接装飾することはなるべく避け、cssファイルもひとつにまとめます。
実体参照
<!-- 非推奨 --> The currency symbol for the Euro is “€”. <!-- 推奨 --> The currency symbol for the Euro is “€”.
UTF-8を使用していれば、必要のない特殊文字のような実体参照を使用する必要はありません。
ただし、「<」や、「&」などの例外があります。
オプションタグ
<!-- 非推奨 -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- 推奨 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
HTML5ではファイルサイズなどの目的で、任意のタグを省略することができますが、今まで必須のタグなども省略できることから、一旦保留で良いでしょう。
下記サイトに省略できるタグが定義されています。
→HTML5 specification
タイプ属性
<!-- 非推奨 --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推奨 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- 非推奨 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推奨 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML5では、通常のcssとJavaScriptの場合、ファイルを指定する際のtype属性を省略することができます。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
HTMLの書式ルール / HTML Formatting Rules
全体的な書式
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
ブロック要素、リスト要素、テーブル要素は、それぞれ改行して記述して、そこに入る子要素に関してはインデントを入れて記述します。
ただし、リストの改行によって不要なスペースが生じた場合は1行にしても構いません。
先ほども説明した通り半角スペース2つでインデントしましょう。
HTMLの引用符
<!-- 非推奨 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推奨 --> <a class="maia-button maia-button-secondary">Sign in</a>
属性値を囲む場合は、シングルではなくダブルクォーテーションを使用しましょう。
GoogleのCSSガイダンスに沿ったコーディング方法について
コーディングされている方なら当然CSSのコーディング知識も必要となります。
そして、このCSSの記述方法もコーダーによって書き方が異なり、ひと昔前はブラウザによって崩れたりなど対応に追われましたが、現在は多少の間違いや無駄の多い書き方をしていても、概ねブラウザで表示できてしまいます。
しかし、大規模なサイトや更新性の高いサイトを管理していく上で、CSSを無駄なくわかりやすく保つことはサイトの運営上、非常に重要です。
書き方によってはページの読み込み速度にも関係することから、直帰率などにも影響してきます。
このことから、ぜひ内部対策とともに知っておきたい知識のひとつです。
CSSスタイルルール / CSS Style Rules
CSSバリデート
できる限り正確なCSSで記述しましょう。
そして、htmlと同じようにチェックツール「W3C CSS Validator」が用意されていますので、適宜検証します。
IDとクラスの命名
/* 非推奨 意味のないID名 */
#yee-1901 {}
/* 非推奨 見た目だけのクラス名 */
.button-green {}
.clear {}
/* 推奨 内容を表すクラス名 */
#gallery {}
#login {}
.video {}
/* 推奨 意味のあるクラス名 */
.aux {}
.alt {}
見た目だけなどの意味の持たない名前にするのではなく、クローラーが見ても内容がわかるようなIDとクラス名を付けます。
IDとクラス名のスタイル
/* 非推奨 */
#navigation {}
.atr {}
/* 推奨 */
#nav {}
.author {}
IDとクラス名は意味のわかる範囲で、できる限り短く設定します。
タイプセレクタ
/* 非推奨 */
ul#example {}
div.error {}
/* 推奨 */
#example {}
.error {}
タイプセレクタにIDとクラス名を記述しないようにします。
子孫セレクタもできれば避ける。
ショートハンドプロパティ
/* 非推奨 */ 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; /* 推奨 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
できる限りプロパティを一括で指定しましょう。
行数も省けて管理もしやすくなります。
「0」と単位
/* 非推奨 */ margin: 0px; padding: 0px; /* 推奨 */ margin: 0; padding: 0;
値が0の場合は単位を省略することができます。
小数点数値「0」
/* 非推奨 */ font-size: 0.8em; /* 推奨 */ font-size: .8em;
値が少数点の場合、「0」を省略することができます。
16進法
/* 非推奨 */ color: #eebbcc; /* 推奨 */ color: #ebc;
例のように2つ続きの場合は16進数表記の3文字で記述することができます。
例えば、白なら#fff、黒なら#000となります。
プレフィックス（接頭辞）
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
IDとクラス名が重複する恐れのある大規模なサイトの場合、後ろにハイフンを付けて接頭辞を設定します。
IDやクラス名の区切り文字
/* 非推奨 単語が繋がっている */
.demoimage {}
/* 非推奨 アンダーバーで繋げている */
.error_status {}
/* 推奨 */
#video-id {}
.ads-sample {}
IDやクラス名に2つ以上の単語を指定する際はハイフンで繋げます。
CSSハック
CSSのハックを使う場合は、まず他の方法で表現できないか試してみましょう。
便利ですが、最後の手段として考えます。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
CSS書式ルール / CSS Formatting Rules
プロパティの宣言の順序
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
プロパティの宣言順序は、アルファベット順に記述します。
また、ベンダープレフィックスは無視し、接頭辞の順序を守って記述しましょう。
ブロック単位のインデント
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
階層がわかりやすいように、ブロックごとにインデントして記述します。
宣言の終わり
/* 非推奨 */
.test {
display: block;
height: 100px
}
/* 推奨 */
.test {
display: block;
height: 100px;
}
宣言の最後には必ず「セミコロン（;）」を付けましょう。
プロパティ名の終わり
/* 非推奨 */
h3 {
font-weight:bold;
}
/* 推奨 */
h3 {
font-weight: bold;
}
プロパティの後に付くコロンの後ろには半角スペースを入れます。
セレクタと宣言の分離
/* 非推奨 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
別々のセレクタと宣言はそれぞれ改行して記述します。
CSSルールの分離
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
プロパティごとに改行を入れて記述します。
CSS引用符
/* 非推奨 */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推奨 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
属性セレクタや、プロパティ値には単一引用符を使用します。
また、URLには引用符は使用しません。
CSSメタルール / CSS Meta Rules
セクションのコメント
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
もし可能なら、CSSの各セクションの分かれ目に改行して用途などのコメントを入力します。
ガイダンスに沿ったhtml/CSSコーディング法まとめ
今回はhtmlのコーディング（記述）についてガイダンスをまとめましたが、意外と知らなかった内容もあるのではないでしょうか？
また、cssのコーディングに関しては、あいまいに記憶している部分や、昔からの癖などもコーダーによってはけっこうあるかと思います。
コーディングはコーダーの癖も出やすく、他人のコーディングは読みにくいものです。
このGoogleのガイダンスを元に社内で独自にコーディングルールをまとめたガイダンスを作っても良いかもしれません。
内部対策はクローラーの読みやすさを考慮して、コーディングを見直すことも重要です。
全てガイダンス通りにする必要はありませんが、クローラーに読みやすいコーディングを心がけましょう。
一度、ガイダンスに目を通してサイトを複数で管理しても、一貫性のあるコーディングができるようにしておくことが重要です。
