SEO対策においては、適切なHTMLコーディングも重要な手段のひとつです。
しかし、何に気を付けてコーディングすべきか、どのようなHTMLを書けばよいのかわからない方も多いのではないでしょうか。
そこで本記事では、SEO対策に有効なHTMLコーディングのポイントや、覚えておきたいHTMLタグの書き方を紹介します。
これからコーディングにも力を入れてSEOに強いサイトを作りたい方は、ぜひ参考になさってください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
SEO対策に有効なコーディングのポイント
コーディングはただHTMLを書けばいいわけではなく、ユーザビリティ、SEO両方の観点から、ある程度はルールに沿って行う必要があります。
そこで、まずSEOに強いコーディングを行うにあたって心がけたいポイントを2つ解説します。
サイト制作側、ユーザーともにメリットがあるので、詳しく見ていきましょう。
WHATWG基準に沿ったコーディングを行う
WHATWGとは、現代のHTMLのWeb標準を策定している団体です。「Web Hypertext Application Technology Working Group」の略称で、Apple・Mozilla・Operaなどの主要ブラウザの開発者らによって設立されました。
HTMLが生まれてから2021年1月までの間は、W3C（World Wide Web Consortium）という団体がWeb標準を定めていましたが現在は変更されています。
そのため、WHATWGの規格に則ってコーディングすれば、各ブラウザとの互換性が保証されます。同じWebサイトでも、もしブラウザや端末によってレイアウトなどの見え方が変わると不便に感じるでしょう。
しかし、互換性が保証されるとこうした問題は解消され、ユーザーの利便性が向上します。サイト制作する側にとっても、ブラウザによる見え方の違いに注意を払う必要がなく、負担軽減につながるのです。
セマンティックコーディングを意識する
セマンティックコーディングとは、Webサイトの文章構造をGoogleなどの検索エンジンに正しく理解させることを目的としたコーディングです。
例えば、会社名やサイトの名称などヘッダーに入れるべき情報にはheaderタグを使用。利用規約やプライバシーポリシーなど、フッターに入れるべき情報はfooterタグを使用します。
このように適材適所でタグをつけることで、ユーザーが見やすい適切な文章構造のサイトだと検索エンジンに認識してもらえるのです。
セマンティックコーディングにはHTML Living Standardの理解が必須
HTML Living Standardは、WHATWGが策定しているHTMLの仕様のことです。元々、W3Cが策定したHTML5がWeb標準とされていましたが、現在はHTML Living Standardに移行しています。
従来のHTMLでは、ソースコードに意味をもたせるのが難しい部分がありました。
しかしHTML Living Standardでは、sectionタグやarticleタグなど、コンテンツに意味を持たせるタグが多く用意されています。以下のようにコーディングすることで、検索エンジンに対してもコンテンツの内容を伝えられる仕様になったのです。
|
<!– 関連記事 –>
<section>
<h2>関連記事</h2>
<article>
<img src=”ブログのアイキャッチ画像①” alt=”アイキャッチ①”>
<a href=”ブログのURL①”><p>ブログのタイトル①</p></a>
</article>
<article>
<img src=”ブログのアイキャッチ画像②” alt=”アイキャッチ②”>
<a href=”ブログのURL②”><p>ブログのタイトル②</p></a>
<article>
</section>
<!– 関連記事ここまで –>
</body> |
SEO対策でHTMLコーディングが重要な理由
SEO対策においてなぜHTMLコーディングが重要なのでしょうか。それは、コーディングによって検索エンジンにWebサイトの情報や見やすさを伝えるためです。
検索エンジンはクローラーと呼ばれるプログラムであらゆるWebサイトのページを巡回しており、クローラーが得た情報で検索結果の表示順位を決定します。
クローラーは人間のように見たままのデザインでサイトを認識するわけではなく、HTMLコーディングの内容で判断します。
そのため、コーディングが正確でなければ、見た目のデザインがどれほど優れていても順位が上がりません。HTMLコーディングは、検索エンジンにサイト情報を正しく伝える手段と理解しておきましょう。
HTMLの概要や使用するタイミング
HTMLはプログラミング言語ではなく、マークアップ言語の1つで正式名称を「HyperText Markup Language」といいます。Webサイトの骨組みを作る役割を担い、JavaScriptやPHPのようにデータの処理や計算を行うプログラムは作れません。
反対に、JavaScriptやPHPはHTMLの力を借りないと、プログラムの結果をWeb上に表示できません。つまり、Webサイトやアプリを作る上ではHTMLが必須であり、ほとんどの部分で使用されているのです。
HTMLとCSSの関係
HTMLとCSSは必ずセットで使用します。
HTMLだけで作られたWebサイトは、情報が羅列されただけの簡素なものになります。そこで、CSSを使ってデザインを整える必要があります。
CSSの有無がSEOに悪影響を及ぼすことはないため、検索エンジンのことだけを考えるとHTMLだけでも問題はありません。
しかし、デザインが整っていないWebサイトはユーザーにストレスを与えるため、早期離脱につながります。間接的に評価が下がる恐れがあるため、HTMLとCSSは必ずセットで使いましょう。
CSSはHTMLファイルに直書きしたほうが良い？
CSSは、以下2つの方法で実装できます。
- HTMLファイルにCSSを直接書き込む
- 別で用意したCSSファイルをHTMLファイルに読み込む
どちらも間違いではないですが、HTMLファイルへの直書きは、以下のようなデメリットがあるためおすすめしません。
- ソースコードが長くなる
- 修正や管理が面倒になる
- 装飾の自由度が低い
ファイルを分けない場合、CSSの分だけソースコードが長くなります。検索エンジンがHTMLを読む手間も増えるため、クロールの効率を落とす可能性があります。
また、CSSファイルを用意したほうがデザインの自由度が広がり、管理も圧倒的に楽になるため、基本的に直書きは避けましょう。
HTML5はすでに廃止されている
SEOを意識したコーディングを行う際に、HTML5を推奨する文献などが多くあります。しかし、HTML5は2021年1月に廃止されており、現在ではHTML Living StandardがWeb標準となっています。
同時に、策定している団体もW3CからWHATWGに変更されています。
SEO対策に有効なタグ11選
HTMLコーディングを行うにあたってどのようなタグを使うべきなのでしょうか。ここでは、SEO対策に効果的なタグとその書き方を116種類紹介します。
- タイトル（titleタグ）
- ディスクリプション（descriptionタグ）
- 見出し（hタグ）
- アンカー（aタグ）
- リスト（liタグ）
- 画像（imgタグ・alt属性）
- メタタグ（metaタグ）
- テーブル（tableタグ）
- 引用（blockquoteタグ）
- 強調（strongタグ）
- URL正規化（relタグ・canonical属性）
それぞれの詳細を見ていきましょう。
タイトル（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> <h2>大見出し</h2> <h3>中見出し</h3> <h4>小見出し</h4> |
h1タグはタイトルと同義のため、各コンテンツにつき1つしか使えません。
h2以下のタグはある程度使い方が決まっています。
h2の直下にはh3、h3直下にはh4という階層構造にすることで文章にまとまりが生まれ、クローラーが巡回しやすくなるのです。
また、見出しにも関連キーワードを不自然でない程度に入れましょう。
アンカー（aタグ）
aタグは、コンテンツ内のテキストをリンク化するときに使用します。
| <a href=”https://〇〇〇/”>リンク名</a> |
情報の引用元や参照元として、公的機関や信頼できるサイトのリンクを貼ることで、SEO評価が上がります。同じサイト内の関連性が高いページに誘導するのも、ユーザーやクローラーの滞在時間が長くなり効果的です。
また、HTMLタグの間にリンク先の内容を簡潔に表す文言や対策キーワードを入れると、さらにSEO効果が期待できます。
リスト（liタグ）
liタグは、文章内で箇条書きを設定する際、以下のように使用します。
| <ul> <li>メリット①～～</li> <li>メリット②～～</li> <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コンサルタントが徹底解説
メタタグ（metaタグ）
metaタグは、Webサイトの情報を記載するタグのことで、指定する属性に応じて意味が変わります。
主要なメタタグを、下表にまとめました。
| 説明文 | <meta name=”description” content=”メタディスクリプション”> |
| OGP設定 | <meta property=”og:url” content=”ページURL”/> <meta property=”og:site_name” content=”サイト名”/> <meta property=”og:type” content=”ページタイプ”/> <meta property=”og:title” content=”ページタイトル”/> <meta property=”og:description” content=”サイトディスクリプション”/> <meta property=”og:image” content=”画像URL”/> |
| 文字エンコーディング | <meta charset=”utf-8″> |
| ビューポート設定 | <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
| クローラーへの指示 | <meta name=”robots” content=”noindex”> |
検索エンジンは、ページをクロールする際にメタタグの情報を確認して、ページの内容をある程度判断します。各属性の意味を理解し、適切に設定しましょう。
メタタグの詳しい設定方法については、以下の記事で解説しています。
テーブル（tableタグ）
tableタグは、ページ内に表を作成するタグです。tableタグの中に、以下5つのタグを使って情報を入力することで、表が完成します。
| タグ | 意味 |
| thead | 表の中の見出し列 |
| tbody | 見出し以外の情報 |
| tr | 単一の行 |
| th | 見出しとなる単一のセル |
| td | 見出し以外の単一のセル |
たとえば、上記の表をコーディングする際は以下のようになります。
|
<table> |
テーブルを使用すれば、ユーザーにも検索エンジンにも情報を端的に伝えられます。ページの利便性が向上するため、適切に使用しましょう。
引用（blockquoteタグ）
blockquoteタグは、他のWebサイトから文章や画像を引用する際に使用するタグです。適切な引用は、情報に説得力や安心感を与えられるため、ユーザーに信頼されやすくなります。
一方でblockquoteを使用せずに他サイトの内容を流用すると、コピーコンテンツの判定を受けて検索順位が下がる可能性があります。
そのため、必ず引用した部分は以下のようにコーディングしましょう。
|
<blockquote>
<p>引用したコンテンツ</p>
<p>引用:<a href=”引用元のURL”>引用元のタイトル</a></p>
</blockquote> |
なお強制ではありませんが、引用の際は引用元のサイトタイトルを記述し、リンクを貼るのがマナーです。また、一目で引用であることがわかるように、引用符を付ける、背景色を変えるなどの装飾をCSSで行いましょう。
上記を怠ると、引用元から著作権の侵害を訴えられる可能性もあるため、注意してください。
強調（strongタグ）
strongタグの役割は、検索エンジンに強調したい部分を伝えることです。
|
<p>SEO対策で最も重要なのは<strong>コンテンツの品質</strong>です。</p> |
コンテンツ内の重要なキーワードを検索エンジンに伝えられるため、戦略的に活用すればSEOに良い影響が期待できます。
また、一般的にstrongタグを使うと太字の装飾が当たるため、ユーザーに対しても重要な部分を認識させられます。
しかし、ユーザー向けの装飾が目的でstrongタグを乱用するのは厳禁です。強調されている箇所が多すぎると、本当に重要なポイントが検索エンジンに伝わらなくなるためです。視覚的に目立たせたいだけであれば、以下のいずれか方法をとりましょう。
- bタグを使う
- emタグを使う
- spanタグを使ってCSSで装飾する
URL正規化（relタグ・canonical属性）
relタグ・canonical属性は、linkタグに指定する属性で、URLを正規化する役割があります。URL正規化とは、重複コンテンツがある場合にページの評価を1ページに集約する対策のことです。
Webサイトには、以下のように内容は同じでもURLが異なるページが自動生成されることがあります。
- http://example.com/
- https://example.com/
上記の違いは、SSL化の有無だけで内容に違いはありません。
しかし、GoogleはURL単位でページを評価するため、集まった被リンクやアクセスしたユーザーの動きを個別に評価します。そのため重複しているページのheadタグ内に、以下のようにコードを記述しましょう。
| <link rel=”canonical” href=”評価を集めたいページのURL”> |
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億円以上。
