SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

HTMLマークアップとは?練習チェックに役立つ基本言語とHTML5マークアップ入門

HTMLマークアップを適切に行い、基本言語中心に練習チェックしながら、サイトパフォーマンスを向上させることが大切です。

今回は、HTMLマークアップの練習チェックに役立つ基本言語、HTML5マークアップ入門について、「HTMLマークアップをサイトのページに追加すると、構造化データを指定できます。」について中心に解説したいと思います。

HTMLマークアップとは?練習チェックに役立つ基本言語とHTML5マークアップ入門

HTMLマークアップとは?

HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。

HTMLマークアップは、Webページを構築するために必要な作業で、最新のHTML5を使うことが推奨されてます。

HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。

HTMLマークアップの練習チェックに役立つ基本言語

HTMLマークアップの練習チェックに役立つ基本言語は、Google HTML/CSS Style Guide」のガイドラインを参考にする方法があります。

このガイドラインは、Googleが公開したHTMLとCSSの書式とスタイルの規則を定義したもので、原文が英文となります。
なので、ここでは、翻訳した内容で定義されてるマークアップ項目を紹介したいと思います。

※参考:「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

一般的なスタイルルール

一般的なスタイルルールは、以下のようになります。

プロトコル

埋め込みリソースからプロトコル(http: https:)を省略し、マークアップ。

一般的な書式ルール

一般的な書式ルールは、以下のようになります。

インデント

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

大・小文字

alt属性以外の全てのコードは、小文字のみを使用してマークアップ。

文末のスペース

文末のスペースを削除してマークアップ。

一般的なメタルール

一般的なメタルールは、以下のようになります。

エンコーディング

UTF- 8(BOMなし)を使用してマークアップ。

コメント

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

アクションアイテム

コードにTODOをコメントとして記述する。
TODO:というキーワードをコメントに含める。

HTMLのスタイルルール

一般的なメタルールは、以下のようになります。

ドキュメントタイプ

HTML5を使用してマークアップ。
HTML5 (HTML構文)は、すべてのHTMLドキュメントに適してます。

HTMLのバリデート

パフォーマンス低下を除き、可能な限り有効なHTMLを使用してマークアップ。
The W3C Markup Validation Service」などの検証ツールを使用する。

セマンティックな記述

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

マルチメディアフォールバック

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

構造を分離

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

実体参照

実体参照を使用しないでマークアップ。
※HTMLで特殊な意味を持つ文字( < や & など)は例外です。

省略できるタグ

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

type属性

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

HTMLの書式ルール

HTMLの書式ルールは、以下のようになります。

一般的な書式

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

HTMLの引用符

属性値を引用する場合、二重引用符を使用してマークアップします。
属性値を囲む単一引用符( ” )よりも、 ( “”)二重を使用します。

CSSスタイルルール

CSSスタイルルールは、以下のようになります。

CSSのバリデート

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

IDとクラスの命名

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

IDとクラス名のスタイル

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

タイプセレクタ

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

速記プロパティ

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

0と単位

「 0 」の値の後に単位の指定を省略します。

小数点の先頭の「0」省略

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

16進法

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

接頭辞

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

IDとクラス名の区切り文字

ハイフンで、セレクタ内の単語や略語を連結する。

CSSハック

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

CSSスタイルルールは、以下のようになります。

宣言順

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

ブロックごとにインデント

階層反映と理解を向上させるため、すべてのブロックのコンテンツをインデント。

宣言停止

すべての宣言の後にセミコロンを使用します。

プロパティ名停止

プロパティ名のコロンの後にスペースを使用します。

宣言ブロックの分離

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

セレクタと宣言分離

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

ルールの分離

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

CSSの引用符

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

CSSメタルール

CSSメタルールは、以下のようになります。

セクションのコメント

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

HTML5マークアップ入門について

HTML5マークアップ入門については、「html5 入門」などで検索すると、初心者向けにいくつも有用な参考サイトが見つかります。
なので、実際に検索してみて、より上位に表示されてる良質なサイトを参考に、HTML5のマークアップについて学ぶことをお勧めします。

HTMLマークアップをサイトのページに追加すると、構造化データを指定できます

やり方としては、まずHTMLでマークアップして、そのあとに構造化データを追加でマークアップする形です。
構造化データをマークアップしたら、専用のツール(構造化データテストツール)でチェックして、そのマークアップ内容に問題がないか?を確認する流れです。

例えば、パンくずリストをHTMLマークアップしたあとに、構造化データの記述を追記します。
そして、構造化データ含めた記述内容が正しいかどうか?を「構造化データテストツール」でチェックして、エラーが無ければ正しくマークアップされてることになります。
そうすれば、検索エンジンにより認識されやすいパンくずリストとなるので、クローラビリティの向上によるSEO効果が期待できるようになります。

ちなみに、構造化データをマークアップする際に、「構造化データマークアップ支援ツール」を活用することもできます。
構造化データマークアップ支援ツールを使うには、Googleアカウントが必要です。

まとめ

HTMLマークアップを適切に行って、クローラーが認識しやすいページにしましょう。

ですが、ただクローラビリティを高めるだけでは、Googleに最大限評価されるわけではありません。

Googleに最大限評価されるためには、ユーザーの検索意図を考慮した良質なコンテンツに仕上げることが重要です。
そうした良質なコンテンツを増やして、専門性や権威性まで加味したより信頼できるサイトにすることが、SEO対策を進めるためのポイントとなります。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら