SEOを意識したHTMLの最適化の方法

SEOを意識したHTMLのイラスト

SEOでは、検索エンジンとHTTPプロトコルでHTMLファイルをやり取りするため、HTMLの最適化を行うことが重要ですが、HTMLの最適化は、まくまでそのコンテンツを100%正しく検索エンジンに伝えるための手法であり、それを150%大きく見せようとするとそれはスパムと見なされます。

その為、コンテンツの内容を正しく適切に検索エンジンへ伝えるためのHTMLのマークアップが必要になります。

今回は、SEOを意識したHTMLの最適化の方法についてご紹介します。

HTMLのキーワード密度

検索エンジンはHTMLファイルを解析する際に、キーワード密度を1つの指標としています。

キーワード密度とは、そのコンテンツ中のキーワード種類に対して、繰り返し利用されているキーワードごとの出現頻度を示し、そのコンテンツのキーワードが複数回出現する傾向にあるページがいいページだ、と検索エンジンが評価しますが、コンテンツサイズ(情報量)が大きくなるにつれて、このキーワード密度が薄まってしまいます。

キーワード密度は、キーワード+形態素解析によって分解された総ワード数で計算され、かつてはキーワード出現率は何%が最も適正かという議論で5%、7%など諸説ありましたが、現在のところキーワード出現率が検索エンジンの評価に及ぼす影響は小さく、具体的な基準を意識する必要は無いという考え方が主流になってる為、今はさほど重要ではありません。

HTMLの最適化の3つのポイント

HTMLの最適化を行うにあたっては、以下が3つの考慮すべきポイントになります。

HTMLの最適化のポイント
  • ファイルのサイズは軽く、シンプルにする
  • キーワードなどの重要な要素はファイル上部へ記述する
  • 動的プログラムのレスポンスを速くする

これらについて、以下でもう少し具体的に説明していきます。

ファイルのサイズは軽く、シンプルにする

以下の点は情報量の削減ではなく、ファイルサイズの軽減に効果的です。

ファイルサイズの軽減と目安
  • HTML+CSSを積極的に利用する
  • 広告枠などはJavaScriptで外部ファイル化する
  • 30KB以内に取まると理想、大きくても50KB以内を目指す

システム的には、ファイルサイズを減らすことはサーバー負荷やネットワーク負荷の軽減を図れるので、積極的に軽減に努めましょう。

キーワードなどの重要な要素はファイル上部へ記述する

重要な要素になるキーワードは、ファイル上部へ記述することの理由は単純で、検索エンジンはHTMLファイルを上部から解析し、早く出現したキーワードの方がより重要だと判断する為です。

これをHTMLでコーディングすると、以下の順帯でHTML上にグローバルナビ、左カラム、右カラムの順でになり、右カラムに重要なキーワードや情報がある場合は、CSSのfloat属性を利用して、記述順は左カラムと右カラムを逆にしながら、デザインは見た目通りにすることも可能で、これもSEOには効果的です。

HTMLのコーディングの一例

また、上部だけにキーワードを詰め込まず、下部の方にもキーワードが出現するようにすると好評価につながります。

キーワードはHTMLのコメントタグにいくら埋め込んでも評価されず、逆にスバム行為と見なされる可能性があるので、コメントタグにキーワードを入れることは避けるようにしましょう。

また、画像のalt属性にキーワードを正しく設定することは、密度の上昇というよりは画像検索の対策になるので、積極的に利用するようにするといい結果につながります。

動的プログラムのレスポンスを速くする

動的プログラムのレスポンスを速くするベージをリクエストして10秒かかるサイトと1秒かからず表示されるサイトでは、どちらがユーザーにとって有益なのか明白で、検索エンジンにとっても、よりたくさんのクローリングを行いたい場合にレスポンスの遅いサイトは彼らの活動を阻害する要因となるので、レスポンスの速さも評価の基準となります。

とにかく動的レスポンスの速いサイトを作ることが最善です。

head要素の適正化

HTMLは、大きくhead要素とbody要素から成りますが、head要素にはその文書情報を表現する性質上、検素エンジンはhead要素の中身を重要視します。

ただ、SEOを行う際1ページには必ず1キーワードを設定し、そのキーワードをhead要素内で表現する要素はtitle、meta description、meta keywordの3つと、クロール制御用のmeta robotsで、head要素内に記述する要素の順番にも注意する必要があります。

head要素の理想的な順番

理想的なHTMLの順番は以下のようになります。

1.文字コード

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

のように、そのコンテンツの文字コードを指定します。

日本語を利用する場合は、文字化けを起こさないためにこれを最上部へ記述し、これはSEO対策ではなく、あくまで文字化け対策のためです。

2.title

title要素は、そのコンテンツのタィトルとして機能し、タイトルは最も重要な情報なので、コンテンツを表す情報として最上部へ配置します。

3.meta description

meta descriptionは、そのコンテンツのサマリーとして機能します。

そのため、title要素の次に記述します。

4.meta keywords

