1
1
テーマ、知りたいこと
メインとなるページに対してサブページを追加していく際、どのようなやり方、構成があるか。メリットとデメリットを知りたいです。
背景、状況
店舗のwebサイトのSEO対策として、ブログやコラム記事を掲載したいです。
この場合にどのような方法が最適であるか皆さんの意見をお伺いできればと思います。
Vite、React、Typescript、Firebaseを使用しています。
ディレクトリの構成やホスティングするサイト数などおすすめを教えていただきたいです。
回答5件
#1
総合スコア241
投稿2024/07/16 02:27
いくつか質問させてください。（回答によって選択すべきものが見えてくる可能性があるためです。
店舗のwebサイトのSEO対策として、ブログやコラム記事を掲載したいです。
- こちらのブログやコラム記事はどのように生成予定でしょうか？（パスをすでに決めているのであれば、サンプルでいただきたいです。
- このサイトのようないわゆるCGM（利用者が勝手にページを作成できるメディア）を想定しているのでしょうか？
一般論的な話で、ReactプロジェクトでSEOを考慮した上でWebサービス（サイト）を立ち上げる場合、
- Next.js、Remix、Astro.jsといったフレームワークを使用してSSRでHTML生成を行うようにする
- CDNやSSGと組み合わせて静的ページとして生成・配信をする
などは、SEO的には必要になるかと思います。
SEOについても語弊を恐れず端的に言えば、
「クローラー（Webサイトを見て回ってSEOの順位を決めてくれるbot）がそのページを認識して良し悪しを決めることで掲載位置が決まる」
といったものです。
そのため、単にページを作れば良いというわけではなく、クローラーが訪れた際にページとして出来上がっている必要があります。（CSRなどではクローラーが来た時点では完全なページとなっていない可能性があり、SEOには向いていないと言われています）
どのようなやり方、構成があるか。メリットとデメリットを知りたいです。
一旦、上記の2種類のやり方についてSEO的な視点で回答するのであれば以下でしょうか。
Next.js、Remix、Astro.jsといったフレームワークを使用してSSRでHTML生成を行うようにする
-
メリット
- CGMでも最新のデータでクローリングされやすい (SEOにとって良い)
- Routingに関しても一定の記法・文法が担保されている（Next.jsで言えばPageRouterやApp Routerなどがある）ので、フレームワークに沿って開発することは比較的容易い
-
デメリット
- フレームワークの学習コストがかかってしまう
- フレームワークでは機能過多になってしまう
CDNやSSGと組み合わせて静的ページとして生成・配信をする
- メリット
- キャッシュを使用するイメージですので、配信が早くパフォーマンスに優れたページを生成しやすい
- SEO的にも問題ないです
- キャッシュを使用するイメージですので、配信が早くパフォーマンスに優れたページを生成しやすい
- デメリット
- CGM想定だと、投稿直後・編集が発生したときなどにコンテンツの提供や更新が遅れてしまう可能性がある
誤り等あればつついていただけますと幸いです。
#2
#1
ご丁寧なご回答ありがとうございます。
1.ひとまず下記のようにサブディレクトリで作ってみました。
https://totonouto.com/saunaWords/
2.記事の投稿は店主（私）が行います。
フレームワークを使用することも検討したのですが、やはり学習コストが大きいと感じています。
ある程度学習コストがかかるのはしかたないですが、
まずはすぐに実現できる方法で進める。
その裏で少しずつ学習し、ある程度形になったところで切り替えるのが良いかと考えています。
状況を細くしておきますと、
私は本職が上記の店舗の経営になります。
web開発は少しスクールに通いましたがほぼ独学に近い状態です。
誤った認識やアンチパターンが多々あるかと思いますが、お手柔らかにお願いします。
#3
総合スコア241
投稿2024/07/16 08:04
編集2024/07/16 08:09#2 shibababaさん
ご返信ありがとうございます！
1.ひとまず下記のようにサブディレクトリで作ってみました。
https://totonouto.com/saunaWords/
サンプルありがとうございます。saunaWordsはブログやコラム記事にあたるのでしょうか？
もしそうなのであれば、自分なら、
https://totonouto.com/blogs/saunaWords/ https://totonouto.com/columns/saunaWords/ https://totonouto.com/contents/saunaWords/ ↓ https://totonouto.com/このディレクトリの総称/記事タイトル
のような形にします。
もしブログとコラムが、質問者さんにとって全く別物であるならば、/blogs/と/columns/を用意することで、
- URLレベルでどんな記事が入っているのかの情報整理ができる
- クローラーもURLからどんなページなのかがわかる方が良いとするアルゴリズムが組み込まれているぽいです
- ブログのデザイン、コラムのデザインが別であるならば、テンプレート化してデータを入れるだけでページを増やせる
- フォトギャラリーなどを増やすなどなったときも
/photos/のようなパスを切って情報を整理できる
※ この辺りはRESTの原則に沿っている感じで、簡単に言えば、URLは必要なリソースへのアクセスをかなえるものだよ〜みたいな話です。例えば特定のブログにアクセスしたいのであれば、/blogs/ブログのタイトルとすることでこのタイトルのブログを見たいよ〜みたいな感じにできるのでユーザー（クローラー）にとっても開発者にとっても情報が整理されるので見つけるのが楽だよ程度です。そうしなければ動かないということはありません。
- 記事の投稿は店主（私）が行います。
コンテンツの管理を全て質問者さんが行うのであれば、そこまで気にせず技術選定してもいいかもしれません。
個人的にはSSGでビルド時にページを生成する方法を採用すると思います。（SEO的にもサイト速度的にも優れると思うので）
全ての質問に回答できてはいないと思いますが、ご参考にいただけたらと思います！
#5
総合スコア241
投稿2024/07/16 08:28
一応この辺りのサイトは学習の参考になりそうなので共有しておきます！
https://ahrefs.jp/blog/technical-seo/react-seo/
https://www.techmagic.co/blog/react-seo/
https://reactrouter.com/en/main
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。