皆さんこんにちは末ちゃんです。

皆さんは、昨今のSEO対策とは何をするべきか知っていますか？
一昔前では以下のようなことを主にすべきとされていました。

• マークアップの最適化
• 大量の内部リンクの作成
• 評価の高い外部サイトからのリンク
• キーワードを大量に埋め込み
• などなど

その他にもあらゆることがSEOに効くと言われていました。
しかし0ではないと思いますが、これらは今や無意味です。

現在、SEO対策を行って検索結果1位を取るということに対してGoogleが対策を多く施しているので、ほぼ意味のないことです。

ではどうやって順位をあげるかというと、エンドユーザーが求めている「高品質」な情報を提供するということです。

一方的にこっちが発信したい情報を提供する時代ではありません。エンドユーザーが求めているものを的確に調査し、提供することが正しいSEO対策であり、自社のブランド価値を高める正しい方法です。

さて、順位をあげることについてはまた別の機会にマーケティングの担当がブログ記事を書いてくれることでしょう・・・。

マークアップとSEOは関係しているのか

タイトルの内容について、結論から言うと「一応間接的」にはあります。

検索順位をあげるには「高品質」な情報を提供することが大切と、先に書きました。
そのためにはまずクローラーに情報を正しく提供しなければなりません。

例えば、以下のようなページを作成するとします。（写真は一昨年くらいに自分が撮影したものです）

これをタグの意味を考えずに、コーディングするとこうなると思います。

<div class="photograph">
  <div class="image">
    <img src="image.jpg" alt="写真">
  </div>

  <div class="title">雪かぶる北アルプスとFDAジェット</div>

  <div class="info">
    <div class="subtitle">撮影情報</div>
    <div class="info__item">
      <div class="info__item__title">撮影日</div>
      <div class="info__item__content">2020-12-31</div>
    </div>
    <div class="info__item">
      <div class="info__item__title">撮影地</div>
      <div class="info__item__content">松本空港</div>
    </div>
    <div class="info__item">
      <div class="info__item__title">焦点距離</div>
      <div class="info__item__content">221mm</div>
    </div>
  </div>

  <div class="comment">
    <div class="subtitle">コメント</div>
    フジドリームエアライン社の6号機 エンブラエル ERJ-175を雪をかぶった北アルプスをバックに撮影しました。<br>サービス精神の高い機長が手を振ってくれています。
  </div>
</div>

これをHTML5 Outlinerにかけてみるとこうなります。

何も情報がありませんね。。。

これをセマンティックに、タグに意味がつくように書き直します。

<div class="photograph">
  <figure class="image">
    <img src="image.jpg" alt="写真">
  </figure>

  <h1 class="title">雪かぶる北アルプスとFDAジェット</h1>

  <section>
    <h2 class="subtitle">撮影情報</h2>
    <dl class="info">
      <div class="info__item">
        <dt class="info__item__title">撮影日</dt>
        <dd class="info__item__content">2020-12-31</dd>
      </div>
      <div class="info__item">
        <dt class="info__item__title">撮影地</dt>
        <dd class="info__item__content">松本空港</dd>
      </div>
      <div class="info__item">
        <dt class="info__item__title">焦点距離</dt>
        <dd class="info__item__content">221mm</dd>
      </div>
    </dl>
  </section>


  <section class="comment">
    <h2 class="subtitle">コメント</h2>
    <p>フジドリームエアライン社の6号機 エンブラエル ERJ-175を雪をかぶった北アルプスをバックに撮影しました。<br>サービス精神の高い機長が手を振ってくれています。</p>
  </section>
</div>

これをHTML5 Outlinerにかけてみます。

大分情報がつくようになりました。
更に細かいことを言うとコードの順番なども変えたりすることがありますが、ここでは割愛します。

HTMLタグに意味づけをする

昨今のクローラーは非常に高機能になったため、あまり適切なコーディングがされていなくとも比較的適切に情報を拾い上げてくれます。

しかし、こちらから適切に情報を配置することでロボットでは識別できない情報もしっかり渡すことができます。

さらにscheme.orgを駆使して構造化データを提供することで、Googleの検索結果により高度な情報を表示させることができます。（Google ショッピングなど）

まとめ

ウェブサイトとは情報を提供するためのものですが、昨今は情報が溢れかえっているためなかなか検索順位をあげることができません。
その上で大切なことは、「本当にユーザーが必要としているものを提供する」ことです。

しかし我々コーダー、あるいはフロントエンドエンジニアは情報が大事だからマークアップはどうでもいい。と言わず、情報を正しく並べて伝えることを意識すべきです。

改めて、気を引き締め直し引き続き良質なコンテンツの生産に努めていきたいと思います。