HOMEその他 > SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート開示中!
NEW! 【無料SEOツール】URL評価チェックツール公開中!
その他
SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート開示中!
2016/01/07その他[最終更新日]:2016/01/07
このエントリーをはてなブックマークに追加

Googleの基準に習い正しくマークアップし、より優れたソースコードを目指しながら、 サイトパフォーマンスを向上させることが大切です。

今回は、SEOで抑えるべきHTMLマークアップ法10項目をレポートにまとめました。

SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート開示中!

SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート無料ダウンロードはこちら⇒

PR
目次

SEOで抑えるべきHTMLマークアップ法10項目レポート概要
Googleが推奨するHTMLマークアップ
まとめ

SEOで抑えるべきHTMLマークアップ法10項目レポート概要

目次
1. HTMLとは
2. タイトルタグ
3. 見出しタグ
4. metaタグ
5. ナビゲーションをわかりやすくする
6. 適切なアンカーテキストを記述
7. 画像のalt属性を記述する
8. リンクにnofollow属性を活用
9. 重要なコンテンツを上に記述したほうが良いのか?
10. SEOキーワードを先方に記述したほうが良いのか?

SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート無料ダウンロードはこちら⇒

Googleが推奨するHTMLマークアップ

Googleが推奨するHTMLマークアップ法には大きく2つあります。

・Google HTML/CSS Style Guide を参考にする
・構造化データを使用する

今回は、Google HTML/CSS Style Guide について紹介したいと思います。

Google HTML/CSS Style Guide は、Googleが公開した、HTMLとCSSの書式とスタイルの規則を定義したものです。
※参考:Google ウェブマスター向け公式ブログ: HTML と CSS のコーディングガイドライン

このガイドラインでは以下の項目が定義されてます。(※Google HTML/CSS Style Guide 翻訳)

一般的なスタイルルール

プロトコル
埋め込みリソースからプロトコル(http: https:)を省略します。

