SEO無料相談に申し込む
まずは電話で相談する
SEO対策においては、適切なHTMLコーディングも重要な手段のひとつです。
しかし、何に気を付けてコーディングすべきか、どのようなHTMLを書けばよいのかわからない方も多いのではないでしょうか。
そこで本記事では、SEO対策に有効なHTMLコーディングのポイントや、覚えておきたいHTMLタグの書き方を紹介します。
これからコーディングにも力を入れてSEOに強いサイトを作りたい方は、ぜひ参考になさってください。
目次
SEO対策でよく聞くHTMLタグとは
HTMLタグとは、HTMLを構成する要素のことです。100種類以上あり、下記のように異なる意味を持ちます。
|
HTMLタグ |
意味 |
|
<p> |
段落 |
|
<img> |
画像 |
|
<h2> |
中見出し |
|
<a> |
ハイパーリンク |
Googleのクローラーは、HTMLタグを参照して文章の意味を汲み取ります。そのため、コンテンツ作成を作成する際は、HTMLタグごとの意味を理解して、適切に使用することが大切です。
意図どおりにマークアップを行えば、検索エンジンに内容が伝わりやすいコンテンツを作成できます。
HTMLの概要や使用するタイミング
HTMLは「Hyper Text Markup Language」の略称で、Webサイトを作成するためのマークアップ言語です。Webページの構成や見出し・段落などのテキスト情報を、コンピューターに理解させるために使用します。
HTMLをある程度いい加減に記述しても、Webページは表示可能です。しかしコンピューターは、人間のようにテキストや画像を目で見て判別できません。
そのため、HTMLタグで要素に正しく意味づけをしないと、コンピューターに内容が伝わらなくなります。そのため、タグごとの意味を理解し、人間とコンピューターの両方にわかりやすいマークアップを施すことが大切です。
これを「セマンティックコーディング」と呼び、現代のWeb制作では必須の項目となっています。HTMLはWebサイトを制作するうえで必須の要素なので、必ず理解しておきましょう。
HTMLとCSSの関係
HTMLで作れるのは、Webページの構造までです。文字のサイズを大きくする、色を変えるなどの装飾はできません。そのままでは、人間にとって見づらく、個性のないページになります。
そのため、HTMLはCSSと組み合わせて使います。CSSとは「Cascading Style Sheets」の略称で、Webページを装飾するためのスタイルシート言語です。
CSSはHTMLの文字や背景、画像など、さまざまな要素を装飾するために使用します。色やサイズを変えたり、要素に動きを出したりと、記述次第であらゆる変化を加えられます。
Webサイトの見た目は、ユーザーの体験や情報の視認性を左右する重要な要素です。そのため、CSSもSEO対策における重要な要素であるといえます。HTMLとCSSをセットで理解することで、よりセマンティックなWebサイトを構築できます。
CSSはHTMLファイルに直書きしたほうが良い？
CSSは、下記3つの方法でHTMLに反映させられます。
|
読み込み方法 |
特徴 |
例 |
|
style属性を使用 |
HTMLタグに直接記述する |
<p style=”width: 100%”> |
|
styleタグを使用 |
HTMLに直接記述する |
<style>p { width: 100% }</style> |
|
外部参照 |
外部のCSSファイルを読み込む |
<link rel=”stylesheet” href=”style.css”> |
このうち、style属性とstyleタグを使用する方法は、HTMLファイルに直接CSSを記述できます。外部からの読み込みを必要としないため、ページの表示速度が速くなる、HTMLとの関係性がわかりやすいなどのメリットがあります。
ただし、CSSの直書きには下記のようなデメリットもあるため、基本的には外部参照がおすすめです。
- 編集がしづらい
- 管理しづらい
- 作業工数が増える
直書きはHTMLファイルごとに編集が必要なため、記述量も膨大です。修正があった際には、該当箇所をすべて変更する必要があるなど、手間もかかります。
外部参照の場合、CSSファイルを使いまわせます、作業を簡略化でき、管理もしやすくなるため、なるべく直書きは控えましょう。
HTML5はすでに廃止されている
HTML5は、セマンティックコーディングを実現するために調整された、HTMLの規格です。現在でもSEOへの重要性から、HTML5を推奨するコンテンツをよく目にしますが、実はすでに廃止されています。
現在推奨されているHTMLの規格は、「HTML Living Standard」です。HTML5をベースに開発された仕様で、ページ内の要素への意味づけのバリエーションが増えました。
HTML5と基本的な仕様は変わりませんが、追加・削除されたタグや要素が異なります。またHTML5の廃止に伴い、HTMLの管理団体が「W3C」から「WHATWG」に移っているため注意が必要です。
担当者は基本仕様を細部まで確認し、正しいコーディングができるようにしておきましょう。
SEO対策でHTMLが重要な理由
SEO対策では、下記2つの理由からHTMLが重要です。
- 検索エンジンにコンテンツの情報が正しく伝わるから
- ユーザーにコンテンツの情報が正しく表示されるから
HTMLを理解すれば、コンテンツの内容が正しく伝わり、施策の効果を最大化できます。それぞれ詳しく解説します。
検索エンジンにコンテンツの情報が正しく伝わるから
Googleの検索エンジンは、HTMLタグで要素の種類を判別します。そのため、適切なHTMLタグを使うことで、コンテンツの情報を検索エンジンに正しく伝えられます。
たとえば、ページのタイトルにはtitleタグが適切です。検索エンジンにコンテンツの主題を正確に伝えられます。
また見出しにhタグを使用すれば、ページの階層構造や重要なトピックを提示できます。加えて本文中にstrongタグを使えば、重要な文章を強調することも可能です。検索クエリとの関連性をアピールでき、上位表示される可能性が高くなるでしょう。
反対にHTMLを正しく扱えていないと、検索エンジンが意図どおりに内容を認識してくれません。リソースを割いても成果が得づらくなるおそれがあります。
施策の効果を最大化させるために、必ずHTMLを理解しましょう。
ユーザーにコンテンツの情報が正しく表示されるから
HTMLでページ内に階層構造を作ることで、コンテンツにメリハリが生まれます。可読性が上がるため、ユーザーの内容理解を助けることが可能です。
また、HTMLには下記のような装飾用のタグも存在します。
|
HTMLタグ |
役割 |
|
<b> |
太字にする |
|
<em> |
文字を斜めにする |
|
<span> |
CSSを反映させるために使う |
目立たせたい文章を太字にしたり、重要な文章を斜めにしたりすれば、ユーザーはより意図を理解しやすくなります。ユーザビリティが向上し、読了率が向上するでしょう。
ユーザーに良質な体験を提供すれば、滞在時間の増加や直帰率の低下が期待できます。間接的にSEOによい影響をもたらすため、ユーザーのことも考慮してHTMLをマークアップしましょう。
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対策に有効なタグ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”> |
SEO対策に効果的なHTMLタグ構文の例
以下は、SEO対策に有効なHTMLの構成のサンプルです。
|
<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″> <title>SEO対策のタイトルタグとは？最適化する方法を紹介</title> <meta name=”description” content=”SEO対策におけるタイトルの概要を網羅的に説明しています。これからSEO対策に取り組む方はぜひ参考にしてください。”> <link rel=”canonical” href=”https://example.com/seo-title”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta property=”og:title” content=”SEO対策のタイトルタグとは？最適化する方法を紹介”> <meta property=”og:description” content=”SEO対策におけるタイトルの概要を網羅的に説明しています。これからSEO対策に取り組む方はぜひ参考にしてください。”> <meta property=”og:url” content=”https://example.com/seo-title”> <meta property=”og:type” content=”article”> <meta property=”og:image” content=”https://example.com/image.jpg”>ï </head> <body> <h2>タイトルタグの重要性</h2> <p>タイトルタグは検索エンジン結果のクリック率（CTR）に直接影響を与えます…</p> <h2>タイトルタグの最適な書き方</h2> <p>効果的なタイトルタグを書くためには、以下のポイントに注意してください…</p> <h3>30文字前後に収める</h3> <p>タイトルは簡潔にすることが重要です。</p> <h2>タイトルタグのSEO効果を高める方法</h2> <p>SEO効果を高めるには、タイトルタグ以外にも以下の点に注意する必要があります…</p> </body> </html> |
titleタグやmetaタグを使用することで、ページの内容やOGPを明示的に伝えています。また、canonical属性でURL正規化を行い、viewport属性を指定することでレスポンシブデザインにも対応しています。またhタグを適切に使用し、コンテンツの階層構造を明示的にしました。
上記はあくまで一例なので、ページの内容に合わせて最適なマークアップを施しましょう。
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対策にお悩みの方は、お気軽にご相談ください。
