新人Web担当SEO対策に強いコーディング方法はありますか？
ユウ現役でSEO対策の仕事をしている私が、コーディング（マークアップ）をテーマにSEO対策を解説します。
SEO対策に有効なコーディング
本格的なSEO対策を考えた場合、「どのようなコーディングをするか」というテーマは避けて通れません。
SEO対策の施策のなかで、「コーディングの良し悪し」が占める割合はそこまで高くありませんが、せっかく良いコンテンツを作っても、コーディングの質のせいで評価されなかったらもったいないです。
ですからコーディングの質には注意する必要があります。
この記事では、普段私が仕事のなかでチェックしているコーディングチェックポイントをご紹介します。
あなたがWebデザイナーやコーダーであれば、SEOにこだわりのあるクライアントからの依頼があったときに役立ちます。
あなたが外部にコーディングを依頼するサイト管理者であれば、成果物のチェックポイントとして利用できます。
【5つのポイント】
- エラーのないコーディングを心がける
- タグの意味を考えてマークアップする
- コードの記述順を意識してコーディングする
- ページスピードを意識してコーディングする
- タグの構造を意識してコーディングする
エラーのないコーディングを心がける
最低限のチェックポイントは、
エラーのないコーディングです。
少しエラーがあるからといって評価が下がることはありませんが、HTMLソースにエラーがあると、クローラーがうまくページを読み取れない可能性もあります。
HTMLソースのエラーとは、タグの閉じ忘れやリンクの記述ミスなとです。
リンクの記述ミスがあると、
サイト閲覧者にとってもよくないです。
リンクの記述ミスや画像パスの記述ミスなどはページを閲覧すれば気付けますが、タグの閉じ忘れは気付けません。また、推奨されてないタグの使用も、ページを閲覧しただけでは気付けません。
そんなときに使えるのが「W3C Markup validation Service」です。
URLを入力するだけで、HTMLソースのエラーチェックを行ってくれます。SEO対策のサイト調査を行う際にも使っています。
ただ、気つけなければならないのは、エラーがあるからといって、必ずしもNGではない点です。
仕方ないエラーがあることもあるので、外部にコーディングを依頼したエラーがあったからといって、作業者に「どうなってなんだ？」と怒るのはNGです。気になる場合は、まずは理由を聞きましょう。
タグの意味を考えてマークアップする
「セマンティックWeb」と呼ばれる、「タグの意味を考えてマークアップをしよう」という考え方があります。
「セマンティックWeb」とは、「コンピュータが理解できるような情報の伝え方をしよう」という考え方です。ティム・バーナーズ＝リーという人物によって提唱されました。
Webサイトに○○株式会社の記載があったとき、人間はそれが会社名だとすぐに判断できます。しかしロボットは判断できません。
ですから「意味のあるマークアップをしてロボットにもわかるようにしょう」というのが、セマンティックWebの考え方です。
タグの意味を考えたコーディングも、
SEOでは重要です。
意味のあるタグを使用する
タグのなかには、意味のあるタグと意味のないタグがあります。
【意味のあるタグ一例】
- <article>→独立したコンテンツ（記事）をマークアップするためのタグ。
- <nav>→ナビゲーションを意味するタグ。
- <section>→一つの意味あるまとまりをマークアップするためのタグ。
意味のあるタグに対して、<div>タグなどは意味のないタグとして使用されます。意味がないと言うと語弊があるかもしれませんが、とくに何かを表すわけではないので、汎用タグとして利用されています。
マークアップを検討する際に、「ここは意味のあるまとまりだから<section>でマークアップしよう」といった思考が必要です。
構造化マークアップ
構造化マークアップもあわせて検討しましょう。
構造化マークアップとは、用意されたテンプレートに沿ってマークアップを行うことで、「検索エンジンに内容を正しく伝えることができる、かつ、検索結果の表示をリッチにすることができる」という手法です。
普段検索結果を見ていて、商品のレビューや価格帯が表示されているWebサイトを見たことはありませんか？
ECサイトなどに多いです。
なぜレビューや価格が表示されているかというと、そのページが構造化マークアップされているからです。レビューや価格が表示されるとどんな利点があるかというと、他のサイトと表示が変わって差別化されるので、クリック率が高くなります。
構造化マークアップにはいくつか種類があり、商品のレビューや価格表示以外にも、パンくずリストを表示できたり、Q&Aを表示できたりします。
詳しく知りたい方はGoogle検索セントラル参考です。
お得な構造化マークアップですが、実装しているサイトはあまり多くないです。というのも、普段Webサイトを作り慣れているWebデザイナーでも、「よくわからない」という方もいるからです。
ただ、技術的にはそこまで難しいわけではないので、可能であれば構造化マークアップを行いましょう。
コードの記述順を意識してコーディングする
コードの記述順を意識してマークアップしている方はあまりいないかもしれませんが、意外に大事です。
なぜコードの記述順が大事かというと、検索エンジのロボットがHTMLソースの上から順番に読んでいくからです。ですので、「上の方に重要なコードを配置する」というのが推奨です。
明確な根拠はありませんが、できるだけ早い段階で<body>内の目標キーワードを配置するというノウハウもあります。
また、コードの記述は、次に解説するページスピードにも関係しています。
具体的にコードの記述順をどう意識すれば良いかというと、主には<head>内の話です。
<head>内の上部にごちゃごちゃと<script>タグが入っているサイトがたまにありますが、最低限必要な<meta>情報を記述したら、早めに<title>を記述するのが推奨です。
<script>タグ類は<head>の閉じ直前あたりに記述しましょう。
ページスピードを意識してコーディングする
SEOを意識するなら、
ページスピードも避けて通れません。
ページの読み込みにストレスを感じると、サイト閲覧者は離脱してしまいます。
ページスピードの速いコーディングを行うには、画像サイズやファイルのレンダリングを意識してコーディングを行う必要があります。
画像を設置する際に、圧縮していなかったり、用意された枠に対して大きすぎる画像を入れている場合に、ページの読み込みに時間がかかります。
場合によっては画像の遅延読み込みを検討するなど、画像の設置に注意を払いましょう。
次にレンダリングについてです。
レンダリングとは、Webブラウザがソースを読み込んで表示する流れのことです。
HTMLソースは上から順番に読み込まれていくのですが、その際にCSSやJavaScriptファイルなどの読み込み記述があると、ブラウザはそれらを読み込みにいきます。
わかりやすい言葉で言うと、
寄り道のようなものです。
寄り道してしまうとどうなるかというと、ページを表示するまでに時間がかかります。ページを表示する妨げになっている寄り道のことを「レンダリングブロック」と呼び、レンダリングブロックが発生すると、ページの表示スピードが遅くなります。
ページの表示スピードが遅くなると、SEO的によくないです。
ですのでコーディングをする際は、レンダリングの観点にも気を遣う必要があるのです。
タグの構造を意識してコーディングする
タグの構造を意識したコーディングも大事です。
具体的には、<h1>の後には<h2>、<h2>の後には<h3>を配置するといったことです。
<h>タグは見出しタグと呼ばれており、1から順に見出しレベルが高くなっています。
見出しレベルが高い＝SEOにとって重要な意味を持ちます。
本にたとえると、<h1>が本の表紙、<h2>が大見出し、<h3>が大見出しのなかのトピックになるイメージです。
HTMLのルールでは、<h1>の後に<h3>があっても問題ないです。<h2>の後に<h5>があっても問題ないです。ですがSEOを考えるなら、構造を意識するのがベストです。
気になったサイトをチェックしてみればわかりますが、見出し構造がめちゃくちゃなケースはよくあります。コーダーにしてみれば、「デザインカンプ（デザインの指示書）通りにやっただけ」なのかもしれませんが、SEOをしっかりやるなら、タグの構造を意識したコーディングを行いましょう。
まとめ
以上で、SEOを意識したコーディングポイントの解説は終わりです。
少し専門的で難しい部分もあったかもしれません。すべて完璧なコーディングは無理ですが、ちょっとしたポイントを意識してコーディングするだけで、検索エンジンに評価されやすいWebサイトを作ることができます。
ぜひ試してみてくださいね。
