SEO対策としてHTMLのタグ設定を理解する!効果的な4つの方法

SEO対策 HTML&CSS
この記事で解決する内容
  • htmlで行うSEO対策は?
  • html構造が及ぼす検索結果への影響とは?
  • bodyタグ内で正しいタグの使用方法は?

HTMLでサイト構造を記述していると、表示のチェックだけで、正確な構造に気を付けている人がどれほどいるでしょうか?

実際のサイトでも正しいコーディングになっていないサイトも少なくありません。HTML構造が正しいかどうかは、検索結果にも影響を及ぼします。

Webサイトは広告であり、検索順位は集客するうえでとても重要なことなので、HTML構造を正しく記述し、コンテンツの質を高めSEO対策を行いましょう!

検索エンジン最適化(SEO)スターター ガイド でもコンテンツの最適化の項目で、HTML構造について記述されている

Google Search Console 検索エンジン最適化(SEO)スターターガイドより

この記事を読めば、正しいタグの使用方法とその重要性を理解することが出来、今後のコーディングにも役立つのでしっかりと覚えていきましょう!!

SEOの視点で考える正しいタグの使用方法

この記事ではbodyタグ内で使用するタグを書いていきます。headタグ内で使用する重要なタグについては下記の記事をご覧ください。

コーディング学習をしている方はどうしても表示が正しくされているかばかりに目が行きがちで、タグの正しい記述方法まで気にする方はあまりいません。

実際に現状ある数々のサイトでも、タグの使用方法が間違っているサイトは結構あります。

思った通りに表示されていれば良いのかもしれませんが、SEOの観点からみると少なからず影響があり、あまりよくありません。

HTMLの記述が間違えていることにより、Googleからペナルティを受けることはありませんが、検索順位の結果には影響します。

サイト構造を検索エンジンに正しく理解してもらうためにも、HTMLの正しい記述方法を学ぶ必要があります。

W3Cが定義する用途とGoogleの検索エンジン最適化から、HTMLの正しい使用方法を解説していきます。

W3Cとは、

World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。

HTML等の規格を勧告 。

ウィキペディアより

h1~h6(見出しタグ)の使用方法

<h1>〇〇〇〇</h1>
    <h2>〇〇〇</h2>
        <h3>〇〇〇</h3>
  <h2>〇〇〇</h2>
      <h3>〇〇〇</h3>
       <h4>〇〇〇</h4>
  • 過度な使用をしない
  • 適切な箇所に使用する
  • 書式(文字の大きさ)を表現するために使用しない
  • h1タグは1ページに1つの使用とする
  • ページの重要なキーワードを入れる
  • h1から順番に使用する

デザイン上順番に記述することが難しい場合でも、HTMLでの記述の順番は守り、CSSで配置の調整をしていくようにしましょう!

alt属性の指定

<img src="○○○.jpg" alt="画像の代替テキスト">

alt属性はimgタグ内で使用し、画像が表示されないときに表示する代替テキストを指定します。

出来るだけ簡潔に、画像を適切に表現した文章を指定する

キーワードを羅列したり、文章をそのまま使用する事はSEOにとってあまり好ましくありません。

ol、ul、liタグの適切な使用

他の段落との差別化を図ることで、その重要性を検索エンジンに示すことが出来ます。

aタグをテキストに使用する

<a href="リンク先のURL">企業情報</a>

移動先のページが分かる内容のテキストにリンクを使用することで、検索エンジンだけでなくユーザーにもリンク先のページの内容を理解してもらえるようになります。

  • 移動先のページ内容が分からない、「こちら」や「クリック」などの文章をリンクにしない
  • 簡潔な文字数にする
  • 移動先のURL自体をリンクにしない

チェックツールを利用する

作成したコードを自分でチェックしても、なかなか難しいですよね💦

そんな人のために便利なチェックツールがあるので、絶対使ってみてください。物凄く便利ですし、学習にもなります!!

Another HTML Lint

公開されているサイトのHTMLだけでなく、HTMLファイル、また直接入力したHTMLもチェックしてくれる優れものです!!もちろん無料で使用できます!

Another HTML Lintチェックツールはこちら

W3Cマークアップ検証サービス

W3Cが提供しているマークアップの検証サービスです。Another HTML Lintのチェックツール同様に、サイトのHTMLやHTMLファイル、直接入力にも対応しています!!無料でこちらも使用できますので、ぜひ活用していきましょう!!

W3Cマークアップ検証サービスはこちら

補足ですが、W3CではCSSのチェックツールも提供していますので、こちらも是非利用してみてください。

W3C CSS検証サービスはこちら

まとめ

  • bodyタグ内で使用するHTMLタグの正しい記述方法
  • SEO対策のためのHTMLタグ記述の注意点
  • HTML記述を確認する無料チェックツールの紹介

どんなに優れたデザインでも、集客が出来なければWebサイトとしての役割は果たしたとは言えません。Webデザイナーは常にSEO対策をしっかりと行いながら、Webサイトの作成を行っていく必要があります。

そのためにまず行うこととして、HTML構造の正しい記述を行い、SEO対策を行い、検索エンジンに正しい構造のサイトであると認識にてもらいましょう!!

この記事を読めば、bodyタグ内で記述するタグの正しいHTML構造は記述できますので、理解できるまでしっかりと読み込んでください!!

コメント

タイトルとURLをコピーしました