HTML文書構造とSEOの関係｜検索に強い構造の作り方
生徒
「HTMLの文書構造って、SEOに関係があるんですか?」
先生
「はい、とても重要な関係がありますよ。Googleなどの検索エンジンは、HTMLの構造を見てページの内容を理解しているんです。」
生徒
「検索エンジンがHTMLを見ているんですか?どうやって内容を判断しているんでしょう?」
先生
「検索エンジンのロボットがHTMLの見出しタグやセマンティックタグを読み取って、ページの構造や重要度を判断しています。正しい構造で作ることで、検索結果の上位に表示されやすくなりますよ。それでは詳しく見ていきましょう！」
1. SEOとは？初心者向けの基礎知識
SEOとは「Search Engine Optimization（検索エンジン最適化）」の略称で、GoogleやYahooなどの検索エンジンで、自分のWebサイトを上位に表示させるための施策のことです。例えば、あなたがケーキ屋さんのホームページを作ったとき、「東京 ケーキ屋」と検索した人に自分のサイトを見つけてもらいたいですよね。そのためにはSEO対策が必要になります。
検索エンジンは、インターネット上の膨大なWebページを巡回して情報を集める「クローラー」というロボットを使っています。このクローラーがあなたのWebページを訪れたとき、HTMLの構造を読み取って、「このページは何について書かれているのか」「どの情報が重要なのか」を判断します。つまり、HTMLの書き方次第で、検索結果での順位が大きく変わってくるのです。
2. HTML文書構造の基本要素
HTML文書には、ページ全体の構造を表す基本的な要素があります。これらの要素を正しく使うことが、SEO対策の第一歩となります。主な構造要素には、header（ヘッダー）、nav（ナビゲーション）、main（メインコンテンツ）、article（記事）、section（セクション）、aside（サイドバー）、footer（フッター）などがあります。
これらの要素は「セマンティックタグ」と呼ばれ、それぞれに意味があります。セマンティックとは「意味的な」という意味で、タグ自体が「ここはヘッダーですよ」「ここは記事の本文ですよ」と意味を持っているのです。昔のHTMLでは全てをdivタグで囲んでいましたが、現在はこれらのセマンティックタグを使うことで、検索エンジンがページの構造を理解しやすくなっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ケーキ屋さんのホームページ</title>
</head>
<body>
<header>
<h1>美味しいケーキ屋さん</h1>
<nav>
<ul>
<li><a href="#menu">メニュー</a></li>
<li><a href="#access">アクセス</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>本日のおすすめケーキ</h2>
<p>季節のフルーツを使った特製ケーキをご紹介します。</p>
</article>
</main>
<footer>
<p>Copyright 2024 ケーキ屋さん</p>
</footer>
</body>
</html>
この例では、header内にサイト名とナビゲーション、main内にメインコンテンツ、footer内に著作権情報を配置しています。このように役割ごとにタグを使い分けることで、検索エンジンが「どこに何が書かれているか」を正確に理解できます。
3. 見出しタグの正しい使い方とSEO効果
見出しタグ（h1からh6）は、SEO対策において最も重要な要素の一つです。h1タグはページ全体のタイトルを表し、h2以降はそれぞれのセクションの見出しを表します。見出しタグには必ず階層構造を持たせる必要があり、h1の次にいきなりh3を使うのは避けましょう。本の目次を思い浮かべてください。第1章があって、その中に第1節、第2節とあり、さらにその中に細かい項目があるような構造です。
検索エンジンは見出しタグを特に重視して読み取ります。h1タグには最も重要なキーワードを含め、h2、h3には関連キーワードを自然に盛り込むことで、検索結果での表示順位が向上します。ただし、キーワードを詰め込みすぎると逆効果になるので、自然な文章を心がけましょう。
<article>
<h1>東京で人気のケーキ屋さん完全ガイド</h1>
<section>
<h2>1. 東京のケーキ屋さんの選び方</h2>
<p>美味しいケーキ屋さんを見つけるポイントをご紹介します。</p>
<h3>素材にこだわったお店を選ぼう</h3>
<p>新鮮な卵や生クリームを使用しているお店がおすすめです。</p>
<h3>口コミ評価をチェック</h3>
<p>実際に訪れた人の感想を参考にしましょう。</p>
</section>
<section>
<h2>2. おすすめのケーキの種類</h2>
<p>人気のケーキをご紹介します。</p>
<h3>ショートケーキ</h3>
<p>定番の苺のショートケーキは外せません。</p>
</section>
</article>
この例では、h1が最上位の見出し、h2が大きなセクション、h3がその中の小見出しという階層構造になっています。このような構造は検索エンジンにとって理解しやすく、ユーザーにとっても読みやすいコンテンツとなります。
4. メタタグの重要性と設定方法
メタタグは、HTMLのhead要素内に記述する、ページの情報を示すタグです。ブラウザ画面には直接表示されませんが、検索エンジンがページの内容を理解するための重要な手がかりとなります。特に重要なのは、titleタグ、meta descriptionタグ、meta keywordsタグの3つです。
titleタグは検索結果に表示されるページのタイトルで、ユーザーがクリックするかどうかを決める重要な要素です。30文字程度で、ページの内容を的確に表すタイトルを付けましょう。meta descriptionは検索結果に表示される説明文で、120文字程度でページの概要を魅力的に書くことがポイントです。これらのメタタグに適切なキーワードを含めることで、検索順位の向上が期待できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>東京の美味しいケーキ屋さん｜手作りケーキ専門店</title>
<meta name="description" content="東京で人気の手作りケーキ専門店。新鮮な素材にこだわり、毎日焼きたてのケーキをご提供しています。誕生日ケーキやウェディングケーキも承ります。">
<meta name="keywords" content="ケーキ屋,東京,手作りケーキ,誕生日ケーキ,スイーツ">
</head>
<body>
<h1>東京の美味しいケーキ屋さん</h1>
<p>手作りにこだわった本格派ケーキをお楽しみください。</p>
</body>
</html>
5. セマンティックHTMLの活用法
セマンティックHTMLとは、タグそのものに意味を持たせたHTMLのことです。以前はすべてをdivタグで囲んでCSSでデザインを調整していましたが、HTML5からarticle、section、nav、aside、headerといった意味を持つタグが導入されました。これらを適切に使用することで、検索エンジンがページの構造をより正確に理解できるようになります。
例えば、articleタグは独立したコンテンツを表すときに使います。ブログの記事、ニュース記事、商品レビューなど、それ単体で意味が通じる内容に使用します。sectionタグは関連する内容をグループ化するときに使い、navタグはナビゲーションメニューに使います。これらのタグを正しく使い分けることで、検索エンジンに対して「このページはこういう構造になっています」と明確に伝えることができます。
<body>
<header>
<h1>料理レシピサイト</h1>
<nav>
<ul>
<li><a href="#japanese">和食</a></li>
<li><a href="#western">洋食</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>簡単！チョコレートケーキの作り方</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<h3>材料</h3>
<ul>
<li>チョコレート 200g</li>
<li>卵 3個</li>
<li>砂糖 100g</li>
</ul>
</section>
<section>
<h3>作り方</h3>
<ol>
<li>チョコレートを湯煎で溶かします</li>
<li>卵と砂糖を混ぜ合わせます</li>
<li>オーブンで180度30分焼きます</li>
</ol>
</section>
</article>
<aside>
<h3>関連レシピ</h3>
<ul>
<li><a href="#">クッキーの作り方</a></li>
<li><a href="#">プリンの作り方</a></li>
</ul>
</aside>
</main>
<footer>
<p>レシピサイト 2024</p>
</footer>
</body>
この例では、記事全体をarticleタグで囲み、材料と作り方をそれぞれsectionタグで分けています。また、関連情報をasideタグで配置することで、メインコンテンツと補足情報を明確に区別しています。
6. 画像のalt属性とSEO対策
画像を表示するimgタグには、alt属性という画像の説明文を設定できる機能があります。このalt属性は、画像が何らかの理由で表示されないときに代わりに表示されるテキストですが、実はSEO対策においても非常に重要な役割を果たします。検索エンジンは画像そのものの内容を直接理解することができないため、alt属性のテキストを読み取って画像の内容を判断しているのです。
alt属性には、画像の内容を具体的に説明するテキストを記述しましょう。例えば、ケーキの写真なら「苺のショートケーキ」ではなく「新鮮な苺をたっぷり使った手作りショートケーキ」のように、詳しく書くことで検索エンジンの評価が高まります。また、視覚障害のある方が音声読み上げソフトを使用する際にも、alt属性の内容が読み上げられるため、アクセシビリティの観点からも必ず設定すべき属性です。
<article>
<h2>当店自慢のケーキをご紹介</h2>
<section>
<h3>苺のショートケーキ</h3>
<img src="/img/sample150-100.jpg" alt="新鮮な苺をたっぷり使った手作りショートケーキ。ふわふわのスポンジと生クリームの組み合わせ">
<p>厳選した苺と自家製スポンジで作る、当店人気ナンバーワンのケーキです。</p>
</section>
<section>
<h3>チョコレートケーキ</h3>
<img src="/img/sample120-120.jpg" alt="ベルギー産高級チョコレートを使用した濃厚なチョコレートケーキ">
<p>ベルギー産の高級チョコレートをふんだんに使用した、大人の味わいです。</p>
</section>
</article>
このように、alt属性に具体的で詳しい説明を書くことで、検索エンジンは画像の内容を正確に理解でき、画像検索での表示順位向上にもつながります。
7. 内部リンク構造の最適化
Webサイト内のページ同士をリンクで結ぶことを「内部リンク」と言います。この内部リンク構造を最適化することも、SEO対策において重要なポイントです。検索エンジンのクローラーは、リンクをたどってWebサイト内を巡回します。適切な内部リンクがあれば、クローラーはサイト全体を効率よく巡回でき、すべてのページを検索エンジンに登録してもらいやすくなります。
内部リンクを設置する際は、リンクテキスト（アンカーテキスト）にも注意が必要です。「こちら」や「詳細はこちら」といった曖昧なテキストではなく、「ケーキの作り方を見る」「人気ランキングをチェック」のように、リンク先のページ内容がわかる具体的なテキストを使いましょう。これにより、検索エンジンはリンク先ページの内容をより正確に理解できます。また、重要なページへは複数のページからリンクを貼ることで、そのページの重要度を検索エンジンに伝えることができます。
8. モバイルフレンドリーな構造設計
現在、インターネットを利用する人の多くがスマートフォンを使用しています。GoogleもモバイルフレンドリーなWebサイトを高く評価するようになり、スマートフォンで見やすいサイトが検索結果の上位に表示されやすくなっています。そのため、HTMLの構造を設計する際には、モバイル端末での表示も考慮する必要があります。
モバイルフレンドリーな構造を作るためには、まずviewportメタタグを設定します。これはスマートフォンなどのモバイル端末で適切にページを表示するための設定です。また、文字サイズは小さすぎないようにし、ボタンやリンクは指でタップしやすい大きさにすることが大切です。CSSのメディアクエリを使えば、パソコンとスマートフォンで異なるデザインを適用できますが、HTML構造自体はシンプルで柔軟性のあるものにしておくことが重要です。レスポンシブデザインと呼ばれる、画面サイズに応じて自動的にレイアウトが変わる設計が推奨されています。
9. ページの読み込み速度と構造の関係
ページの読み込み速度は、SEOにおいて無視できない要素です。Googleは読み込みが速いWebサイトを高く評価し、遅いサイトは検索順位が下がる傾向にあります。HTMLの構造も、この読み込み速度に大きく影響します。無駄なタグを減らし、シンプルで効率的な構造を心がけることが大切です。
例えば、不要なdivタグを何重にも重ねたり、意味のないクラス名をたくさん付けたりすると、HTMLファイルのサイズが大きくなり、読み込みに時間がかかってしまいます。また、JavaScriptやCSSファイルの読み込みタグを適切な位置に配置することも重要です。通常、CSSのlinkタグはhead内に、JavaScriptのscriptタグはbody閉じタグの直前に配置すると、ページの表示速度が向上します。画像ファイルも適切なサイズに最適化し、必要に応じて遅延読み込み（lazy loading）を実装することで、初期表示速度を改善できます。
10. 構造化データとリッチリザルト
構造化データとは、Webページの情報を検索エンジンがより理解しやすい形式で記述する仕組みです。JSON-LD形式で記述することが一般的で、レシピ、イベント、商品、記事など、さまざまな種類のコンテンツに対応しています。構造化データを実装すると、検索結果にリッチリザルトと呼ばれる視覚的に目立つ表示がされることがあり、クリック率の向上につながります。
例えば、レシピの構造化データを実装すると、検索結果に料理の写真、調理時間、カロリーなどが表示されることがあります。また、商品の構造化データを実装すれば、価格や在庫状況、レビューの星評価などが検索結果に表示される可能性があります。これらのリッチリザルトは、通常のテキストだけの検索結果よりも目立つため、ユーザーの注目を集めやすく、Webサイトへの訪問者数増加が期待できます。構造化データはscriptタグを使ってhead内またはbody内に記述し、特別なHTMLタグは必要ありません。実装は少し難しく感じるかもしれませんが、Googleの「構造化データマークアップ支援ツール」を使えば、比較的簡単に作成できます。
