HTMLとはプログラミング言語の1つです。

HTMLによってWebページに記載されている情報の構造（文章構成）をブラウザや検索エンジンが把握できるようになります。

上手に使うことでユーザビリティが高まるためSEO上も無視できない要素といってよいでしょう。

まずはHTMLを正しく記載するポイントを押さえ、titleタグをはじめ重要なタグの活用法を確認してみてください。

HTMLタグの基本を解説

HTML

HTMLとはブラウザが文章構成を把握できるようにするプログラミング言語です。

Web上の文章はHTMLによってタイトル・見出し・本文などいくつかのセクションに分類されます。

また、改行する箇所や太字で表示する箇所などもHTMLでしるしをつけておくことで意図した通りに表現できるようになります。

つまり、HTMLとは文章の構成について書き手の意図をブラウザが把握できるようにするための共通言語といってもよいでしょう。

HTMLはSEO的なノウハウにかかわらず正しく書くことが求められますが、その理由もHTMLが共通言語だからです。

HTMLが間違った記載になっているとブラウザも書き手の意図通りの表示を返すことができません。

それが原因でユーザーに間違った認識を与えてしまうと、ユーザビリティの低下リスクにつながってしまいます。

 

SEO対策の事例はこちら

 

HTMLタグはなぜSEO対策において重要なのか

SNS

HTMLがSEOにおいて重視される理由も検索エンジンがユーザビリティを重視しているからです。

検索エンジンはユーザーにとって役立つページに高評価を与えます。

つまり、SEO対策とはユーザーにとって役立つ情報を正確に素早く提供することが基本となるのです。

ユーザーが情報を正確に早く把握するためにはわかりやすく工夫した文章構成をWebブラウザ上で表示させないといけません。

そのため、書き手の意図をブラウザに正しく伝えるための言語であるHTMLが重要です。

また、検索エンジンはHTMLの構造や文法がシンプルなページを好む特徴を持っています。

HTMLのミスがなく読みやすい方がページ内容を正確に把握しやすくなるからです。

検索エンジンがページ内容を正確に把握できればユーザーもページの記載内容を正しく閲覧できるようになります。

そのため、ページに記載された情報を求めているユーザーとのマッチング可能性も高まりユーザビリティ向上が期待できます。

 

ワンポイント
HTMLでページの文章構成をシンプルにミスなく記載することはユーザビリティ向上によるSEO効果が期待できます。

HTMLタグを正しく設定するためのポイント

HTMLの文法はGoogle HTML/CSS Style GuideとしてWeb上で公開されています。

正しく書くコツとして正しい文法に則ってミスがないようにすることが重要です。

必ず基本の文法に立ち返りながらテンプレートに則って記載しましょう。

イージーミスを未然に防ぐエラーチェッカーツールもぜひ、検討してみてください。

基本的なテンプレートを活用する

男性,フレーム

HTMLでページを正しくブラウザ上に表示するためには基本のテンプレートがあります。

＜基本テンプレートに使用するタグ・要素とその順番＞

  1. DOCTYPE：ページの記載に使用するHTMLのバージョンを指定
  2. html：プログラミング言語としてHTMLを使用していることを示す
  3. lang：ページを表示する言語・音声読み上げ言語を指定
  4. head：ページ全体の仕様に関して記載されている範囲を指定
  5. meta charset：文字化けを防ぐためにWebページの記載内容が書かれたテキストエディタの文字コードを指定
  6. title：ページのタイトルを指定
  7. body：Webブラウザ上に表示される部分の範囲を指定する

テンプレートは基本的にどのようなページであっても使えるものなので、必要に応じてコピー＆ペーストしても構いません。

ただし、HTMLについての深い知識を求めるのであれば手打ちできるレベルでの習得をおすすめします。

ルールを確認する

HTMLはプログラミング言語なので、当然文法に基づいた記載が求められます。

HTMLの文法については「Google HTML/CSS Style Guide」としてWeb上で公開、バージョンアップの度に都度更新されます。

日本語訳されているWebページもあり、もし自社内でHTMLのノウハウを蓄積するなら避けて通れないページといえるでしょう。

チェックツールを活用

