フロントエンドエンジニアのためのSEO対策
はじめに
21年新卒としてSHIFT DAAE(ダーエ)開発グループに所属されました田中です。
あるエンジニアはフロントエンド開発をしていると、開発することに集中しすぎるあまり、SEO対策について対応が漏れてしまうこともあると思います。
またあるエンジニアは「SEO対策って僕らエンジニアは関係ないっしょ？」と思われているかもしれません。
SEO対策と聞くと、確かにあるキーワードでGoogleの検索結果上位を狙ったり、ブログコンテンツの内容を充実させてくイメージですが、
サイトの内部の構造、サイト自体のパフォーマンスもSEOに大きく関わってきます。
故にエンジニアにとってもSEO対策はとても重要です。
そこで今回は、
フロントエンドエンジニアの、フロントエンドエンジニアによる、フロントエンドエンジニアのためのSEO対策
として本記事にまとめてみました。
SEO対策の備忘録として時々見返してもらえるような記事になっていれば幸いです。
本記事の対象者
SEO対策について理解を深めたい方
SEO対策の確認事項が知りたいエンジニアの方
SEOとは
SEOとはSearch Engine Optimizationの略で、Webサイトを、検索エンジンのアルゴリズムに最適化させるための施策のことを言います。
SEO対策をしっかり行うことによって、Googleなどの検索エンジンにおいて、検索結果の上位を狙うことができます。
あるキーワードで検索結果の上位に表示されることで、
ユーザーに認知される機会の増加
購買意欲の高いユーザーのアクセスが期待できる
といったWebサービスを運用している組織にとって大きなメリットをもたらします。
SEO対策ってどんな取り組み？
では、SEO対策としてどんな取り組みをすれば検索結果の上位を狙えるのでしょうか？
検索エンジン会社であるGoogleやYahoo!にお金を払って上位にしてもらうのでしょうか？
答えはNoです。
仮に多くのお金を払ったサイトの順に検索結果が表示されるような検索エンジンであった場合
ユーザーが本当に知りたい情報が検索によって見つけにくくなったり
UI、UXの良くないサイトが上位に表示される可能性もあり、ユーザーは不満に感じてしまうでしょう。
ここで一度、GoogleやYahooの立場になって考えてみましょう。
検索エンジンにとって「顧客」になるのは広告を出してくれる広告主になるわけですが、広告主がたくさんいれば良いというわけではありません。
検索エンジンの最大の資産は、検索エンジンを利用する「ユーザー」になります。
ユーザーがたくさんいれば、広告主は探さなくてもどんどん集まってきますが、 逆にユーザーがいない検索エンジンに広告を出す人はいません。
つまり、検索エンジン会社はユーザーにとって質の高い検索結果を維持するために日々邁進する必要があります。
このことから、SEO対策の真の取り組みは、
「訪問者（ユーザー）のニーズに応えるサイトを続けること」
になります。
では、あるキーワードで検索したユーザーの背景を推測し、良質なコンテンツを提供できれば検索結果で上位を狙えるかというとそうではありません。
上述した通り、UI, UXの悪いサイトはユーザーにとって不便に感じる故、SEOにも悪影響をもたらします。
そのためSEOに良い効果をもたらすためには、我々エンジニアの協力も必須になります。
我々のサイトを評価するクローラーの存在
世界中に星の数ほどあるwebサイトを、検索エンジンはどう評価し、検索結果に表示させているのか、、
検索エンジン会社は「クローラー」と呼ばれるシステムを持っていて、このクローラーが各webページを集めてきます。
集められたwebページは、「何について書かれているか」などを分析、評価されデータベース化されます（インデックス）。
つまり、検索結果に表示されるためには、自分のサイトが検索エンジンにインデックスされる必要があります。
この検索エンジンの仕組みを踏まえた上で、フロントエンドエンジニアがSEO対策として具体的にどんな取り組みをすればよいのか確認事項にしてまとめましたので、それぞれ解説していきます。
フロントエンドエンジニアのためのSEO対策確認事項
1. 各ページに1つh1タグが設定されているか。
h1タグはクローラーがwebサイトの内容を把握するのに用いられるものです。
故にクローラーが正しくSEOを評価するのに役立ちます。
1ページに1つ必ずh1タグを設定するように気をつけましょう。
2. Imgタグにaltタグが設定されているか。
<img src= “/img.pngなど画像のパスを記述します” alt=”画像の代わりとなるテキスト入力します” />alt属性を設定し、画像の代わりとなるテキスト情報をクローラーに伝えられるようにしましょう。
クローラーに正しくSEOを評価してもらえることに加えて、画像検索において上位表示を狙える可能性があります。
3. Headerにtitleタグ、meta descriptionが設定されているか。
titleタグは、webページのタイトルを表す部分のことです。Yahoo!やGoogleの検索結果などのwebブラウザの上部に表示されます。
検索エンジンはHTML内の要素の中でtitleタグの内容を重要視します。
また、titleタグの内容を最適化することで、ユーザーのニーズにヒットしやすくなり、検索順位1位のサイトよりもクリック率が高いなんてことも起こりえます。
各ページに必ず設定するように心がけましょう。
meta descriptionは、検索結果画面の説明文として表示される部分です。SEOに直接的な貢献はしないですが、クリック率の向上に貢献するのでこちらも設定するようにしましょう。
4. OGPの設定がされているか。
FacebookやTwitter、LINEなどのSNSでページのリンクを投稿すると、ページのタイトルや説明文、掲載している画像が表示されるのをよく目にすると思います。
ここで表示される内容を意図的に設定しているのが OGP(Open Graph Protocol) です。
こちらも直接的にSEOには貢献しませんが、間接的にSEOに貢献してくれます。
OGPが適切に設定されていると、SNSユーザーの目に留まりやすくなり、拡散につながります。拡散、共有がされたことで、独自ドメインやメディアサイトに掲載された場合、
被リンク（外部のWEBサイトから自分のWEBサイトに向けてリンクしてもらうこと）数を稼ぐことができます。
被リンク数が多いということは、 それだけ重要なwebサイトであるとクローラーに伝えることになり、結果的にSEOに良い影響をもたらしてくれます。
なのでOGPの設定をすることを強くおすすめします。
下記にNextjsでOGPを設定する方法についての記事を紹介します。
5. サイトマップが作成されているか。
サイトマップとは、webサイト全体の構造を一目でわかるようにしたマップのようなページのことです。
サイトマップには二種類あり、ユーザーがwebサイトの全体構造を理解できることを目的としたHTMLサイトマップと、webサイトの全体構造をクローラーに伝えることを目的としたXMLサイトマップがあります。
特にXMLサイトマップは、作成することでクローラーにwebサイト全体を理解してもらえるだけでなく
新規に作成したコンテンツをいち早く検索順位に表示させる事にも役立ち、SEOに好影響をもたらします。
サイトマップを送信 することは、サイトを最適化する上で重要な要素の一つです。サイトマップを送信することで、あるサイトに存在するすべての URL を検索エンジンが発見できるようになりページの内容が変更された時に素早くダウンロードすることが可能になります。
引用元：https://developers.google.com/search/blog/2014/10/best-practices-for-xml-sitemaps-rssatom?hl=ja
XMLサイトマップを作成せずとも、じきにクローラーが自身のwebサイトをクロールしてくれますが、早く且つ確実にインデックスされるに越したことはないので作成しましょう。
XML Sitemaps Generatorで簡単に作成できるので以下に紹介いたします。
6. パンくずリストが作成されているか。
パンくずリストは、ユーザーが現在そのサイトのどのページを閲覧しているのかを表示しているリストのようなものです。
ツリー構造のようにリンクがリストアップされているケースが多いです。クローラーはこのパンくずリストをクロールの際に利用しています。
パンくずリストを設置することで、クローラーがサイト構造を理解しやすくなるので、より早いインデックスが期待できます。
7. robots.txtでクロールされたくないページを制御する。
robots.txtとは、クローラーにクロールしてほしくないページを伝えるテキストファイルのことで、自身のサイトのドメイン直下に配備することでその効果を発揮します。
クローラーにはクロールバジェットという１つのwebサイトでクロールするページの上限数があります。
例えば、新規にコンテンツを作成し、早期に検索結果に表示してほしい時に、既にクロールバジェットを全て消費してしまっていては、そのページはクロールされません。
管理系のファイルやインデックスされる必要のないページ、システム上やむを得ず作成されてしまった重複コンテンツなどがある場合は、 robots.txtを作成してクロールされないようにしましょう。
robots.txtの書き方について紹介している記事を下記に記載いたします。
8. 表示速度は良好であるかを確認する。
検索エンジンはWebページの表示速度を重要視します。
それもそのはずで、いつまでたってもそのページが表示されなかったらユーザーは不便に感じるでしょう。
また、2021年にGoogleは検索結果の評価にCore Web Vitalsというユーザーエクスペリエンスを向上させるための３つの指標を導入しました。
その３つの指標とは
LCP（Largest Contentful Paint）：読み込み時間
FID（First Input Delay） ：インタラクティブ性
CLS（Cumulative Layout Shift）：ページコンテンツの視覚的な安定性
になります。
それぞれについての詳しい解説はこちらで紹介されていますが、どれもページの反応速度を評価するものです。
故に、ページの表示速度は、SEO対策として重要な事項になるので、 表示速度が遅すぎないかは、ページ単位で確認するようにしましょう。
ページの表示速度、Core Web Vitalsは、PageSpeed Insights を使うことで簡単に確認できるので活用しましょう。
9. モバイルフレンドリーであるかを確認する。
近年ではwebページをスマホで見る人がとても増えました。
それに伴い、Googleは、そのwebサイトがモバイルで見やすいか（モバイルフレンドリーであるか）を検索順位の評価に組み込むことを2015年2月に発表しています。
今年の 2 月に発表したように 、本日より、Google は全世界でモバイル フレンドリー アップデートを開始します。これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。こういったページには、タップやズームなどをしなくてもテキストが読みやすい、タップ ターゲットの間隔が適切、再生できないコンテンツが含まれていない、横方向へのスクロールが発生しない、などの特徴があります。
なので、作成したwebサービスのレスポンシブデザインが良好であるかは確認するようにしましょう。
モバイルフレンドリーテストを使えば自身のURLを貼るだけで、簡単にレスポンシブの評価を確認できます。
https://search.google.com/test/mobile-friendly?hl=JA
10. LightHouseでサイトを総合的に評価する。
Webアプリの品質を高く保つことは、SEOにとっても、ユーザーの満足度においてもとても重要です。
Googleの提供している拡張機能であるLightHouseを利用することで、
そのwebアプリが現状どのような評価を受けているのかを確認することができます。
未使用のcssやjavascript、コンソール上で起きているエラーなどもこちらで確認できるので是非活用するようにしましょう。
LightHouse紹介記事
さいごに
我々エンジニアがSEOについての理解をしっかりと深めることで、よりユーザーの立場になって考えられるエンジニアになることができると思いました。
ここに紹介したこと以外にも、SEO対策としての取り組みは色々あるので、興味を持っていただけたら是非調べてみてください！
参考記事
＼もっと身近にもっとリアルに！DAAE公式Twitter／
執筆者プロフィール: Kensho Tanaka
21年新卒としてSHIFTに入社しDAAE部に配属。
１人でもwebサービスをリリースできるようなエンジニアになるために日々フルスタックな技術習得に励んでいます。
お問合せはお気軽に
https://service.shiftinc.jp/contact/
SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/
SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/