SEO対策に効果的なHTMLコーディングとは？対策方法やポイントを徹底解説

HTMLコーディングとは

そもそもHTMLコーディングとは、HTML（HyperText Markup Language）というマークアップ言語を使い、Webページ（Webサイト）のコンテンツや構造を定義することです。

マークアップ言語とプログラミング言語の違い マークアップ言語：文章の意味を示したり、文章を構造化したりする。静的な言語ともいえる。 プログラミング言語：計算したり、ログイン処理をしたりする。動的な言語ともいえる。 HTMLはハイパーテキストを記述するためのマークアップ言語であり、プログラミング言語ではない。

もう少し簡単に解説していきます。人間がWebページを見ると、その見た目から「タイトル」「見出し」「段落」「画像」「太字」など、さまざまな要素を識別できるでしょう。

これと同じように、コンピュータ（クローラーなど）はマークアップ言語によって、そのページがどのような要素で構成されているかを識別するのです。

マークアップ言語にはさまざまな種類がありますが、シンプルなマークアップが可能なHTMLは、使い勝手がいいため世界中で利用されています。そのため、検索エンジンも基本的にはHTMLで書かれたコードを解読し、その内容をもとにコンテンツを評価しています。

SEO対策でHTMLコーディングを重視すべき理由

SEO対策でHTMLコーディングを重視すべき理由としては、次の2つが挙げられます。

• 検索エンジンに正しく情報を伝えるため
• ユーザビリティを向上させるため

HTMLコーディングを重視することは検索エンジンに対してのみならず、ユーザーにとってもメリットがあることがポイントです。それぞれ詳しく見ていきましょう。

検索エンジンに正しく情報を伝えるため

そもそもWebページを検索結果で上位表示させるためには、検索エンジンから高評価を得なければなりません。そしてGoogleをはじめとした検索エンジンは、HTMLの情報をもとにコンテンツ内容を評価します。

たとえば、記事内に「見出し」を設置するケースを例に考えてみましょう。平文よりも少し文字を大きめにしておけば、人間からは「見出し」に見えるかもしれません。しかし、文字をただ大きくしただけでは、HTML上では平文に過ぎません。そのため検索エンジンからは、見出しがないコンテンツ（わかりづらい構造のコンテンツ）だと評価されてしまうのです。

つまり、正しくHTMLコーディングされていなければ、検索エンジンにページの価値を伝えられず、結果として上位表示されることもありません。HTMLでは「タグ」という要素ごとに意味が定められているため、適切なタグを使い、検索エンジンにコンテンツ内容を識別してもらう必要があるのです。

ユーザビリティを向上させるため

正しくHTMLコーディングすることは、ユーザビリティの向上にもつながります。

たとえば、Webページ内にとくに重要な文章がある場合、「重要・強調」を意味する「strongタグ」で記述します。「strongタグ」で記述することで、検索エンジンに対してコンテンツ内のポイントを伝えられます。また、「strongタグ」で記述した箇所は、実際のページでは太字で表記されるため、ユーザーに対しても重要であることを示せるのです。

また、ただ文章が書かれているページよりも「表（tableタグ）」や「箇条書きリスト（liタグ）」があるページのほうが読みやすいでしょう。これらのタグを使って情報を整理すれば、検索エンジンもコンテンツ内容を理解しやすくなります。

HTMLタグを上手に使いながら、ユーザーにとってもわかりやすいページを制作すれば、検索エンジンに対しても情報が伝わりやすいページになるため、結果としてSEO対策になるのです。

SEO対策のために意識すべきHTMLタグ

HTMLタグには多くの種類がありますが、SEO対策のために意識すべきタグとしては、主に次の11種類が挙げられます。

種類	意味
titleタグ	タイトル
descriptionタグ	ディスクリプション
hタグ	見出し
aタグ	アンカー
imgタグ	画像
liタグ	リスト
strongタグ	強調
metaタグ	メタ情報
tableタグ	表
blockquoteタグ	引用
relタグ	属性

