この記事は MICIN Advent Calendar 2023 の 21日目の記事です。
前回はDaichi Sakaiさんの、MICINのID基盤の取り組み でした。気になった方は是非読んでみてください！！
株式会社MICINのオンライン医療事業部でフロントエンドエンジニアをしている影山です。
今年の下期は当社で運営しているcuron (クロン)お薬サポートのSEO施策を重点に開発、施策検討などをしていき開始前の7倍の表示回数、5倍のクリック数にあげることがきましたので、特にエンジニアとして考えさせられた部分についてピックアップして書いていければと思います。
SEOで大事なこと
SEOで大事なものと聞かれて何が思いつきます？？
- index数
- サイトのコンテンツ充実
- 画面読み込み速度
などなど
色々なことが思い浮かぶかと思うのですがどれも正解だと思いますが、SEOを考える中で本質として一番大切なので伝えることだと今回学んでいて感じました。
クローラーとユーザ に対して正確に素早く情報を伝えることで、サイトの評価をあげることに繋がってきます。そのための手法として先ほどあげた事やコンテンツの充実・サイトの構造化などが必要になります。
今回はSSRやSSGがSEOに有効と言われているが、それは本当に有効なのかについてピックアップして紹介します。
SEO技術を基本から学びたい場合はこちらを読むのがおすすめです。↓
JavaScriptはSEOに弱いって本当なの？
「Next.jsがSSRとかできるしSEOに強いからいいよ〜」ってよく聞きますよね？
自分もよくNext.jsの良さを話す時に言うのですが、ふっとgoogleの下記の記事を読んで疑問に思ったんです
「ふむふむ、クローラーはJSでもレンダリング処理をして読み込んでくれるらしい！なるほど！！じゃあ別にSSRとかしなくてもクローラーは評価してくれるじゃん、巷で噂になっていたのはSSRとかじゃないとSEOはだめっていうのは嘘じゃん」と思ってしまいました。
ですがやはりそうではありません。ここで大事になってくるのは下記の画像の「レンダリングキュー」とレンダリングコスト（処理時間と計算リソース)についてです。
レンダリングフェーズ
引用: JavaScript SEO の基本を理解する
HTML+CSS :
HTML+CSSだけで構成されたページであれば、クライアント側に渡る際にはコンテンツは表示された状態で渡ります。そのためクローラーは待ち時間なしにページを評価します。これはレンダリングコストの消費が一番少なく、正しく評価されます。
クライアントサイドレンダリング（CSR）:
一方CSRだと初期で渡ってくるのは、下記の画像のようなJavaScriptを読み込んでねと言う画像のみになってしまい。
CSRの初期表示
ここからクライアント側でJavaScriptを読み込み画面をレンダリングすることになるのですがここでレンダリングコストが消化されてしまいます。
良質なコンテンツを作っても、他のSEO最適化を行ったとしても、これではコンテンツが不完全な状態で評価されてしまい、サイト自体の評価があがらず検索エンジンの上位を目指すことが難しくなってしまいます。
こちらを解決するためにSSR,SSG,PreRenderingなどでクローラーに渡す時点でレンダリングされていればレンダリングキューはあまり発生せずにコンテンツを正しく評価してもらいSEO的にも有利になります！
このように単純にコンテンツ強化やサイト構造化をするだけではSEO対策としては不十分です。
前提としてエンジニア側でSEOを意識した開発体制と技術選定がすごく大事になってきます。作るだけでなく届けることまで行ってようやくサービスが完成するということを改めて思いましたね。
最後に
SEOやクローラーについて調べていくと、めんどくさいページは後回しにしたり、パッと理解できないページは評価しなかったり、サイトの案内であるサイトマップなど地図を用意してあげないと評価してくれなかったりと、なんだかすごく人間的だなぁ〜と段々と愛着まで湧いてきました。(あ、嘘です)
ですが人間関係もSEOも一緒でしっかり相手にわかりやすいように整理をして伝えてあげることが大切になることがわかりました。
皆さんもSEOに力を入れる際は伝わるページになっているかを色々な視点から見てみると良いかもしれません。
MICINではメンバーを大募集しています。
「とりあえず話を聞いてみたい」でも大歓迎ですので、お気軽にご応募ください！
Discussion