<!– 推奨しない –>
<script src=”http://www.google.com/js/gweb/analytics/autotrack.js”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>
/* 推奨しない */
.example {
  background: url(http://www.google.com/images/example);
}

/* 推奨 */
.example {
  background: url(//www.google.com/images/example);
}
一般的な書式ルール

インデント
一度に2スペースでインデント。タブを使用したり、インデントにタブとスペースを混在させないでください。

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

.example {
  color: blue;
}

大・小文字
alt属性以外の全てのコードは、小文字のみを使用してください。

<!– 推奨しない –>
<A HREF=”/”>Home</A>

<!– 推奨 –>
<img src=”google.png” alt=”Google”>
/* 推奨しない */
color: #E5E5E5;

/* 推奨 */
color: #e5e5e5;

文末のスペース
文末のスペースを削除します。

<!– 推奨しない –>
<p>What?_

<!– 推奨 –>
<p>Yes please.
一般的なメタルール

エンコーディング
UTF- 8(BOMなし)を使用します。

<meta charset=”utf-8″>

コメント
必要に応じてコメントを記述しておくと便利です。
※コメントを追記することで、何のコードかわかりやすい

アクションアイテム
コードにTODOをコメントとして記述する。
TODO:というキーワードをコメントに含める。

{# TODO(john.doe): revisit centering #}
<center>Test</center>

<!– TODO: remove optional tags –>
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>
HTMLのスタイルルール

ドキュメントタイプ
HTML5を使用してください。
HTML5 (HTML構文)は、すべてのHTMLドキュメントに適してます

<!DOCTYPE html>

HTMLのバリデート
パフォーマンス低下を除き、可能な限り有効なHTMLを使用してください。
W3C HTML validator」などの検証ツールを使用する。

<!– 推奨しない –>
<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>

セマンティックな記述
見出しならhタグ、段落ならpタグ、アンカーならaタグなど、目的に合わせたHTMLタグを記述する

<!– 推奨しない –>
<div onclick=”goToRecommendations();”>All recommendations</div>

<!– 推奨 –>
<a href=”recommendations/”>All recommendations</a>

マルチメディアフォールバック
マルチメディアのための代替コンテンツを提供します。
画像に代替テキスト(alt属性)を記述する
アクセシビリティ向上のため、画像・動画・オーディオコンテンツ等には、代替コンテンツを提供する

<!– 推奨しない –>
<img src=”spreadsheet.png”>

<!– 推奨 –>
<img src=”spreadsheet.png” alt=”Spreadsheet screenshot.”>

構造を分離
文章構造(マークアップ)、スタイリング(スタイルシート)、動作(スクリプト)は分離して記述する
スタイルシートとスクリプトを最小限にする
スタイルシートやスクリプトを更新するよりも、 HTML文書とテンプレートを変更する

<!– 推奨しない –>
<!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で特殊な意味を持つ文字( < や & など)は例外です。

<!– 推奨しない –>
The currency symbol for the Euro is “&eur;”.

<!– 推奨 –>
The currency symbol for the Euro is “€”.

省略できるタグ
ファイルサイズの最適化のため、任意のタグを省略することを検討してください。
HTML5 specification で省略できるタグが定義されてます。

<!– 推奨しない –>
<!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.

type属性
スタイルシート(css)とスクリプト(javascript)のtype属性を省略できます。
HTML5は、type属性の指定必要なし。古いブラウザでも行うことが可能です。

<!– 推奨しない –>
<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>
HTMLの書式ルール

一般的な書式
すべてのブロック、リスト、またはテーブル要素の新しい行を使用して、すべてのそのような子要素をインデントします。

<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>

HTMLの引用符
属性値を引用する場合、二重引用符を使用します。
属性値を囲む単一引用符( ” )よりも、 ( “”)二重を使用します

<!– 推奨しない –>
<a class=’maia-button maia-button-secondary’>Sign in</a>

<!– 推奨 –>
<a class=”maia-button maia-button-secondary”>Sign in</a>
CSSスタイルルール

CSSのバリデート
CSS検証のバグに対処するか、独自の構文を必要としない限り、有効なCSSを使用してください。

IDとクラスの命名
意味のある、または一般的なID名とクラス名を使用してください。

/* 推奨しない:無意味 */
#yee-1901 {}

/* 推奨しない:見た目を表した名前 */
.button-green {}
.clear {}

/* 推奨:固有の名前 */
#gallery {}
#login {}
.video {}

/* 推奨:一般的な名前 */
.aux {}
.alt {}

IDとクラス名のスタイル
できるだけ短く、意味のあるIDとクラス名を使用する

/* 推奨しない */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}

タイプセレクタ
パフォーマンス向上のため、必要な場合を除き、タイプセレクタの使用は避けてください。
※参考:Simplifying CSS Selectors | High Performance Web Sites

/* 推奨しない */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}

速記プロパティ
可能な限り短縮形のプロパティを使用してください。
短縮形のプロパティを使用すると、コードの効率性と理解するのに便利です。

/* 推奨しない */
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と単位
「 0 」の値の後に単位の指定を省略します。

margin: 0; padding: 0;

小数点の先頭の「0」省略
小数点の値は先頭の “0”を省略します。

font-size: .8em;

16進法
可能な場合は3文字の16進表記を使用してください。
※カラー値では、 3文字の16進表記が短く、より簡潔です。

/* 推奨しない */
color: #eebbcc;

/* 推奨 */
color: #ebc;

接頭辞
IDやクラス名には固有の接頭辞を付ける。(オプション)
大規模なプロジェクトの場合や、外部サイトに埋め込まれるコードを開発する場合など、IDとクラス名が重複しないように接頭辞(名前空間など)付ける。
接頭辞は後ろにハイフンを付けて繋げる。
※名前空間を使用すると、名前の衝突を防止するのに役立ちます。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

IDとクラス名の区切り文字
ハイフンで、セレクタ内の単語や略語を連結する

/* 推奨しない:”demo”と”image”がそのまま連結してる */
.demoimage {}

/* 推奨しない:アンダースコアーで連結してる */
.error_status {}

/* 推奨 */
#video-id {}
.ads-sample {}

CSSハック
CSSハックを使う前に別の方法を試してみること。
CSSハックは、簡単で魅力的な方法だが、コード全体の品質を落とすことにもなるので「最後の手段」として考えること。

CSSの書式設定ルール

宣言順
一貫性のあるコードを達成するために、アルファベット順に宣言を入れてください。
※特定のCSSプロパティのために複数のベンダー固有の接頭辞は(例えば、 -moz接頭辞が-webkitの前に来る)ソートを保つ必要があります。

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;
}

宣言ブロックの分離
最後のセレクタと宣言ブロックの間にスペースを使用します。
最後のセレクタと宣言ブロックを開始する左括弧の間にシングル・スペースを使用しています。

/* 推奨しない:スペースが不足してる */
#video{
  margin-top: 1em;
}

/* 推奨しない:不要な改行がある */
#video
{
  margin-top: 1em;
}

/* 推奨 */
#video {
  margin-top: 1em;
}

セレクタと宣言分離
別々のセレクタと宣言は改行して記述。

/* 推奨しない */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推奨 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

ルールの分離
必ずルール間に空白行(一行間)を置きます。

html {
  background: #fff;
}

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

CSSの引用符
属性セレクタとプロパティ値を必要に応じ単一引用符を使用します。
URIの値には引用符を使用しないでください。

/* 推奨しない */
@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;
}
CSSメタルール

セクションのコメント
セクションごとにコメント使用することが可能です。

/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}

参考:
Googleが推薦するHTMLとCSSのコーディング方法 | 簡単ホームページ作成支援-Detaramehp
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート無料ダウンロードはこちら⇒

まとめ

上記のよう、正確で、わかりやすく、読みやすいコードはGoogleに好かれます。

Googleが推奨するマークアップ法を参考に、正しいコードを記述しながら、クローラービリティを高めましょう。

クロールされやすいサイトにし、ファイル、サーバーを最適化しながら、順位上昇を目指すことが重要です。

SEOで抑えるべきHTMLマークアップ法10項目 SEOレポート無料ダウンロードはこちら⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *
このエントリーをはてなブックマークに追加
最新記事
この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。
この記事が役に立つと思ったら、ぜひ『いいね!』して下さい。