それぞれのタグについて、詳しく見ていきましょう。

titleタグ（タイトル）

titleタグはその名のとおり、そのWebページのタイトルを指定するタグです。

titleタグは次のように記述します。

<title>Webページのタイトル</title>

タイトルは検索エンジンがページを評価する際、もっとも重視する要素の一つです。さらにクリック率にも影響を与えるため、コンテンツの内容をわかりやすく表すものにしましょう。

単純にキーワードを詰め込むのではなく、ユーザーニーズを満たせる内容であることをアピールすることが重要です。ただし、上位表示を狙うキーワードについては、ユーザーの目に留まりやすいよう左寄せにすることが推奨されています。また、タイトル文字数に制限はありませんが、検索結果に全文が表示される32文字程度を目安にするといいでしょう。

descriptionタグ（ディスクリプション）

descriptionタグは概要文章（ディスクリプション）を指定するタグです。

<meta name=”description” content=”Webページ概要文章” />

ディスクリプションに指定した文章は、検索結果のタイトル直下に表示されます。

ディスクリプションの文章そのものは、検索エンジンからの評価には直接影響しないといわれています。しかし、ユーザーはディスクリプションを見てクリックするかどうか決めるため、クリック率に影響することは間違いありません。

クリック率が高ければ高いほど、検索エンジンはユーザーからの評価が高いページであると判断するため、上位表示されやすくなります。こういった理由から、クリック率はSEO対策においても重視すべき要素であるといえます。つまり、クリック率を左右するdescriptionタグも、検索エンジンからの評価を高めるためには不可欠なのです。

ディスクリプションの文字数にも制限はありませんが、検索結果に表示されるのは120文字程度であるため、100文字〜130文字くらいの文章を設定するといいでしょう。

hタグ（見出し）

hタグとは、ページ内の見出しを指定するタグのこと。hタグによって、ページ内でどのようなトピック・コンテンツを扱っているのかを示します。検索エンジンにWebページのアウトラインを伝えるためのタグともいえるでしょう。

hタグは「h1」から「h6」までの6種類が存在します。数字が小さいhタグほど階層が高く、検索エンジンから重視されることが特徴です。

より数字が小さいhタグの中に、次の数字のhタグを入れ子構造で使用します。たとえば「h2」の中には「h3」、「h3」の中には「h4」を設定するということです。

hタグの使用例

<h2>○○の作り方</h2>　 <h3>ステップ1</h3>　 <h3>ステップ2</h3>　 <h3>ステップ3</h3> <h2>○○のメリット</h2>　 <h3>メリット1</h3>　 <h3>メリット2</h3>　 <h3>メリット3</h3>

h1タグはtitleタグと同じくタイトルを示すため、はh1＝titleとなるように使用されることがほとんど。（CMSでh1＝titleとなるよう設定されているケースも多いです）

ただし厳密にいうと、h1とtitleには次のような違いが存在します。

• h1：ページ内に表示されるタイトル（ユーザーに認識させるタイトル）
• title：検索結果に表示されるタイトル（検索エンジンに認識させるタイトル）

SEO的な観点から、あえてh1とtitleを別々に設定するケースがあることも覚えておきましょう。

そのためSEOの実務的には、「h2」と「h3」をメインで使用します。状況に応じて「h4」を使用することもありますが、「h5」と「h6」は検索エンジンからの評価に与える影響が軽微であるため、ほとんど使用しません。

aタグ（アンカー）

aタグはアンカー、すなわちWebページ内にテキストリンクを設置するときに使用します。たとえば当サイトへのリンクとして「コーディングアーミー」というテキストリンクを作りたい場合、次のように記述します。

<a href=”https://www.coding-army.jp/”>コーディングアーミー</a>

aタグで囲った部分がテキストリンクになります。

