Webサイト制作をしていく上でSEO対策は基本となってきました。
この記事ではSEO対策の中でもコーディングする上で大切なマークアップについてご紹介します。
これからWebサイトを制作したい方やWebサイトの見直しをしたい方はぜひ参考にしてみてください。

SEOとは

SEOとは「Search Engine Optimization」の略で、日本語に直すと「検索エンジン最適化」という意味になります。
SEOを行う目的は、GoogleやYahoo!などの検索エンジンで特定のキーワードで検索した際に、サイトが検索結果の上位に表示させる為です。

HTMLマークアップとは

HTMLマークアップとは、HTMLタグを使って文書に構造や意味を与える作業のことです。HTMLタグは、ブラウザに文書の各部分の役割を伝え、どのように表示するか指示します。

主な役割

・文書の構造化: 見出し、段落、リスト、表など、文書の構造を定義します。

・意味の付与: 太字、斜体、リンクなど、文書の意味を付与します。

・視覚的な表現: 文字サイズ、色、配置など、文書の視覚的な表現を指示します。

構造化データの重要性について

検索エンジンは、Webページのコンテンツを理解するために様々な情報を分析します。その中でも、構造化データは、ページの重要な情報を分かりやすく整理して提供することで、検索エンジンにとって非常に理解しやすい情報となります。

構造化データには、以下のような種類があります。

・記事情報: 記事の見出し、著者、公開日、更新日など
・商品情報: 商品名、価格、画像、説明文など
・イベント情報: イベント名、開催日時、場所、参加方法など
・ローカルビジネス情報: 店舗名、住所、電話番号、営業時間など

これらの情報を適切にマークアップすることで、検索結果にリッチスニペットと呼ばれる情報が表示されるようになり、ユーザーのクリック率向上にもつながります。

SEOに効果的なHTMLマークアップ

SEO対策の観点から、特に重要となるHTMLマークアップは以下の通りです

1.タイトルタグ:

ページのタイトルを設定するタグです。検索結果に表示されるタイトルとなるため、ユーザーの検索意図に合致した内容を30文字以内に記述する必要があります。

2.メタディスクリプション:

ページの内容を要約するタグです。検索結果に表示される説明文となるため、魅力的な内容を120文字程度に記述する必要があります。

3.見出しタグ:

ページ内の見出しを設定するタグです。h1からh6までの6種類があり、見出しの重要度に応じて使い分ける必要があります。

4.画像のalt属性:

画像に代替テキストを設定する属性です。画像が表示されない場合に表示されるテキストであり、SEO対策だけでなく、アクセシビリティの観点からも重要です。

5.パンくずリスト:

ユーザーが現在閲覧しているページの位置を階層的に表示する機能です。ユーザーのサイト内回遊率向上に効果があります。

6.構造化データ:

上記で紹介したように、記事情報、商品情報、イベント情報などの構造化データをマークアップすることで、検索エンジンにページの内容を正確に理解してもらうことができます。

マークアップの確認方法

HTMLマークアップが正しく記述されているかどうかは、以下のツールを使用して確認することができます。

Google Search Console：
Google Search Consoleの「URL検査」ツールでは、ページの構造化データのエラーや警告を確認することができます。

スキーママークアップ検証ツール：
Google Search Consoleと同様にURLやHTMLでのチェックができます。
https://validator.schema.org/

まとめ

いかがでしたでしょうか。

HTMLマークアップは、Webページの構造を形成するだけでなく、SEO対策においても重要な役割を果たします。
また適切なマークアップを行うことで、検索エンジンにページの内容を正確に理解してもらい、検索結果での上位表示を目指すことができます。
これからWebサイトを作る方、見直したい方に参考になればと思います。

よきWebサイト制作ライフを！