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>
デザイン上順番に記述することが難しい場合でも、HTMLでの記述の順番は守り、CSSで配置の調整をしていくようにしましょう!
alt属性の指定
<img src="○○○.jpg" alt="画像の代替テキスト">
alt属性はimgタグ内で使用し、画像が表示されないときに表示する代替テキストを指定します。
出来るだけ簡潔に、画像を適切に表現した文章を指定する
キーワードを羅列したり、文章をそのまま使用する事はSEOにとってあまり好ましくありません。
ol、ul、liタグの適切な使用
他の段落との差別化を図ることで、その重要性を検索エンジンに示すことが出来ます。
aタグをテキストに使用する
<a href="リンク先のURL">企業情報</a>
移動先のページが分かる内容のテキストにリンクを使用することで、検索エンジンだけでなくユーザーにもリンク先のページの内容を理解してもらえるようになります。
チェックツールを利用する
作成したコードを自分でチェックしても、なかなか難しいですよね💦
そんな人のために便利なチェックツールがあるので、絶対使ってみてください。物凄く便利ですし、学習にもなります!!
Another HTML Lint
公開されているサイトのHTMLだけでなく、HTMLファイル、また直接入力したHTMLもチェックしてくれる優れものです!!もちろん無料で使用できます!
W3Cマークアップ検証サービス
W3Cが提供しているマークアップの検証サービスです。Another HTML Lintのチェックツール同様に、サイトのHTMLやHTMLファイル、直接入力にも対応しています!!無料でこちらも使用できますので、ぜひ活用していきましょう!!
補足ですが、W3CではCSSのチェックツールも提供していますので、こちらも是非利用してみてください。
まとめ
どんなに優れたデザインでも、集客が出来なければWebサイトとしての役割は果たしたとは言えません。Webデザイナーは常にSEO対策をしっかりと行いながら、Webサイトの作成を行っていく必要があります。
そのためにまず行うこととして、HTML構造の正しい記述を行い、SEO対策を行い、検索エンジンに正しい構造のサイトであると認識にてもらいましょう!!
この記事を読めば、bodyタグ内で記述するタグの正しいHTML構造は記述できますので、理解できるまでしっかりと読み込んでください!!
コメント