検索エンジンのクローラーは、このリンクを辿ってWebサイト内を巡回します。そのため、アンカーテキスト（リンクとして設定するテキスト）で移動先のページを端的に表すと、SEO評価が高まるといわれています。

ただし、むやみにキーワードを詰め込めば評価が上がるというわけではありません。あくまでも、クローラーとユーザーの双方にとってわかりやすいリンク文字列を設定することが重要です。

たとえば、別ページへの導線となるアンカーテキストを「詳しくはこちらをご覧ください」とするよりは、「詳しくはこちらの料金ページをご覧ください」など、どういったページに遷移するのかを明確に示したほうが望ましいというイメージです。

imgタグ（画像）

imgタグは画像を設置するために使用します。

<img src=”画像URL” alt=”画像の代替テキスト” width=”横幅の数値” height=”縦幅の数値”> ↓実際の例に近い形はこちら（料金表の画像を掲載すると想定）   <img src=”https://○○.com/~~~image.jpg” alt=”料金表” width=”500″ height=”300″>

imgタグの使用にあたって重視すべきは「alt属性」です。alt属性に画像の説明文をテキストで記載することで、クローラーに画像の意味や内容を正確に伝えることができ、結果としてページ内の情報を正しく伝えられます。

なお、alt属性に設定したテキストは、通信環境が悪いなどの理由で画像が表示できない場合に代わりに表示されるため、「代替テキスト」とも呼ばれます。また、目の不自由な方が音声読み上げ機能を使用し、ページを閲覧する際にもalt属性のテキストが読み上げられるため、検索エンジンだけでなくユーザーにとっても非常に有益なものになります。

liタグ（リスト）

liタグとはリスト、すなわち箇条書きを表すタグのこと。次のように使用します。

<ul> <li>ポイント1～～</li> <li>ポイント2～～</li> <li>ポイント3～～</li> </ul>

なお、通常の箇条書きで表示したいときはulタグで囲み、番号付きリストにしたいときはolタグで囲みます。

箇条書きを使うと、要点がユーザーと検索エンジンの双方に伝わりやすくなり、強調スニペットに表示されやすくなります。

強調スニペット Googleの検索結果の最上部に、検索キーワードに対する回答が表示される機能。検索順位1位のページより上部に表示されるため、ユーザーの目に留まりやすい。

strongタグ（強調）

strongタグとは、検索エンジンに対して強調したい部分を示すタグのこと。次のように使用します。

<p>通常の文章～～～<strong>とくに強調したい部分</strong>通常の文章～～～。</p>

strongタグを使うと「太字」になるよう設定されているWebサイトが多いため、ユーザーに対しても強調したい部分を示すことが可能です。

ただし、強調箇所が多すぎるとどこが重要なのかがわかりにくくなり、強調の効果が薄れるというデメリットも。そのため、strongタグは一つの見出し内で1回使う程度が望ましいです。

metaタグ（メタ情報）

metaタグは、Webページの情報を「検索エンジン」と「Webブラウザ」に伝えるために使用します。

あくまでも、「検索エンジン」と「Webブラウザ」に伝えることが目的であるため、メタ情報として記述した内容はWebページ内には表示されません。（先述したtitleタグやdescriptionタグも、メタ情報の一つです）

metaタグにはいくつか種類があり、次の5つがその代表例です。

種類	記述方法の例
タイトル	<title>Webページのタイトル</title>
ディスクリプション	<meta name=”description” content=”メタディスクリプション文章”>
エンコーディング	<meta charset=”utf-8″>
クローラー指示	<meta name=”robots” content=”noindex”> <meta name=”robots” content=”nofollow”> など
OGP （SNSなどに表示させる情報）	<meta property=”og:title” content=”タイトル”/> <meta property=”og:description” content=”ディスクリプション”/> <meta property=”og:image” content=”画像URL”/>

とくにクローラーへ指示を出すメタタグの使い方には注意してください。