男性,チェックリスト

HTMLはミスなく正しい記載が求められます。

特に入力ミス・誤字脱字など事前のチェックで防げるイージーなミスをしないことが重要です。

例えばHTMLタグは半角の<>ではさみ、終わりを示すタグにはスラッシュを記載します。

実はこのスラッシュの記載漏れや終わりを示すタグの記載漏れが意外に多いイージーミスです。

しかし、1つのWebページ分だけでもHTMLの記載はかなり膨大なもの。目視ですべてをチェックするのは工数上も現実的ではありません。

そこでHTMLのエラーを自動検出してくれるツールを活用してみてください。

＜よく利用されるエラーチェッカーツール＞

  • Another HTML Lint
  • HTMLエラーチェッカー
  • Unicorn など

中にはブラウザの拡張機能として無料で使えるチェックツールもあります。

業務上必要になる頻度や利用する人数なども検討しながら自社にあったツールを導入してみましょう。

SEO対策に効果的なタグの種類

男性,HTML

HTMLのタグは一部を除き、直接SEOに影響するわけではありません。

ただしSEO最適化のために見逃せないタグはあります。
＜SEO上無視できないタグ＞

  • titleタグ
  • metaタグ（meta description）
  • リンクタグ（aタグ）
  • 見出しタグ（hタグ）
  • リスト、箇条書きタグ（ulタグ・olタグ）

HTMLタグはユーザーがアクセスしやすい環境を整え、検索エンジンにユーザビリティの高いページとして認識させるためのものです。

結果としてクリック率の上昇などにつながり多くのユーザーに認められるようになるためSEO上無視できないのです。

 

SEO対策の事例はこちら

 

titleタグの設定のポイント

titleタグはその記事のタイトルや発信者の名前などを示します。

ブラウザでページを開いた時、タブに記載されている文言もtitleタグの文言です。

GoogleがSEOに影響のある要素として認めているタグなので、設定のポイントをしっかり把握しておきましょう。

対策キーワードはタイトル前半に配置する

SEO

titleタグ内の対策キーワードの位置がSEOに直接影響するわけではありません。

しかし、できるだけ前に設定することでユーザビリティ向上の可能性が高まります。

例えば対策キーワードがSEOツールだった場合、考えられる文言のパターンは下記2つです。

  1. SEOツールならまずGoogle Search ConsoleとGoogleアナリティクスに注目
  2. Google Search ConsoleとGoogleアナリティクスは2大SEOツール

ユーザーのSEOツールについての知識がビギナーレベルの場合そもそもSEOツールとは何か？という情報を探しているはずです。

そのためGoogle Search ConsoleもGoogleアナリティクスも知らない可能性が想定されます。

そこで重要なのがキーワードの位置です。

2のタイトルの場合、SEOツールに関連するページかどうか判断するのが1よりも若干遅れます。

時間にすると1～2秒の差かもしれませんが、ユーザビリティ向上を図るならその1～2秒すらも無駄にできません。

内容をイメージできるタイトルにする

titleタグの文言はおおよその内容を具体的にイメージできるのがベストです。

検索エンジンで情報を探すユーザーは1分1秒でも時間が惜しいと考えています。

そのため、求めている情報があるかどうかについては検索結果ページの概要だけで判断します。

その時点で目当てのページでないと判断すればクリックすらしません。

だからこそ、ページの記載内容がユーザーの目的に即しているかタイトルからイメージできるようにしておく必要があります。

文字数は30文字程度におさめる

文字数をできるだけ30文字以内におさめる理由は検索結果ページにどう表示されるか、というのが理由です。

実は検索結果ページに表示されるタイトルの文字数は30文字程度しかありません。

実際にデジマクラスに掲載されている記事で検証してみた結果も前半部分22～29文字程度でした。

そのため、30文字程度の文字数で何が書かれているかがわからないとユーザーがクリックするべきページかどうか判断できません。

もし30文字を超えてしまう場合でも前半30文字目まででページの記載内容をおおよそつかめるようにしましょう。

ページごとのタイトルにオリジナリティをつける

男性,ビジネス