meta keywordsは、そのコンテンツを表す要素として機能し、これはキーワードを表現するhead要素内の情報としては最後になりますが、その他の要素よりはSEO的な要素であるため、この位置に配備します。

5.その他meta

その他、meta情報を記述します。

6.script、css

最後に、JavaScriptタグやCSSファイルのリンク先を記述しておきます。

<script type=”text/javascript” src=”/…/”></script>
<link rel=”stylesheet” type=”text/css” href=”/…/”>

title

HTMLとは文書です。

その為、文書のタイトルがtitle要素に相当し、そのベージの最も重要なキーワードが入る要素となります。

この要素の情報は、そのサイト内で重複しないようにしてキーワードは1語で、多くても3語まで含めます。

★などの記号、シンボルマークや疑問符などを使うことはSEO上は意味がないので使用しないようにし、前にある方がより重要であると判断される為語順には気を付けましょう。

title要素は、検索結果画面の一番目立つ部分になるので、社名やサービス名などを表記することもCTRを上げる点では有効に働き、有名なサイトであればサイト名自体をtitle要素に入れることで、この結果ページを見たユーザーに安心感を与えCTRを上げる効果も得られます。

meta description

meta descriptionは、そのコンテンツのサマリーとして機能し<<meta name=”description” content=”・・・・”>というフォーマットで記述します。

100文字〜多くても160文字までを目標にして、かつキーワードを使ってそのベージの内容を表す文章を作成し、サマリーはキーワードの前後を取得するので、キーワードは文章の真ん中くらいに位置させるようにすると、検素結果画面上にきれいに表示されるようになり、検索結果画面に表示されるため、クリックを促す文章として機能することになります。

この要素もキーワードの正規性を保持するため重視してはいけません。

meta keywords

meta keywords は、<meta name=”keywords” content=”/…/”>として記述し、そのコンテンツを表す要素として機能しますが、現在SEO対策としては一切効果がなく、Googleがサポートするメタタグの一覧にも含まれていません

つまりどんなにメタキーワードを記述したとしても、Googleのクローラーはそのキーワードを無視し、結果としてメタキーワードがそのページの評価を高めることはなくなっています。

meta robots

検索エンジンのロボットであるクローラーを制御し、meta要素内に挿入可能なので、ページ単位でのクローリング制御に使用することが可能です。

以下のよ うに記述することができます。

HTML
<meta name="robots" content="index,follow"> 
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content-"noindex,follow'>

例えば、「index,follow」は「インデックス(index)にすると、このページから放出されるリンクを追跡(follow)してください」という指定ですが、インデッ クスしてフォローしたい場合には、meta robotsを記述しなくても構いません

異なるドメインに同じコンテ ンツがあることを検索エンジンは嫌います。

このような場合には「noindex」という指定をしますが、noindexはあくまで検索結果に表示しないようにするだけで、 クローラーはこのコンテンツを取得しキャッシュしています。

「nofollow」は、そのコンテンツからのアウトリンクをクローリングさせないための指示ですが、そのリンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合は、nofollow の値を使用します。

クローリングされないということは、そのリンクはSEOに関してはまったく効果のないリンクとなります。

理想的なhead要素

上記の内容を踏まえ、SEOを考慮した理想的なhead要素は以下のようになります。

HTML
<html>
<head>
<meta http-equiv "Content-Type' contente"text/html; charset-shift_jis">

<!--まずtitle-->
<title>Keyword1</title>

<!--次にmeta description -->
<meta name-"description" content="こちらはxxのサイトです。 Keyword1 をはじめ、 Keyword2、Keyword3のメリット、デメリットを説明しています。 ">

<meta name="robots" content="index,follow">
<--外部ファイル化するものは外部ファイル化 - >
<link rel="stylesheet" type="text/css' href="/css/style.css" media="all />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="contents" href="/sitemap/" />
<script lype="text/javascript" src="/common/js/common.js"></script>
</head>

<!-- シンプルなheadに続き、すぐbodyが開始される -->
<body>

head要素はなるべくシンプルにし、これ以外にはSNSのog要素は必要に応じて記載しましょう。

body要素

body要素の出現位置はGoogleが重視するため、なるべくはページ上部に来るようにしましょう。

強調要素を適宜使用するコンテンツ内での重要なキーワードは、論理的強調の(strong)要素でマークアップし、その際はキーワード部分のみを強調するようにします。

なお、strongが強調の意味合いが強いと定義されており、b要素は視覚的強調で見た日だけ太字にするので、キーワードではない部分に利用しましょう。

h1〜h6タグの適切な設置方法

h1要素は出来ればテキストの方が好ましく、画像をh1にする際は必ずalt属性にテキストを記述します。

そしてそのページの最重要キーワードを伴って使用する為、1ページ内に1回最重要なワードに対して、ページ内の最上部にh1を設置するようにし、それ以降は順次h2〜h6の要素を設置するようにしましょう。

参考サイト

参考 SEOに重要なタグ12個の正しい使い方JUST-WEB