HTMLコーディングで行うSEO対策の話【重要です】

こんにちは朱夏です。

今回は、HTMLコーディングで行うSEO対策について書いていきたいと思います。
ちょっと前の私はこんな考え方をしていました。

朱夏

SEO対策って検索上位に表示させるための対策でしょ？

キーワードの選定したり、記事の品質を上げたり、代替コンテンツを作る側の話。

WEBプログラミングでやれるSEO対策なんてあるのかな・・・

この考えが間違っているのに気づくのに3か月、かなり遠回りしました。

コーディングの時にSEO対策を意識したサイト作りが出来ていなければ、どんなにいいコンテンツを用意しても検索上位に表示されない可能性もあります。

今は、HTMLコーディングにはSEO対策が重要だと考えるようになりました。
今回はその辺を深堀りして書いていきたいと思います。

[もくじ]
何故、HTMLコーディングでSEO対策が重要なのか
実際に気を付けるポイント
あとがき

何故、HTMLコーディングでSEO対策が重要なのか

何故、HTMLコーディングでSEO対策が重要か？
結論から言うと、検索エンジンが見ているのはコードだからです。

少し考えればわかる事だったのですが、そもそも検索エンジンは人間ではなくプログラムなのです。

その検索エンジンがWEBサイトの中身を理解するには、コードを読むしかないのです。

人であれば、コンテンツの内容、デザイン、画像、テキストなど様々な要素を見て、聞いて理解できますが、検索エンジンの場合、たとえば画像を読み込んだとしても、それが何を意味しているのか理解できるわけではありません。

であれば、コードを書くときに、検索エンジンが理解出来る様に書く必要があるわけです。

実際に気を付けるポイント

前の項目で書いた通り、検索エンジンは画像やテキストを読み込んでも、どんな意味があるのか、どこが重要なのか理解できません。
それを理解できるように意識してコーディングするのが、基本的な考え方です。

では、コーディングで気を付けるポイントを具体的に5つほど紹介していこうと思います。

<meta name=”discription”>
<title>
<h1～6>
<li>
<img alt=””>

順番に解説します。

1.<meta name=”description”>

こちらはサイトの概要を記載しておくためのタグです。
ここに書かれた文章は、検索結果一覧の紹介文として表示されます。

2.<title>

ブラウザのタイトルバーやタブに表示されるタイトルになります。
文字数は32文字以内が最適とされている様です。
また、この<title>は検索エンジンが重要なテキストと認識しているので、検索上位を狙いたいキーワードを盛り込んでおくのが良いとされています。

3.<h1～6>

見出しに使用するタグです。
こちらのタグも検索エンジンが重要視しているテキストが入っていると判断しているタグになります。
注意する事としては以下になります。

- h1を多用しない(1つ、多くても2つ程度)
- 文章構造を崩さない
- 見た目の強調表現としてこのタグを使用しない

文章構造を崩さないというのは、こういった感じの事です。

〇正しい構造〇
——————————–
<h1>大項目</h1>
<h2>中項目</h2>
<h3>小項目</h3>
<h3>小項目</h3>
<h2>中項目</h2>
<h3>小項目</h3>
<h3>小項目</h3>
<h3>小項目</h3>

×間違った構造×
——————————–
<h1>見出し１</h1>
<h3>見出し２</h3>
<h2>見出し３</h2>
<h2>見出し４</h2>
<h1>見出し５</h1>
<h2>見出し６</h2>
<h1>見出し７</h1>
<h1>見出し８</h1>

こういった書き方は、見た人にとっても見難くなるのでやめた方が良いと思います。

見た目の強調表現のためにこのタグを使っていると、検索エンジンから予期しないキーワードを重要と判断され、最悪サイトの趣旨にそぐわないと判断されかねないのでやめておきましょう。

4.<li>

<ul>や<ol>タグとセットで使うリストタグです。
これも、検索エンジンは重要と判断している様です。
箇条書きのリスト以外にも、ナビゲーションの項目としても使われることが多いたぐなので、中身のキーワードは意識していかないといけませんね。

5.<img alt=””>

画像を表示するためのimgタグです。
重要なのはその中にあるalt=”この部分のテキスト”です。

序盤にも少し触れましたが、検索エンジンは画像データが何を意味しているかを知る事が出来ません。
そこで、alt属性が必要になってくるわけです。
検索エンジンは、画像を読み込むとき、このalt属性をみてどんな画像なのかを認識します。
アイキャッチ画像なのか、説明用の図解なのかなど、その画像の役割や画像説明を具体的に書くのが良い様です。
文字数は短めで、30文字程度に収めたほうが良い様です。

といった感じで5つ紹介しました。
これで全てではありませんが、この5つを意識するだけでも、検索エンジンはサイトの内容をかなり理解しやすくなると思います。