ページごとにタイトルのオリジナリティが求められる理由は検索エンジンに重複コンテンツと認識されるリスクを回避するためです。

重複コンテンツとみなされてしまうと最悪の場合検索順位の下落につながります。

特に、フォーカスしているポイントは異なるものの文章構成や登場する語彙が似通ってしまうトピックは要注意です。

構成（HTML構造）や頻出語彙が似ているものの、要点が違うことを検索エンジンに認識させるにはタイトルで差をつけてみましょう。

それぞれのページが異なるトピックに焦点をあてた別ページであることをtitleタグで宣言しておくと効果的です。

 

ワンポイント
理想的なtitleタグ内文言はキーワードを前半に配置し、30文字以内でオリジナリティ・具体性があるものです。

metaタグの設定のポイント

metaタグとはheadタグ内に記載されているページ内容を端的に表すためのタグです。

SEOと直接関係するわけではありませんが、ユーザビリティ向上に欠かせません。

特にmeta descriptionは検索結果ページに表示される文言を記載する重要なタグとなります。

キーワードや書き方などユーザーにクリックしてもらえる工夫を確認しておきましょう。

対策キーワードを盛り込む

meta descriptionタグやmeta keywordタグに直接的なSEO効果はありません。

例えば、meta keywordに検索順位を上げたいキーワードを設定したからといって検索順位が上がるわけではないのです。

しかし、検索エンジンはmetaタグ内に設定されているキーワードもページ内容を把握する手がかりにします。

そのため、metaタグ内にキーワードを含めることでどのようなページ内容かを検索エンジンやユーザーに伝えやすくなります。

ページごとに内容紹介文を設定

男性,紹介

meta descriptionにページの要旨を記載する理由は、検索結果ページにその文章が表示されるからです。

ユーザーは検索結果ページに表示されたtitle・meta descriptionの記載でおおよそのページ内容を確認します。

つまり、ユーザーへ探している情報がページ内にあるかどうかを知らせるためにはmeta descriptionの記載が不可欠なのです。

ユーザーの興味を引く文言を使う

男性,前のめり

ユーザーは検索結果ページのmeta description記載内容を見てページをクリックするかどうか判断します。

ポジティブに考えるとmeta descriptionでユーザーの興味喚起ができればクリックしてもらえる確率を高められるのです。

ただし、興味喚起といっても単にキャッチーにしたりインパクトのある文言にすればいいというわけではありません。

このページは誰向けに書かれていてどのような情報を得られるのか、を記載するのが大事です。

 

ワンポイント
meta descriptionの記載内容は検索結果ページに表示され、ユーザーがクリックするかどうかの判断基準になります。

hタグの設定のポイント

hタグとは見出しタグのことでh1からh6まで設定できます。

hタグの最も重要な役割はページに記載されている情報の階層構造をブラウザや検索エンジンに伝えることです。

キーワードを盛り込みながらシンプルに順番よく伝えることでユーザーがページをクリックするよう促します。

ユーザーに「クリックしたい！」と思わせるポイントの中でも特に注目したいのが以下の3つです。

h1タグには対策キーワードを入れよう

検索結果

h1タグはそのページの最上部に表示され、ページ全体の内容を示します。

ユーザーにどのような内容が記載されているページかを伝える重要なタグです。

そのため、h1にも当然対策キーワードを入れる必要があります。

理由はtitleやmeta descriptionに対策キーワードを入れるべき理由と同様です。

例えば、SEOツールについての情報を探している人はページの表題にSEOツールが含まれているかどうか確認します。

含まれていれば自分が探している内容があるかもしれないと判断し、なければより確率の高そうな別ページから確認します。

ユーザーはより早く情報を得るためにh1についても対策キーワードの有無をシビアに見ている可能性が高いです。

hタグの順番に注意する

順位

hタグはhの次に来る数字が大きくなればなるほど小さな分類のセクションであることを示します。

実はこのhタグの順番も重要な設定の1つです。

例えばこのページではこれまでHTMLの概要について説明した後、SEOとの関係や各タグの詳細について説明してきました。

HTML初心者が読むことを考えた場合、HTMLとは何かをある程度把握していないとSEOとの関係を理解しにくいからです。

