HTMLとは、「Hyper Text Markup Language」の頭文字をとった略称で、Webサイトやページの画面を表示するためのマークアップ言語のことです。

コンテンツ内容を正しく検索エンジンのクローラーに伝えるには、HTMLを適切に記述することが必要不可欠です。

しかし、HTMLの具体的な記述方法を詳しく知らない方もいるのではないでしょうか。

本記事では、HTMLの概要や記述方法、SEOで重要な理由について解説します。

「HTMLについて詳しく知りたい」

「SEOで重要なHTMLタグでどんなのがあるの？」

このような要望・疑問がある方はぜひ最後までご覧ください。

HTMLとは？

HTMLとは、「Hyper Text Markup Language」の略称で、Webサイトやページを作成する際に用いられる言語です。

タグを用いてテキストを意味付け（マークアップ）するため、マークアップ言語として分類されます。世の中で公開されているWebサイトのほとんどがHTMLで構成されています。

例えばWebページは、文章や見出し、画像などの要素で構成されていますが、これらはすべてHTMLの記述によって表示されています。

このように、Webサイトをマークアップの際に使用するタグをHTMLタグと呼びます。

▼HTMLタグのコーディングについて詳しく知りたい方はこちら

SEOに効果的なHTMLタグのコーディング方法とは？

HTMLがSEOにおいて重要である理由

HTMLはSEO対策において非常に重要です。その理由は大きく分けて2つあります。

• コンテンツの内容をGoogleの検索エンジンに正しく伝える必要があるため
• ユーザーの利便性を損ねないため

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

コンテンツの内容をGoogleの検索エンジンに正しく伝える必要があるため

正しいHTMLが記述されていないと、コンテンツの内容がクローラーに伝わらず、検索エンジンからの正当な評価を得ることができません。

例え、どんなに良質なコンテンツを作成しても、適切な評価が得られなければ上位表示させることができないため、SEO対策では正しいHTMLの記述が必要不可欠です。

SEOでは外部対策が重要視されやすい傾向にありますが、HTMLを正しく記述するといった内部対策も同じように重要ということを覚えておきましょう。

ユーザーの利便性を損ねないため

HTMLの記述に誤りがある場合は、次のようなことが起こり得ます。

• 見出しタグが目次に反映されていない
• リンクがクリックできない などのサイトの表示崩れが発生してしまう

その結果、ユーザーの利便性（＝ユーザビリティ）が損なわれ、SEO評価にも悪影響を及ぼします。検索順位が下がり、サイト運営において大きな機会損失を産みかねません。

ユーザーの利便性を損なわないためにも、HTMLは誤りのないように正しい記述をしましょう。

HTMLの規格

HTMLには「HTML4」「XHTML」「HTML5」など、様々な種類があり、それぞれ特徴は異なります。

例えば、XHTMLは幅広いWebブラウザに対応できますが、HTML5は一部ブラウザによっては非対応です。その代わり、HTMLで動的な表現ができるといったメリットがあります。

現在は最新バージョンのHTML5がよく使われているため、特別な事情がなければHTML5を選ぶようにすると良いでしょう。

HTMLファイルの作り方

HTMLファイルを作成するには、ファイル名の末尾に「.html」という拡張子を付けて保存する必要があります。

この手順を行えば、HTMLファイルであることをコンピューターに認識してもらえます。具体例は次をご覧ください。

例：index.html

HTMLの基本の書き方

HTMLは、要素と属性で成り立ちます。

要素とは、HTMLを構成する基本的な単位のことで、titleタグやh1タグなど100以上の種類があります。

例えば、titleタグという要素で指定の文章を囲むと、「タイトル」の役割を担う文章として表示させることができます。

▼要素の例

<title>タイトル</title>

上記の例のように、一番最初の要素を開始タグと呼び、スラッシュがついている最後の要素を終了タグと呼びます。

基本的に要素は、開始タグと終了タグでワンセットと覚えておきましょう。

しかしながら、要素の中には終了タグがないものも存在します。

▼終了タグのない要素の例

<br>
<img>

<br>は改行を表す要素で、<img>は画像を表示させる要素です。

どちらも終了タグはなく、開始タグだけで完結します。

しかし、img要素をただ記述しても画像は表示されません。画像を表示させるには、img要素に属性を付与する必要があります。

属性とは、HTMLの要素に性質を与える役割を持つものです。

例えばimg要素に与えるalt属性は、それがどんな画像なのかをテキストで補足し、意味を与える役割を持ちます。

<img src="画像URL" alt="〇〇">

img要素のように、要素の中には属性とセットで記述する場合もあります。

全ての要素と属性を暗記する必要はありませんが、概要と仕組みは覚えておくようにしましょう。

SEOにおける重要なHTMLタグ

SEO対策においては、テキストの意味が検索エンジンのクローラーに正しく伝わるような、シンプルで無駄のないHTMLになっていることが重要です。

下記で解説するタグの特徴や記述方法をしっかり理解して、Webページ作成に活かしてみましょう。

• aタグ
• metaタグ
• titleタグ
• hタグ
• imgタグ

aタグ