たとえばメタタグでnofollwを設定すると、クローラーがページ内すべての外部リンクを辿らなくなります。そのため、nofollwはリンク先サイトと自社サイトとの関連性が薄い場合などに使用されます。

しかし、引用元サイトや公的機関へのリンクについては、クローラーを辿らせることが望ましいです。1つのページ内に「辿らせたいリンク」と「辿らせたくないリンク」の両方がある場合は、メタ情報としてのnofollwは設定しないほうがいいでしょう。

また、特定のリンクだけをnofollwとしたい場合、そのリンクを設定している「aタグ」だけにnofollwを設定することも可能です。

tableタグ（表）

tableタグとは、表を作るためのタグのこと。tableタグの中で次の5つのタグを使い、表を形成します。

thead	見出しとなる列
tbody	見出し以外の情報
tr	行
th	見出しとなるセル
td	見出し以外のセル

実際の使い方は次のとおりです。

<table> <thead> <tr> <th >見出し1</th> <th >見出し2</th> </tr> </thead> <tbody> <tr> <th>見出しセル△</th> <td>見出し以外のセル△</td> </tr> <tr> <th>見出しセル◇</th> <td>見出し以外のセル◇</td> </tr> </tbody> </table>

できあがる表

見出し1	見出し2
見出しセル△	見出し以外のセル△
見出しセル◇	見出し以外のセル◇

表を使うことで、ユーザーと検索エンジンの双方に情報を整理して伝えられます。

blockquoteタグ（引用）

blockquoteタグとは引用を示すタグのことで、次のように使用します。

<blockquote> <p>引用文章～～</p> <p>引用元：<a href=”引用元サイトのURL”>引用元サイトのタイトルなど</a></p> </blockquote>

公的機関など、権威性のあるサイトから適切に引用することで、ユーザーや検索エンジンに信頼してもらいやすくなります。昨今のSEOでは情報の信頼性がとくに重視されているため、blockquoteタグは法律・健康などが関わるジャンルにおいて、とくに重視すべきタグになります。

なお、blockquoteタグを使わずとも引用することは可能です。しかし、検索エンジンに対して「引用した情報であること」を明示するためにも、使用することをおすすめします。

relタグ（属性）

relタグとは、Webページとリンク先の関係性を指定する「属性」を示すタグのこと。さまざまな種類がありますが、SEOやユーザビリティの観点から重視すべきものとしては、次のようなものが挙げられます。

種類	役割
canonical	URLを正規化する
nofollow	「リンク先サイト」と 「リンク元サイト」を関連付けないようにする
noreferrer	リンク先サイトに、 リンク元サイトの情報を渡さないようにする
noopener	target=”_blank”でリンク先を 開いたときの脆弱性を防ぐ

属性ごとの詳細は長くなるため割愛しますが、SEOの観点からリンクになんらかの設定をしたい場合は、relタグを使うことを理解しておきましょう。

SEO対策に効果的なHTMLコーディングに必要な7つのポイント

主要なタグの種類がわかったところで、SEO対策に効果的なHTMLコーディングに必要なポイントを見ていきましょう。SEO対策に影響する要素は無数にありますが、少なくとも次の7つを優先的に対応してみてください。

1. HTMLタグの用途を守る
2. Hタグは階層化する
3. スパム的なコーディングは避ける
4. レスポンシブ対応させる
5. コアウェブバイタルも意識する
6. WHATWGの基準に沿う
7. 構造化マークアップにも対応する

それぞれ詳しく解説します。

1.HTMLタグの用途を守る（セマンティックコーディング）

まず第一に、HTMLタグの用途を守ることが重要です。

ここまで紹介したとおり、HTMLタグにはそれぞれ意味や使い方が明確に定められています。たとえば、hタグは見出しを設定するために使用します。このような意味が決まっているにもかかわらず、「ここは文字を大きくしたいからh2を使う」などの用途からずれた使い方をすると、検索エンジンはもちろんユーザーも混乱させてしまうでしょう。

