フロントエンドエンジニアがSEOを意識してマークアップすべき内容まとめ
SEOが苦手なエンジニア「フロントエンドエンジニアがマークアップでSEOについて意識するべきことは何なんだろう？」
こういった疑問にお答えします。
この記事を書いている僕は、企業のマーケティング担当として10年以上、フロントエンドエンジニアとして3年以上の経験があります。
マークアップをする上でSEO対策するべき内容をピックアップして解説します。
すべてではありませんが、主に対応すべき優先度の高い内容をまとめています。
本記事の内容
- 正確なマークアップをする
- 遅延ロードをしてページの読み込み速度を上げる
- SEOを意識したマークアップをする
- ページの表示が重い時に陥りがちな見落とし
フロントエンドエンジニアであれば、面談時に「どういったことに気をつけてマークアップをしていますか？」ということを聞かれることがあると思うので、その回答としても参考になると思います。
本記事での内容については、SEOの設計は別途ディレクターやマーケティング担当が既に行っていて、その設計を元にマークアップすることを前提としています。
※個人でホームページ制作を請け負う場合は、自分でSEO対策をするケースが多いですが、それも含めて既に準備がされているという前提で話を進めます。
正確なマークアップをする
基本ですが、正確にマークアップをします。HTML構文の記述ミスはGoogleからの評価を落とす可能性があります。閉じタグを忘れていないかなど、HTMLのマークアップが間違っていないかをLintやツールなどを使ってチェックします。（チェックツールはググれば大量に出てきます）
またリンク切れもしっかりとチェックします。ユーザビリティを下げることにもなるため、きちんと対応しなくてはなりません。これも例えばWeb Developerなどのツールを使ってチェックするなどします。
適切なマークアップをする
タグの意味を考えて、適切なマークアップをします。初心者は仕方ないのですが、脱初心者した人でもそのままの流れで意識せずマークアップしている人は思いの外多い印象です。
imgタグとbackground-imageをきちんと使い分ける
その画像は画像として表示するのか、背景画像として表示するのかを意識するようにします。よくある例が、何でも画像をbackground-imageで表示してしまう人です。通常画像はimgタグで表示して画像であるということをマークアップに意味として込めるべきです。
背景画像のみbackground-imageとすべきですが、レスポンシブ対応の関係上background-imageを使わないといけないケースもあるかもしれませんが、できる限り正確にマークアップした方がよいでしょう。最近ではObject-fit(ポリフィルもあり)を使う手もあります。
またimgタグのaltにはできる限り正確なテキスト情報を記載します。
文章ならpタグで囲む
文章をdivで囲うケースもありますが、文章だけならpタグを使うなどできる限り正確にマークアップします。
tableタグを使う際にそれは帳票なのかどうか
tableタグは表を扱う時に基本的に使うべきで、使い分けをするべきです。レイアウト目的のみではtableタグを使わないことをオススメします。レイアウト目的の時は適切なCSSで装飾するようにしましょう。
すべてをdivにせず、articleタグやsectionタグなど適切なタグを使う
header,footerタグ、navタグ、articleタグやsectionタグなど適切なタグを使ってマークアップするようにします。HTMLを学習し始めの初学者はこのあたりは後回しにしてよいですが、できるだけ早い段階で意識してマークアップできるようにした方が好ましいです。
sectionタグ内にheadingタグがない
sectionタグ内にはh1,h2,h3といったheadingタグが存在するはずなので、headingタグが無いのにsectionタグで囲っている場合はdivに変えるなどして正しくマークアップします。このあたりのルールなども初学者で間違いが多い箇所になります。
遅延ロードをしてページの読み込み速度を上げる
Googleの「PageSpeed Insights」で計測できるスピードを上げることもSEO上、重要な対応のひとつになります。1秒でも表示速度が遅くなるとその分ユーザーの離脱が上がるため、大規模なサイトになるほど意識する必要があります。
表示が遅くならないように画像の遅延ロード処理を行う
画像は基本的に遅延ロードするようにします。Intersection Observer を使うSEO上もよいとされているので、古いブラウザ対応があればポリフィルを使うか処理を分けるなどしてIntersection Observerで対応するのがよいと思います。
画面にファーストビューで表示されない要素を遅延読み込みさせる
Ajaxで読み込みが発生する要素がある場合は、Intersection Observerを使うなどして、その要素が表示がされるタイミングで通信するようにして遅延読み込みをさせ、ページが重くならないよう気をつけます。
サーバサイドの処理をフロントエンドに移行させる
ケースバイケースですが、サーバサイドでの処理が重すぎる時は、SEO上問題がなければ、部分的にフロントエンドでAjaxにより遅延で読み込みさせるようにするなど、機能を適切に分担してページの読み込み速度を上げることが考えられます。
もともとサーバサイドで処理していたものをAPI化してフロントエンドで読み出すように変更が必要なので手間がかかることが多く、判断が難しいところでもあります。
例えばレコメンド機能（ユーザへ個別におすすめを表示する機能）などはユーザ毎に変化する内容なので、フロントで処理しても問題ないことが多く、読み込み速度を上げられる可能性がある箇所です。
SEOを意識したマークアップをする
構造化マークアップ
セマンティックウェブ(itempropなど)を意識したコーディングを可能であれば対応します。最低限でも、パンくずの対応はするようにしましょう。JSON-LDで書けば簡単に共通化できると思います。きちんとマークアップすれば検索結果でパンくずリスト付で表示されるようになるはずです。
ページ毎に、title、description、OGPなどヘッダー情報やh1, h2, h3などを正確に対応
ヘッダー情報やheadingはSEOでは重要な項目であり、ディレクターなどにきちんと仕様を確認しながらマークアップをするようにします。
仕様書がきちんと用意されているプロジェクトでは、ヘッダー情報はページごとに仕様が設定されていることはありますがが、headingタグについては指示がないことも多いと思います。
デザインカンプからはSEOに関するマークアップの細かい指示は読み取れないですし、そもそもデザインの時点でデザイナーはSEOを意識していることはほぼないため、ディレクターやマーケティング担当に聞いて認識に齟齬がでないようにしなければなりません。
例えば、「h1」は特にSEOに与える影響が大きいので、正確にマークアップします。
サーバサイドレンダリング(SSR)を意識する
NuxtなどJavaScriptフレームワークでSSRが伴う場合は、SSRとCSRを意識して構築する必要があります。
ライフサイクルを意識してどのタイミングでデータをセットするのかを意識しながらマークアップします。サーバーサイドでレンダリングされたものがクローラーに読み込まれるHTMLとなるため、ここを誤るとSEO上の大きな問題が発生してしまいます。
ページの表示が重い時に陥りがちな見落とし
ページ表示速度の低下はSEO上もユーザビリティ上もよくないので、改善すべき重要なポイントです。速度関連でよく見落としてしまったり、見直せる点について紹介します。
モジュールバンドラーの問題
表示速度でありがちなのがwebpackなどのモジュールバンドラーの設定です。
iconデータなどページごとに個別に読み込めばよいデータを、誤ってwebpackでまとめてビルドして全ページで読み込むようになっており、常に余計な画像系のデータを大量に読み込んでしまっているということもあります。
静的に配置するディレクトリとバンドラーでまとめる設定になっているディレクトリについて意思疎通ができていない時に起こりがちです。チームで開発している時に、webpackの設定まで理解できていないコーダーと一緒に作業した時に起こりやすいので、注意するようにした方が良い点です。
サーバサイドとフロントエンドのどちらが遅いのか問題
よくあるのがページの表示速度が遅い場合に、サーバサイドとフロントエンドのどちらに問題があるのかという切り分けです。
GoogleChromeのNetworkタブのデータを見るなどして問題を特定します。
Ajax通信に問題ありそうな時はconsoleを使って時間の計測をします。計測開始したい処理の場所にconsole.time()を書いて、計測終了の箇所にconsole.timeEnd()を書きます。引数には同じラベル名を渡します。ラベルを分けることによって、入れ子で複数のポイントについて計測することも可能です。
まとめ：マークアップは正確に行い、ページの読み込み速度を意識する
SEOで注意すべき主な点は以下のとおりです。
- 正確なマークアップをする
- 遅延ロードをしてページの読み込み速度を上げる
- セマンティックウェブを意識したコーディングをする
SEOはどのキーワードを狙うのかなど設計が肝になりますが、正確にマークアップすることでより上位表示されやすくすることが可能です。フロントエンドのエンジニアであれば常にSEOを意識してマークアップすることは重要な役割のひとつです。
フロントエンドエンジニアを目指している方向けの記事も書いているのでよければ参考にしてみてください。
» フロントエンドのエンジニアのロードマップ 【身につけるべきスキル・収入アップ手順】
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています