SEO内部対策の基本！ガイダンスに沿ったhtmlコーディング方法とは
Webサイトを構築するための「htmlコーディング」という作業は、SEO内部対策を行うためには少なからず必要な知識です。
このコーディングはタグの閉じ忘れや、無駄な改行などの多少間違った記述や無駄のあるコーディングでも表示できてしまいます。
しかし、これらを改善させることによってクローラーが正しくページの内容を読み取ることができ、その結果、インデックスが早くなるなどのクローラーの最適化が期待できます。
今回ご紹介する、Googleが推奨するコーディングのガイドラインに沿ったコーディングはそこまでSEO対策に大きな影響はありませんが、クローラーに伝わりやすいサイト構築を目指しましょう。
参考：Google HTML/CSS Style Guide
目次
一般的なスタイルのルール / 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以外にも画像やスクリプトの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で調整しましょう。
一般的なメタルール / 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
セマンティック
<!-- 非推奨 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推奨 --> <a href="recommendations/">All recommendations</a>
リンクはa要素、見出しはh要素のように、本来の目的に合った要素を使用しましょう。
マルチメディアの代替
<!-- 非推奨 --> <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属性を省略することができます。
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>
属性値を囲む場合は、シングルではなくダブルクォーテーションを使用しましょう。
ガイダンスに沿ったhtmlコーディング法まとめ
今回はhtmlのコーディング（記述）についてガイダンスをまとめましたが、意外と知らなかった内容もあるのではないでしょうか？
コーディングはコーダーの癖も出やすく、他人のコーディングは読みにくいものです。
このGoogleのガイダンスを元に社内で独自にコーディングルールをまとめたガイダンスを作っても良いかもしれません。
内部対策はクローラーの読みやすさを考慮して、コーディングを見直すことも重要です。
全てガイダンス通りにする必要はありませんが、クローラーに読みやすいコーディングを心がけましょう。
また、CSSに関してのガイドラインはこちらを参考にしてください。
GoogleのCSSガイダンスに沿ったコーディング方法について