aタグは、リンクを表すタグのことです。

aタグでテキストや画像を囲むことでURLを埋め込めるようになり、外部サイトや内部ページにユーザーを誘導できるようになります。

ちなみに、aタグでリンクが設定されているテキストをアンカーテキストと言います。aタグの記述例は次をご覧ください。

<a href=”https://www.willgate.co.jp/promonista/”>プロモニスタ</a>

上記の記述例のように該当のテキストをaタグを囲むと、Webページ上ではアンカーテキストとして「プロモニスタ」と表示されます。

アンカーテキストを適切な場所に設置すれば、ユーザー自身が興味を持つページに誘導できるようになり、ユーザーの利便性の向上が期待できます。

またアンカーテキストは、検索エンジンのクローラーに適切な情報を伝える役割もあるので、設置すればインデックス促進にもつながります。

つまり、適切なアンカーテキストを設置することは、SEO対策に効果的です。

アンカーテキストについてもっと詳しく知りたい方は、下記の記事をご覧ください。

アンカーテキストってSEO対策に効果あるの？具体的な書き方を解説

metaタグ

metaタグとは、Webサイトの情報を記載するタグのことです。

検索エンジンのクローラーに、Webサイトで扱っているテーマや発信している情報を伝える役割を担っているため、適切な記述は内部SEO対策に効果的です。

例えば、meta discriptionは、検索結果のタイトル下にWebページの情報を簡潔に表した内容を表示させるmetaタグです。直接的なSEO効果はありませんが、クリック率向上が期待できるため、間接的にSEOへ良い影響を与えることができます。

metaタグの記述例は次のとおりです。

<meta name=”keywords”content=”〇〇”> 　

<meta name=”description” content=”〇〇”>

他にも様々な種類のmetaタグがあるため、より詳しく知りたい方は下記の記事をご覧ください。

メタタグとは？SEO対策に重要なタグの種類や書き方を詳しく解説
meta descriptionとは？SEO効果や書き方、文字数を解説！

titleタグ

titleタグは、ページのタイトルを表すタグのことです。

SEO対策で最も重要視されているタグの1つで、titleタグにキーワードが含まれているかどうかで検索順位が大きく変わります。

また、ユーザーはタイトルを見てそのページを閲覧するかどうか判断しています。そのため、ただ狙っているキーワードを詰め込むのではなく、検索ニーズとマッチしているtitleタグを作ることが重要です。

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

<title>タイトルを記述する</title>

titleタグの書き方や記述例についてより詳しく知りたい方は、下記の記事をご覧ください。

最適なタイトル文字数とは？SEOに効果的なタイトルの作り方を解説
SEOに効果的なtitle（タイトル）タグの記述方法とは？

hタグ

hタグとは、見出しを表すタグのことです。titleタグほどではありませんが、hタグもSEOに良い影響を与えます。

hタグに対策キーワードを含めることで、ページ内容とキーワードの関連性を検索エンジンに正しく伝えることができるため、SEO評価の向上が期待できます。

また、適切なhタグを記述することで、ユーザー視点でどの章に何の情報が記述されているか一目で判断できるため、ユーザーの利便性向上につなげられます。

つまり、hタグはユーザーと検索エンジンの両者にメリットがあるタグです。

hタグはh1からh6まで6つのタグがあります。記述例は次をご覧ください。

• <h1>見出し</h1>
• <h2>見出し</h2>
• <h3>見出し</h3>
• <h4>見出し</h4>
• <h5>見出し</h5>
• <h6>見出し</h6>

より詳しくhタグの活用方法について知りたい方は、下記の記事をご覧ください。

hタグとは？役割や記述方法を知って見出しタグを使いこなそう
h1タグとは？SEO効果と5つの使い方を解説

imgタグ

imgタグは、画像を表すタグのことです。

正確には、imgタグだけで画像を表示させることはできません。「HTMLの書き方」の章でも解説したとおり、画像を表示させるには「src属性」に画像ファイルのパスを入力する必要があります。

<img src=”画像のファイルパス” alt=”画像内容”>

imgタグを設定することで、検索エンジンからの直接的な評価向上は見込めないものの、上記の例のようにタグ内にalt属性を設定することで、検索エンジンに画像の意味を伝えられます。

つまり、画像検索で上位表示できるようになります。

画像検索で上位表示できれば、当然SEOにも良い影響を与えますので、できる限りalt属性は記述するようにしましょう。

alt属性を記述するメリットとは？SEO効果や記述のコツを解説

まとめ

本記事では、HTMLの意味やSEOで重要である理由、HTMLタグの書き方について解説しました。

HTMLとは、「Hyper Text Markup Language」の略称で、Webサイト作成する際に用いられるマークアップ言語です。

HTMLが適切に記述できていないと、検索エンジンのクローラーがページの情報を理解できず、正当な評価を受けることができません。それではどんな高品質なコンテンツを作っても意味がないため、まずは正確なHTMLを記述し、SEO対策の土台を固める必要があります。

本記事で解説した、HTMLの書き方やSEO対策で重要なHTMLタグをしっかり理解し、正当なSEO評価を受けられるようにしましょう。