SEO対策はもちろん、ユーザビリティを高めるためにも、HTMLタグは正しく使いましょう。

セマンティックコーディング Webページの構造を検索エンジンに正しく理解させるためのコーディングのこと。HTMLを正しく使うことは、セマンティックコーディングを実践しているともいえる。

2.hタグは階層化する

初歩的なSEO対策としては、hタグをしっかりと階層化することが挙げられます。先述したとおり、hタグは「h2」の中に「h3」、「h3」の中に「h4」と入れ子構造で使用しなければなりません。

「h2」のすぐ下に「h4」を入れたりすると見出しの階層構造が崩れるため、コンテンツの重要度や関連性を検索エンジンが正しく理解できなくなり、混乱してしまいます。Webページを作るときは、hタグを階層化することを意識してみてください。

3.スパム的なコーディングは避ける

ここまでSEO対策に効果的なHTMLコーディングのテクニックを紹介してきましたが、これらのテクニックを濫用し、スパム的なWebページを作ることは避けなければなりません。

たとえば、titleタグやhタグにキーワードを過剰に詰め込んだり、人の目には見えないよう白文字でstrongタグを多用したりするとスパム的な行為とみなされ、検索エンジンからペナルティを受ける可能性もあります。

あくまでもユーザーに有益なコンテンツを作ることにフォーカスし、HTMLの本来の用途を守ることが重要です。

4.レスポンシブ対応させる

主要な検索エンジンであるGoogleはモバイルファーストインデックスを採用しており、モバイル対応していないサイト（Webページ）は評価されにくくなります。

そのため、レスポンシブ対応によってモバイルフレンドリーなWebページにすることは、現代のSEO対策において欠かせない要素です。

レスポンシブコーディング 一つのHTMLで、さまざまなデバイスサイズに対応できるようにすること。 関連記事：レスポンシブ対応サイトのコーディングは代行会社がおすすめ！費用相場も解説

5.コアウェブバイタルも意識する

コアウェブバイタル（Core Web Vitals）とは、ユーザー体験（UX）を評価するための指標であり、Googleが重視しているとされています。

コアウェブバイタルは次の3つの指標から構成されています。

Largest Contentful Paint （LCP）	読み込みパフォーマンスの尺度 ページ内でもっとも大きなコンテンツが表示されるまでの時間
Interaction to Next Paint （INP）	インタラクティブ性の尺度 ページ内で行われたインタラクションの遅延時間
Cumulative Layout Shift （CLS）	視覚的安定性の尺度 ページ読み込み中にレイアウトがズレたときの変化量

これらの指標はさまざまな要素が絡むため、HTMLだけで改善できるものではありません。

しかしHTMLのみで改善できることもあります。たとえば、imgタグでwidthとheightを明確に指定することで、CLSの改善が可能に。また、レンダリングを妨げるリソースを除外するために、CSSをHTMLのインライン要素として設定することも一つの手法です。

これらは専門的な内容になるため、コアウェブバイタルの改善を意識する場合は、専門のコーダーに依頼することをおすすめします。

6.WHATWGの基準に沿う（HTML Living Standard）

「WHATWG」の基準に沿ってコーディングすることも推奨されています。

「WHATWG」とは、HTMLのWeb標準を策定している団体です。かつては「W3C」という団体がHTMLの基準を主導していましたが、その基準が実際のニーズにあわないとする反発があり、AppleやMozillaなどの開発者によって「WHATWG」が設立されました。

現在では「WHATWG」が定めた「HTML Living Standard」が世界的な標準とされています。検索エンジンのクローラーもこの基準に沿ってコンテンツ内容を識別するため、可能な限り「WHATWG」の基準に沿ってコーディングすることが望ましいでしょう。

7.構造化マークアップにも対応する