もし、各タグの詳細から始まる構成だったならそもそもHTMLとは？という疑問に耐えながら読み進めなければなりません。

それはユーザーにとってストレスであり、ユーザビリティ向上を重視するSEOの考えとは乖離してしまいます。

SEOを意識したhタグの設定は大きなカテゴリから小さなカテゴリの説明へ移っていくように順番にも配慮しましょう。

h2・h3タグの多用を避ける

SEOを意識しユーザビリティの高いページにするならh2・h3タグは必要不可欠な分にとどめシンプルな構成にしましょう。

検索エンジンは1つのページにつき1テーマに絞ると高評価を下す傾向があります。

ユーザーが知りたい情報を早く届けるため情報をピンポイントに絞ったページが好まれるからです。

h2・h3タグが多すぎると関連トピックの中で枝葉にあたる部分がどうしても多くなってしまう傾向があります。

文章構成も複雑になりやすいため、まずは幹の部分にあたる情報をしっかり把握できるページを目指しましょう。

 

ワンポイント
hタグは検索エンジンにページの構造を伝えるだけでなく、ユーザーの直感的な理解も促します。

SEO対策を意識したコーディング法を紹介

コーディング

SEO対策を前提としたコーディング方法でさらに活用したいHTMLタグがあります。

それが下記の3つです。

  • アンカータグ
  • alt
  • リストタグ、箇条書きタグ

＜アンカータグ＞

アンカータグ（aタグ）は他ページへのリンクを貼る時に用いられます。

例えばSEOのメリットについて知ったユーザーの中にはSEOのデメリットについて興味を持つ人もいるでしょう。

その際に同ページ内にあるSEOのデメリットについて書かれたページと相互にリンクしていればユーザビリティが高まります。

また、記載内容の根拠として信頼できるサイトからの引用や外部リンクが貼られているページはユーザーからの信頼獲得に役立つでしょう。

＜alt＞

altは主に画像を添付するimgタグに付与し、どのような画像か説明する文言を記載します。

何らかのトラブルでページが表示されない場合などに表示されてるのがaltに記載されている文言です。

また、視覚にハンディキャップがある人は音声認識機能を用いて検索エンジンやWebサイトを利用します。

そのような人にどのような画像が使われているか知らせるのもaltの役割です。

＜リストタグ＞

リストタグ（ul・olタグ）はユーザーへ内容をシンプルに伝えられる箇条書きタグです。

複数のポイントを簡潔に伝えるならul（中黒点）、何らかの手順や順位を伝えるならol（ナンバリング）が向いています。

上手に使用すればユーザーの理解をよりスムーズに促し、ユーザビリティ向上につながるでしょう。

また、クリック率の大幅アップが期待できる強調スニペットはリストタグを使用するページが使われやすい傾向です。

HTMLタグでのSEO対策で悩んだら

男性,虫眼鏡

HTMLの知識はページの構造を検索エンジンにわかりやすく伝え、ユーザーの理解をスムーズに促すために欠かせません。

しかしHTMLとSEOを関連づけたノウハウを持っている人はまだ少ないのが現状です。

特にSEOノウハウについてはGoogleの動向をつぶさにチェックする必要があり、中小企業ほど人材確保が困難となっています。

そこで検討してほしいのがWebマーケティングコンサルタントによるサポートです。

Webマーケティングコンサルタントは企業のWebマーケティングをトータルでサポートできるノウハウを持っています。

当然SEOについても例外ではなく、最新の情報をもとにコーポレートサイトやオウンドメディア活用について有益な提案が可能です。

HTMLでできるSEO適正化についてもノウハウに基づいてチェック・アドバイスできますので気軽に相談してみてください。

 

SEO対策の事例はこちら

 

まとめ

男性,プログラミング

HTMLはページの構造（文章構成）を検索エンジンに伝えるためのプログラミング言語です。

ユーザビリティ向上につながるタグ・使い方のポイントもあり、SEO上も見逃せないプログラミング言語といえるでしょう。

まずは分かりやすくシンプルでミスのないHTMLの記載から始め、ユーザーにクリックしてもらえるページを目指してみてください。