SEO対策においては、適切なHTMLコーディングも重要な手段のひとつです。
しかし、何に気を付けてコーディングすべきか、どのようなHTMLを書けばよいのかわからない方も多いのではないでしょうか。
そこで本記事では、SEO対策に有効なHTMLコーディングのポイントや、覚えておきたいHTMLタグの書き方を紹介します。
これからコーディングにも力を入れてSEOに強いサイトを作りたい方は、ぜひ参考になさってください。
目次
SEO対策に有効なコーディングのポイント
コーディングはただHTMLを書けばいいわけではなく、ユーザビリティ、SEO両方の観点から、ある程度はルールに沿って行う必要があります。
そこで、まずSEOに強いコーディングを行うにあたって心がけたいポイントを2つ解説します。
サイト制作側、ユーザーともにメリットがあるので、詳しく見ていきましょう。
W3C基準に沿ったコーディングを行う
W3Cとは「World Wide Web Consortium」の略称で、Web技術の標準化を目指し活動する非営利団体です。W3Cが定めた「Web標準」と呼ばれる規格に則ってコーディングすることで、互換性が保証されます。
同じWebサイトでも、もしブラウザや端末によってレイアウトなどの見え方が変わると不便に感じるでしょう。
しかし、互換性が保証されるとこうした問題は解消され、ユーザーの利便性が向上します。サイト制作する側にとっても、ブラウザによる見え方の違いに注意を払う必要がなく、負担軽減につながるのです。
セマンティックコーディングを意識する
セマンティックコーディングとは、Webサイトの文章構造をGoogleなどの検索エンジンに正しく理解させることを目的としたコーディングです。
例えば、会社名やサイトの名称などヘッダーに入れるべき情報にはheaderタグを使用。利用規約やプライバシーポリシーなど、フッターに入れるべき情報はfooterタグを使用します。
このように適材適所でタグをつけることで、ユーザーが見やすい適切な文章構造のサイトだと検索エンジンに認識してもらえるのです。
SEO対策でHTMLコーディングが重要な理由
SEO対策においてなぜHTMLコーディングが重要なのでしょうか。それは、コーディングによって検索エンジンにWebサイトの情報や見やすさを伝えるためです。
検索エンジンはクローラーと呼ばれるプログラムであらゆるWebサイトのページを巡回しており、クローラーが得た情報で検索結果の表示順位を決定します。
クローラーは人間のように見たままのデザインでサイトを認識するわけではなく、HTMLコーディングの内容で判断します。
そのため、コーディングが正確でなければ、見た目のデザインがどれほど優れていても順位が上がりません。HTMLコーディングは、検索エンジンにサイト情報を正しく伝える手段と理解しておきましょう。
SEO対策に有効なタグ6選
HTMLコーディングを行うにあたってどのようなタグを使うべきなのでしょうか。ここでは、SEO対策に効果的なタグとその書き方を6種類紹介します。
- タイトル（titleタグ）
- ディスクリプション（descriptionタグ）
- 見出し（hタグ）
- アンカー（aタグ）
- リスト（liタグ）
- 画像（img・altタグ）
それぞれの詳細を見ていきましょう。
タイトル（titleタグ）
titleタグはその名の通りコンテンツのタイトルを示すもので、書き方は以下の通りです。
| <title>コンテンツのタイトル</title> |
タイトルはクリック率に大きな影響を与え、SEO対策において最も重要視される部分です。一般的には32文字程度かつ、対策したいキーワードを左寄せにした方がよいとされています。
タイトルには最初にユーザーの目を引く役割と、検索ニーズを満たしているコンテンツだと検索エンジンに伝える役割があります。
そのため、コンテンツ内で一番注意を払って考えなければならない部分なのです。
ディスクリプション（descriptionタグ）
ディスクリプションとは、検索結果のタイトル直下に表示されるコンテンツの概要文章です。
| <meta name=”description” content=”120文字程度の概要文章” /> |
descriptionタグ自体にSEO効果はないとされていますが、検索結果に表示されるためクリック率に影響する部分です。ユーザーは概要文章を見て判断するため、設定する方がよいでしょう。
設定しなかった場合、検索エンジンが自動で生成した概要が表示されるため、クリックされなくなる可能性があります。
見出し（hタグ）
見出しを設定するhタグは、文章の構成を示すために使います。
- h1タグ（＝titleタグ）→コンテンツのテーマを示す
- h2タグ→大見出し（テーマの主要トピックを示す）
- h3タグ→中見出し（主要トピックの補足説明）
- h4タグ→小見出し（補足に対する詳細説明）
- h5タグ、h6タグ…と続く
タグの書き方は以下の通りです。
|
<h1>コンテンツのタイトル</h1> |
h1タグはタイトルと同義のため、各コンテンツにつき1つしか使えません。
h2以下のタグはある程度使い方が決まっています。
h2の直下にはh3、h3直下にはh4という階層構造にすることで文章にまとまりが生まれ、クローラーが巡回しやすくなるのです。
また、見出しにも関連キーワードを不自然でない程度に入れましょう。
アンカー（aタグ）
aタグは、コンテンツ内のテキストをリンク化するときに使用します。
| <a href=”https://〇〇〇/”>リンク名</a> |
情報の引用元や参照元として、公的機関や信頼できるサイトのリンクを貼ることで、SEO評価が上がります。同じサイト内の関連性が高いページに誘導するのも、ユーザーやクローラーの滞在時間が長くなり効果的です。
また、HTMLタグの間にリンク先の内容を簡潔に表す文言や対策キーワードを入れると、さらにSEO効果が期待できます。
リスト（liタグ）
liタグは、文章内で箇条書きを設定する際、以下のように使用します。
|
<ul> |
番号付きリストを設定したい場合は「ul」を「ol」に変更します。リストはSEOにも効果的で、検索結果の強調スニペットで表示される可能性が高くなります。
文章にメリハリがつきユーザビリティの向上にもつながるため、箇条書きで表現できる部分は積極的にliタグを利用しましょう。
画像（img・altタグ）
imgタグは、コンテンツ内に画像を表示するタグです。
| <img src=”images/001.jpg” alt=”画像の説明文” width=”500″ height=”300″> |
画像の形式や大きさを適切に設定することもユーザビリティの観点で重要です。width、heiht属性を設定しないと画像によっては読み込みに時間がかかり、ユーザーの離脱率が増えるためです。
画質をほとんど損なわず圧縮できるtinyPNGなどの無料ツールも使用し、画像を表示させやすくリサイズしましょう。
また、alt属性はクローラーに画像の内容を説明するために設定します。通信環境などによって画像が表示されない場合に代わりに表示されるテキストで、音声読み上げ機能を使った際にも読み上げられます。
画像ファイルを指定するだけでなく、ユーザー視点で画像のサイズや説明文も適切に設定しましょう。
関連記事：コンテンツSEOとは？現役SEOコンサルタントが徹底解説
HTMLコーディングを正しく行うためのツール
自分でコーディングを行うと、書いたHTMLが合っているか不安になることもあるでしょう。
ここでは、HTMLが適切かチェックできるツールと、自分でHTMLコーディングを行わなくても簡単にコンテンツ作成ができるツールを紹介します。
HTMLチェックツール
自分の目で確認することも大事ですが、客観的かつ効率的にHTMLをチェックできるツールを利用してみましょう。HTMLチェックツールには以下のようなものがあります。
- Another HTML-lint gateway
- Markup Validation Service
- Dirty Markup
どれも無料で利用でき、HTMLやURLを入力するとミスがないかチェックしてくれます。
ファイルのアップロードでも対応できるツールや、エラー部分を自動で修正してくれる機能付きのものもあるので、用途にあわせて利用しましょう。
WordPress（ブロックエディタ）
自分でHTMLコーディングを行う自信がない方は、WordPressを利用するという手があります。
WordPressのブロックエディタを使うと、ご紹介した一通りの基本的なタグ設定がプルダウンメニューから選択できます。設定が正しく反映されているかもプレビュー画面で確認でき、自分でHTMLを書く必要がありません。
最初から自分でコーディングを行うのはハードルが高いと感じる方におすすめです。
HTMLコーディングを活用してSEOに強いサイトを作ろう
本記事では、SEO対策に有効なコーディングを行いたい方向けに、重要なポイントや必須のHTMLタグを解説しました。
コンテンツの情報やデザインを検索エンジンに正しく認識してもらうため、SEOの観点においてもコーディングは正しく行わなければなりません。
有効なタグを理解し、適切なコードを書くためのツールなども利用しながら、SEOに強いWebサイトを作成しましょう。
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。