より専門的なコーディング方法として、構造化マークアップも推奨されています。ここでいう構造化されたデータとは、検索エンジンにデータの意味を正しく識別してもらうために、特定の「属性」を付与したもののこと。

たとえば、「JPC」という固有名詞をいきなり読み込んでも、それが何なのかを検索エンジンは正確には把握できません。そこで、「この固有名詞は“社名”を表している」という情報をコーディングしておくことで、より正しい情報を検索エンジンに伝えられるのです。この一連の作業を「構造化マークアップ」と呼びます。

構造化マークアップにはいくつかの方法がありますが、HTML内に直接記載することも可能です。ただし、Googleがサポートしているフォーマットである「schema.org」を使用して記述する必要があります。

構造化マークアップも専門的な内容となるため、プロのコーダーでなければ対応は難しいでしょう。

SEOを意識したHTMLコーディングならコーディングアーミーがおすすめ

出典：コーディングアーミー

ここまで紹介したとおり、SEO対策に効果的なHTMLコーディングの方法は多岐にわたります。難解な内容も多いため、専門家ではない方がすべてのHTMLタグを正しく使うことは現実的ではないでしょう。そのため、SEOを意識したWebサイトを制作したい場合は、コーディング代行サービスに依頼することをおすすめします。

コーディングアーミーは、次の特徴を兼ね備えたコーディング代行サービスです。

• タイトル・メタ属性・alt属性などにも対応
• 標準プラン内でレスポンシブ対応
• SEO観点での品質チェック
• わかりやすい料金体系

これらの特徴に魅力を感じる方は、ぜひ一度お問い合わせください。

タイトルタグを含むメタ属性・alt属性などにも対応

コーディングアーミーでは、タイトルタグを含む各種メタ属性・alt属性などの設定にも対応しています。

入稿時にサイトマップで指定がある場合はその指示に従って設定し、とくに指定がない場合でも、プロのコーダーがSEOに最適な形で設定を行います。

標準プラン内でレスポンシブ対応

レスポンシブ対応は現在のSEO対策において必須要素であるものの、オプション扱いとしている会社も少なくありません。

しかし、コーディングアーミーでは全プランにおいて、通常料金内でソリッドレスポンシブに対応しています。LPコーディングはもちろん、Webサイトのトップページコーディング・下層ページコーディングのレスポンシブデザインにも対応しているため、安心してお任せください。

SEO観点での品質チェック

コーディングアーミーには200名を超えるコーダーが在籍しており、スキルに応じてランク分けされています。納品前には、最上位ランクのコーダーが品質チェックを行いますので、クライアント側で別途ご確認いただく必要はありません。

コーディング業務を完全に外注化したい場合にもおすすめです。

わかりやすい料金体系

コーディングアーミーの料金体系は、わかりやすさが特徴です。

プラン	費用	備考
LPコーディング	70,000円／ページ	縦の長さ8,000px想定 超過する場合は20,000円／4,000px
TOPページコーディング	40,000円／5,000px	5,000px超は別途見積もり
下層ページコーディング	1～10ページ：15,000円／5,000px 11～20ページ：13,000円／5,000px 21～30ページ：10,000円／5,000px	5,000px超は別途見積もり

これらにはディレクション費用も含まれているため、思いがけずオプション費用が追加で発生する心配はありません。

まとめ

SEO対策において、HTMLコーディングはその効果を最大限に引き出すための重要な要素です。適切なコーディングは、検索エンジンにページ内容を正確に伝え、ユーザーにとっても見やすく使いやすいサイトを実現します。しかし、対策すべきポイントは多岐にわたり、構造化マークアップやメタ属性の設定など、専門的な技術と知識が必要です。そのため、時間やリソースに加え、技術的な対応も含めて自社ですべてをカバーするのは難しいでしょう。

コーディングアーミーは、高品質かつリーズナブルな料金でSEOに特化したHTMLコーディングを提供する代行サービスです。プロフェッショナルなサポートを活用し、効果的なSEO対策を実現してください。