HTMLタグを意識してコーディングしよう！

良くないタグの使い方とは？

SEO対策をする上で、HTMLのタグの構成は非常に重要です。
下記のようなコーディングの場合は、クローラーが適切に情報を読み取れず、SEOの評価に悪影響が出ます。

• テキストはとりあえず全てpタグ
• divタグだらけ
• 装飾用のタグが多すぎる、不要なタグが多い
• hタグの使い方がおかしい

コーディングはただデザイン再現すれば良いのでは無く、その先の運用（SEO評価や保守性など）を踏まえてコーディングする必要があります。

具体的にどんなコーディングをすれば良い？

タグを正しく使い分けてコーディングすることで、適切なSEO評価を得られるサイトになります。

タグの使い方の例

• ヘッダーやフッターのナビゲーションにはnavタグを使用
• ページ内の意味のあるまとまりにはsectionタグを使用
• 主要な見出しにはh2タグ、小見出しにはh3タグを使用し、階層を守る
• imgタグにはalt属性、width属性、height属性を必ず設定
  ※alt属性は、画像が表示できない場合や、スクリーンリーダー向けに設定します。
• PCとSPで画像を切り替える際はpictureタグを使用
• リスト化できるパーツはulタグとliタグを使用
• 順序が必要なリストにはolタグとliタグを使用
• 記事や独立したコンテンツにはarticleタグを使用

さらに意識すべきポイント

• フォーム要素には必ずlabelタグを設定し、for属性で関連付ける
• アコーディオンやモーダルにはaria属性を設定し、アクセシビリティ対応する
• リンクテキストは「こちら」ではなく、具体的な内容を書く（例：「サービス詳細を見る」など）
• 動画や音声コンテンツには可能な限りキャプションやテキストトランスクリプトを用意する

まとめ

この記事に挙げた例はほんの1部です。
日々「本当にこのHTMLタグは適切か？」を意識しながらコーディングしていきましょう！