HTMLとSEOについてまとめました

by

Googleエンジンに最適なHTMLの記述方法についてまとめました。HTMLを適切に記述することで検索順位を上げましょう。

目次

HTMLとSEOの概要

HTMLについての詳細は下記リンク先でまとめています。

HTML

SEO対策についての概要は下記リンク先にまとめました。

SEO対策とは

Googleは、下記リンク先で検索エンジンに最適なHTMLとCSSの記述方法をまとめています。この記事は下記リンク先の情報を参考に作成しています。

Google HTML/CSS Style Guide

メタタグのルール

メタタグとは、HTMLで作成したページの内部情報を記述するタグです。Googleの検索結果に表示されるタイトルタグやメタディスクリプションタグの他にも存在するHTMLの記述ルールをまとめました。

UTF-8（BOMなし）を使用する

下記のコードを追加し、サイトにUTF-8を適用します。

<meta charset="utf-8">

コメントの記述

必要に応じて適切なコメントを追加します。

HTMLスタイルのルール

メタタグ以外のHTMLに関するルールをまとめました。

ドキュメントタイプ

2022年2月現在、GoogleはHTML5の使用を推奨しています。そのため、HTML5を使用しましょう。HTMLページに下記のコードを記述します。

<!DOCTYPE html>

改行タグ

改行のタグは以下のものを使用します。

<br>

下記のタグの使用は避けましょう。

<br />

適切なHTMLタグの使用

HTMLタグを適切に使用します。例えば以下の例では、「This is only a test.」の後ろに</article>を追加し、<title>タグの前に「<!DOCTYPE html>」、「<meta charset=”utf-8″>」を記述することが推奨されます。

非推奨例

<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

目的に応じてHTMLを適切に使用します。例えば段落には<p>タグを使い、見出しには<h1>~<h6>タグ、アンカーにはaタグを使います。

Altタグの使用

画像を挿入するHTMLタグにAltタグを追加して画像の説明を追加します。

使用例

 <img src = "dogs.png" alt = "犬の写真" >

エンティティ参照を避ける

エスケープ文字のことです。以下に推奨例と非推奨例を示しました。エンティティ参照を避け、”で囲って使いましょう。

推奨例

ユーロの貨幣記号は"€"です。

非推奨例

ユーロの貨幣記号は &ldquo;&eur;&rdquo; です。

タグの省略

HTML5では、一部のタグを省略して問題ありません。

推奨例

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

非推奨例

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

Type属性

スタイルシート（CSS）とスクリプト（JavaScript）の属性に関する記述を省略します。

CSSの非推奨例

<link rel="stylesheet" href="https://www.google.com/css/maia.css"
    type="text/css">

CSSの推奨例

<link rel="stylesheet" href="https://www.google.com/css/maia.css">

JavaScriptの非推奨例

<script src="https://www.google.com/js/gweb/analytics/autotrack.js"
    type="text/javascript"></script>

JavaScriptの推奨例

<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

idタグの使用

不要なid属性の使用を避けます。属性が厳密に必要な場合、値に常にハイフンを含め、JavaScript識別子の構文と一致しないようにします。

非推奨例

<div id="userProfile"></div>

推奨例

<div aria-describedby="user-profile">
  …
  <div id="user-profile"></div>
  …
</div>

HTMLのフォーマット

すべてのブロック、リスト、テーブル要素に改行を使用し、それらすべての子要素をインデントします。

使用例

<ul>
　<li>リスト1
  <li>リスト2
  <li>リスト3
</ ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

長い場合は折り返す

HTMLの一文が長い場合は、折り返します。使用例は以下です。

<md-progress-circular md-mode="indeterminate"
                      class="md-accent"
                      ng-show="ctrl.loading"
                      md-diameter="35">
</md-progress-circular>

引用符の使用方法

HTMLで引用をするときは”（ダブルクオーテーション）を使用します。’（シングルクオーテーション）の使用は避けましょう。

使用例

<a class = "maia-buttonmaia-button-secondary">サインイン</a>

まとめ

HTMLタグを適切に記述することでサイトをGoogleの検索エンジンに最適化させましょう。