SEOまとめ
こんにちは。
社内でSEOに関するタスクを多く任されることとなり、いい機会なのでフロントエンドエンジニアが最低限頭に入れておくべきだと思うことをまとめようと思います。
SEOに関する情報は本やブログ等、様々なところで見かけますが、真偽がよくわからないなぁというのが正直なところです。
なので今回は公式の裏付けがある情報のみ、まとめていこうと思います。（公式は大事）
公式SEOスターターガイド
SEO対策とは
検索エンジンがより容易にコンテンツをクロールし、インデックスに登録し、内容を把握できるようにするために行うこと全般のことです。もちろんコンテンツの質も大切ですが、そこはエンジニアの役割とは少しずれてしまうので、今回は触れません。
SEO対策は大きく外部対策と内部対策に分けられ、内部対策はコンテンツとテクニカルの2つに分けられます。
外部対策
自分達だけではできないSEO対策のこと。
主に外部からのリンクを獲得するために行う施策のことを言うようです。
SNSの運用や、リンクを貼りたくなるような良質な記事やツールを用意する等が主な対策方法となります。
エンジニアにできることは少ないので、今回は触れません。
内部対策
自分達だけでできるSEO対策のこと。
コンテンツSEOとテクニカルSEOに分けることができます。
コンテンツSEO
質の高いコンテンツを提供するために行う施策のこと。
こちらもエンジニアにできることは少ないため、今回は触れません。
ちなみに質が高いコンテンツとは具体的にどのようなものを指すのか、ちゃんと公式に書いてあります。
質の高いコンテンツ
テクニカルSEO
検索エンジンへの情報提供を最適化するために行う施策のことです。
やっとフロントエンジニアの出番です。
テクニカルSEOはクローラー向けの施策、インデックス向けの施策の2つに分けることができます。
クローラー向けの対策
クローラーがサイトを回遊しやすくするために行います。サイトのコンテンツをガンガンクロールしてもらいましょう。
URL構造と正規化
サイトのURLはできるだけシンプルにし、人間が理解できる文字列にする必要があります。
また、非 ASCII 文字はUTF-8エンコードを使用しましょう。
正規化とは簡単に言えば「一つのコンテンツに対して一つのURLにする」ということです。
似たようなコンテンツでありながら、別のURLを使用していた場合、Googleは重複コンテンツだと認定し、その評価を下げてしまいます。
言語（日本語版と英語版）の違いやhttpとhttpsの違い、モバイル版とPC版の違いなどだけではなく、コンテンツの内容が一部だけ異なっている場合も、一つの代表的なページにcanonicalを向け、正規化しましょう。
URL構造について
URL正規化について
階層構造の最適化
ユーザーにとってわかりやすい階層構造にしましょう。「ユーザーにとってわかりやすい」というのは「ユーザーが求めているコンテンツにできるだけ素早くアプローチできる」と言い換えることができます。
そうすることが、Googleのクローラーに素早く、効率的にクロールさせることにつながります。
具体的にはパンくずリストの使用やどこに飛ぶのかわかりやすいテキストを利用したリンクの使用などが挙げられます。
カテゴリー分けなど、大変なことが多いですが、しっかりやっておくと運用が始まってからの変更も楽にすることができます。
階層構造について
ページエクスペリエンス
ページエクスペリエンスとはモバイルフレンドリー、HTTPS、いきなり現れる広告などを出さないことに加え、ページの読み込み速度、初回入力までにかかる時間、視覚的安定性（この3つの指標をまとめてGoogleはCore Web Vitalsと呼んでいます）を含めた総合的な体験のことを指します。
Googleは今のところ、ページエクスペリエンスよりは情報の重要性に重きを置いているようですが、ページエクスペリエンスも重要であることに変わりありません。
フロントエンドエンジニアとしては、パフォーマンスは特に意識して開発を行いたいところです。
ページエクスペリエンスについて
モバイル対応
意外に面倒で疎かにしてしまいがちだと思います。
しかし、これが最も重要かもしれません。
Chakra UIやMUI(Material-UI)を使用する最も大きな理由はモバイル対応が簡単だから、、というフロントエンドエンジニアも多いのではないでしょうか。私はそうです
モバイルファーストインデックス
「モバイル版を第一に考えるよ」ということです。
Google のインデックス登録とランキングでは、スマートフォンエージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。
モバイルフレンドリー
googleでは、レスポンシブデザインによるモバイル対応を推奨しています。
URLやhead内のmetaタグ、コンテンツや構造化データがPCとモバイルで同じものであることが重要であるようです。（それを達成するのに最もシンプルな方法がレスポンシブデザインだというわけですね）
インデックス向けの対策
検索エンジンに対し、ページに書かれた内容を適切に伝えるために行う施策のことです。
せっかく頑張って作ったコンテンツです。Googleに正しく内容を伝えましょう。
タイトルとディスクリプション
タイトルはコンテンツの内容を正確に伝えるものである必要があります。
ディスクリプションとはメタタグのdescriptionのことです。ページの内容を正確に要約したものにしましょう。
いずれも使い回しは厳禁です。
タイトルとディスクリプションについて
見出し
hタグで囲むテキストのことです。主要なポイントはh1やh2、下位なポイントはh3やh4を使用し、強弱をつけましょう。ただ、使いすぎは厳禁です。意味のある場所で適切に使用しましょう。
見出しについて
画像
適切な画像を使用することであったり、画像ファイル名をテキトーなものにせず、キチンと意味あるものにすることなど色々ありますが、エンジニアとして特に意識したいのは読み込み速度の点でしょうか。
Next.jsであればnext/imageを使用することにより、簡単に画像を最適化できます。
画像について
リンク
リンク先がどのようなページであるかをわかりやすく伝えるテキストにします。
また、押し間違えないようリンクの箇所はリンクであるということをユーザーにわかりやすいデザインにする必要があります。
また、SPAでの内部リンクの場合、例えばNext.jsであれば<Link>の中に<a>を置くなど、クローラーに「これはリンクである」ということを伝えることも忘れないようにしましょう。
リンクについて
リンクのクロールについて
SPAにおけるSEO
フロントエンドエンジニアの皆さんがSEOについて考える時、最も頭を悩ませるのは「SPAではどうやねん」ということだと思います。（少なくとも、私はそうです）。
SSRがいいとか、ダイナミックレンダリングがいいとか、色々言われていますが、これについての情報ってかなり少ない上に確証がないんですよね。。
公式ドキュメントを漁りましたが、「JavaScriptもちゃんと実行したうえでインデックスしているが、実行できないJavaScriptもあるので、SSRも検討してね」、との記述しか見つけることができませんでした。
とりあえずサーチコンソールをチェックし、インデックスさせたいURLがキチンとインデックスされていたらよいのではないかと思います。SPAではURLもJavaScriptによるダイナミック生成なはずなので。
終わりに
SEOって正解がなくて難しいです。
また、この記事にあげたひとつひとつの最適化手法で一本ずつ記事が書けるくらい深いです。
法人向けシステムの受託畑出身の私にとっては、やらなきゃなぁと思ってはいても、なかなか手が出すのが億劫な分野だったのですが、実際にタスクを任されて勉強してみて、やっと頭の中が整理された気がします。
時間があれば効果測定につかうツールについても深掘りしたいなぁと思っています。（アナリティクスやサーチコンソール、speedInsightなど）
chatGPTが世間を騒つかせている昨今、SEOも今は昔のものになっていくのかもしれませんが、少なくとも今現在はtoCのWebサービスに必要不可欠です。
意識してフロントエンド開発を楽しんでいこうと思います！
Discussion