2016.12.11 まなびん

SEO

基本に忠実なHTMLを書くとSEOに強い

WordPress使ってるとSEO最適化テンプレートとか配布されていたりします。

SEOに最適化されているということはどういうことか？

本当にそのテンプレートがSEOに最適化されているのか？

SEOの基本はこちらのページで読んでもらいつつ、今回はHTML構造について書いていきます。

HTMLの文章構造を理解する
適切なHTMLタグを使う
実際に文章構造を意識して書くのは難しい
CSSを入れずに書いてみるといい

HTMLの文章構造を理解する

HTMLはウェブ上の文書を記述するためのマークアップ言語です。

HTMLを見る人はコンピューターと人間の二種類がいます。

HTMLはまずブラウザによって解釈されて、人間が見るための画面に表示されます。

例えば、今この画面を見てる裏では

<html>
    <body>
        <h1>基本に忠実なHTMLを書くとSEOに強い</h1>
    </body>
</html>

みたいなHTMLの記述があるわけですが、そのままでは人間にとって見にくいのでブラウザがいい感じに整形してくれるわけです。

CSSはブラウザが解釈した後によって適用されるデザイン的なスタイルにすぎないので、基本的な文章構造はHTMLにあるわけです。

適切なHTMLタグを使う

HTMLは文章によって適切なタグが用意されています。

タグの意味を理解して適切なタグを使うことが文章構造上とても大事です。

いくつか例を挙げてみます。

hタグの場合

例えば見出しタグはh1〜h6です。パラグラフはpタグです。

これは本を書くのと同じで、h1がチャプタータイトルh2が段落タイトル、h3が小タイトルの様に考えるとイメージがつきやすいと思います。

ですので、必ず文章構造によって適切なhタグを配置する必要があります。

良い例) h1→h2→h3

<h1>ここに見出し</h1>
<p>ここに本文</p>
<h2>ここに見出し</h2>
<p>ここに本文</p>
<h3>ここに見出し</h3>
<p>ここに本文</p>


<h1>ここに見出し</h1>
<p>ここに本文</p>
<h2>ここに見出し</h2>
<p>ここに本文</p>
<h3>ここに見出し</h3>
<p>ここに本文</p>

悪い例) 無秩序な並び

<p>ここに本文</p>
<h2>ここに見出し</h2>
<p>ここに本文</p>
<h1>ここに見出し</h1>
<p>ここに本文</p>


<h3>ここに見出し</h3>
<p>ここに本文</p>
<h2>ここに見出し</h2>
<p>ここに本文</p>
<h1>ここに本文</h1>
<p>ここに本文</p>

本を読んでいても、小見出しが先にあって大見出しが後だと読みにくいですよね。

HTMLは「利用者の立場に立って分かりやすく」書くのが基本です。

他にもいくつか紹介します。

ul liの場合

順序のないリストを表示するタグです。

順序のあるタグはolを使います。

  <ul>
    <li>カテゴリー1</li>
    <li>カテゴリー2</li>
    <li>カテゴリー3</li>
    <li>カテゴリー4</li>
    <li>カテゴリー5</li>
    <li>カテゴリー6</li> 
  </ul>

addressタグの場合

addressタグは連絡先を示すタグです

<address>
ここに住所とか連絡先とか
</address>

navタグの場合

navタグは主要なナビゲーションを表します。例えばカテゴリ一覧やサイト内のリンクなど、メニューボタンなどを配置する時に使います。

<nav>
  <ul>
    <li>カテゴリー1</li>
    <li>カテゴリー2</li>
    <li>カテゴリー3</li>
    <li>カテゴリー4</li>
    <li>カテゴリー5</li>
    <li>カテゴリー6</li> 
  </ul>
</nav>

HTMLのタグの基本的な考え方はググればいくらでも出てきますので、そのとおりに記述していけば良いので非常に簡単です。

実際に文章構造を意識して書くのは難しい

先述の通りHTMLとSEOの基本は非常にシンプルなんです。

でも実際に書き出してみると基本に忠実に書くのは実は面倒です。

その原因はCSSです。

例えばhタグで言えば h1が大見出し→h2が中見出し→h3が少見出しとしたいところですし、文字のサイズもh1から順番に小さくしていくべきと考えると思います。

ところが、CSSはタグが本来持っている意味とは関係なくスタイルを適応できるので、h2であってもh3より小さくしてしまうことが可能なわけです。

で、実際デザイナーが提案してきたデザインをCSSで適応させようとすると、文章の意味合いではh3であってもスタイル上はh2のデザインの方が合うなんてことが、往々にしてあるんです。

SEOをちゃんと意識したHTMLを書こうとするとHTMLだけでなく、CSS、もしかしたらJavaScriptも書き直すことになるので非常に面倒です。

CSSを入れずに書いてみるといい

CSSによるスタイルを一切無視して初めから書き始めると、ブラウザ固有の標準スタイルが適応されます。

SEOを意識するならCSSを一旦無視して適切なタグを考えるべきです。

その上でスタイルを適応させて人間にとって見やすいデザインに整えるのが本来のCSSの使い方だし、正当なやり方だと思うのです。

この記事を書いた人
最新の記事

まなびん

会社の代表やってます。遊ぶように仕事やってます。