アダムテクノロジーズ運営チーム

SEOに最適化した8個のHTMLコーディング【注意点も解説】

SEO診断

SEOに最適化した8個のHTMLコーディング【注意点も解説】のサムネイル

SEOで上位表示を獲得するためには、検索エンジンにコンテンツの内容を分かりやすく伝えなければなりません。そのためには、SEOに最適化したHTMLコーディングを行うことが大切です。

昨今、GoogleのロボットはHTMLコーディングにエラーがあったとしても、コンテンツの内容は理解できると言われています。しかし、競合のコンテンツ以上に適切に評価してもらうためには、いくらロボットが内容を理解できると言っても、最適化するに越したことはありません

そこで本記事では、HTMLコーディングの概要を解説するとともに、SEOに最適化したHTMLコーディングを8つご紹介します。また、HTMLコーディングと併せて重要な構造化マークアップに関しても解説しますので、ぜひ参考にしてください。

目次 プラスマーク 表示 プラスマーク 閉じる

HTMLコーディングとは

まずは、HTMLコーディングの概要からご説明します。HTMLコーディングとは、見出し(h)タグやtitleタグといったマークアップ言語を正しく記載することです。Webサイトや記事コンテンツは、その大半がHTMLと呼ばれるマークアップ言語で構成されています。

検索エンジンは、これらのマークアップ言語に記載されている内容を中心にコンテンツを評価するため、適切にHTMLコーディングをすることで、SEO評価が高まる可能性があります

一方で、たとえば見出しではないテキストにhタグを記述してしまったり、タイトルでないテキストにtitleタグを配置してしまったりすると、検索エンジンに正しく評価してもらうことができません。だからこそ、適切にコンテンツを評価してもらうために、正しくコーディングすることが大切であると理解しておきましょう。

SEOに最適化したHTMLコーディング8選

ここまで、HTMLコーディングの概要を解説しました。ここからは、SEOに最適化したHTMLコーディングを8つご紹介します。

  • title
  • meta
  • h
  • p
  • alt
  • li
  • a
  • canonical

それぞれ順番に見ていきましょう。

titleタグ

titleタグは、Webサイトやコンテンツのタイトルを決める際に使うタグです。titleタグに設定した文言が検索結果に表示される仕組みとなっており、32文字前後での設定が最もSEOに効果的だと言われています。また、Googleのクローラーもtitleタグに書かれている内容を重要視しているため、検索順位を上げるためにも確実に設定するべきタグと言えるでしょう。

metaタグ

metaタグはdescriptionやkeyword等の、コンテンツの内容を補足するためのタグです。タグ内に、コンテンツで狙っているキーワードを含めた情報を記述します。特に、descriptionは検索結果のタイトル下に表示されるため、クリック率やユーザーの理解を深める要素として重要です。

hタグ

hタグは、コンテンツに見出しを作る際に使うタグです。h1〜h6まで存在し、h1はコンテンツ内に1つに留めるのが良いとされています。

適切なhタグの構造

hタグは、適切に記述しなければ正しいSEO評価を享受できません。具体的な使い方は下記のとおりです。

テキスト

テキスト

テキスト

テキスト

テキスト

Googleは、hタグに書かれているテキストをコンテンツの内容を理解する際に役立てているため、hタグにもSEOで狙っているキーワードを含めることが重要です。

h1を使用したら次はh2、h2を使用したら次はh2もしくはh3と、1つ先の数字へと飛ばす使い方をしてはいけないと言われていました。 たとえば「h2→h4」のようにです。

しかし、最近Googleによると上記の例のように「h2→h4」と利用してもSEO的には大きな影響を受けないと公表しました。 h1を使用したら次はh2、h2を使用したら次はh2もしくはh3といった様に使うことが望ましいですが、h1タグを大量に使うといった明らかにおかしなコーディングをしなければ問題ないでしょう。

pタグ

pタグは、文章に段落を作りたい場合に使うタグです。段落を作ることによって視認性が高まり、離脱率や直帰率を抑えられることに繋がります。なお、改行時に使用する「br」タグとは種類が異なります。brはあくまで改行であり、pタグは段落を作る際に使用するため、pタグを正しく使うことで検索エンジンが文章の内容を理解しやすくなります。

altタグ

altタグは、画像の意味を検索エンジンに伝えるために使うタグです。画像を表示する際に必要となるimg要素の1つであり、画像が何らかの原因で表示されない場合は、altタグに記述されたテキストが代替えとして表示されます。また、画像にリンクを貼る際はアンカーテキストと同じ役割を果たしたり、画像検索の場合はaltに記述されたテキストが表示されたりします。

li(リスト)タグ

li(リスト)タグは、箇条書きを作る際に使用するタグです。リストタグを使うことで、pタグよりも重要なテキストであると検索エンジンが認識すると言われています。なお、liタグを使う際は、「ul」タグで囲めば通常の箇条書きになり、「oll」タグで囲めば数字付きの箇条書きになることが特徴です。

aタグ

aタグは、別のコンテンツへの誘導を図る場合に使うタグです。内部リンクを貼る際は<a href=”リンク先のURL”>テキストであり、外部リンクを貼る際は<a href=”リンク先のURL” target=”_blank”>テキスト</a>を使用します。

canonicalタグ

canonicalタグは、Webサイトの中で重複コンテンツが発生してしまった場合に、どのページを最も評価してほしいかを検索エンジンに伝えるタグです。1つのキーワードに対して、複数のコンテンツがインデックスされるとSEOに悪影響をもたらすため、SEO評価を1つに集中させたい場合に記述します。

SEOでは構造化マークアップも重要

ここまで、SEOに効果的なHTMLコーディングを解説してきました。それらを踏まえた上で、SEOでは構造化マークアップも重要です。構造化マークアップとは、Googleのクローラーに対して、自社のコンテンツを適切に理解してもらうための記述方法のことです。構造化マークアップを実装することで、検索エンジンが言葉の意味まで詳細に理解できるようになるため、SEOでも良い評価を得られる可能性が高まります。

ただし、構造化マークアップも重要ではあるものの、それは適切にHTMLコーディングができている前提の話です。したがって、まずは上述したHTMLコーディングを最適化させることから始めましょう。

まとめ

本記事では、HTMLコーディングの概要や、代表的なコーディングの種類を解説しました。検索エンジンに内容を正しく理解し、適切に評価してもらうためには、コーディングも最適化させることが大切です。まずは、本記事でご紹介したコーディングがすべて完璧であるかを見直し、今後も抜け漏れのないようコーディングしてみてはいかがでしょうか。

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

【弊社実績】

マイナビ
大江戸温泉
VOYAGE MARKETING
あゆみトラストホールディングス
サムシンググループ
日本教育クリエイト
PARIS MIKI
アイペット損害保険株式会社
M3carrier
全日本不動産協会
桑沢デザイン

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。