web-dev-qa-db-ja.com

検索エンジンがユーザー生成コンテンツを簡単に見つけられるようにプログレッシブWebアプリを構成するにはどうすればよいですか?

まったくの質問ですが、消費者向けのWebアプリを構築するのはこれが初めてです。重複のために閉じられないようにするために、この質問はReact + GraphQL専用です。

私は多くのユーザーが生成したコンテンツを持つウェブサイトを作成していますが、コンテンツが検索エンジンによって見つけられるように最適化されることは非常に重要です。ただし、コンテンツはデータベースのどこかに保存され、GraphQLクエリを介して取得されます。 検索エンジンがユーザー生成コンテンツを簡単に見つけられるようにWebアプリを構成するにはどうすればよいですか?最初から順守すべきアーキテクチャ上の決定事項やパターンは何ですか?

これを支援するパッケージがたくさんあることは知っていますが(Helm、React-Router、Next/Razzle)、これらのすべてのパーツを最良の方法でまとめるにはどうすればよいですか?

コード例は間違いなく物事を明確にするのに役立ちます。

1
Meme Overlord

静的にレンダリングされたサイトよりも確かに多くの作業がありますが、これはかなり実行可能だと思います。あなたがする必要がある最大のことは、あなたの コンテンツがGoogle検索ボットにレンダリングされる であることを確認することです。 Googlebotは一般的にJavaScriptを実行しますが、ES6を回避またはトランスパイルする必要があり、一般的にChrome 41に存在しないAPIを使用しないでください。 Google Search Consoleでそれらがどのようにレンダリングされるかを確認します。

標準的なアプローチでは、Google以外の検索エンジンによってマイルが異なる場合があります。 Googleよりも基本的な検索エンジンクローラーに物事を提示したい場合は、 必要になります を調べます prerendering 。事前レンダリングにより、ユーザー(またはクローラー)がロードしたときにサーバーが既にレンダリングされたページを返すようになります。

プリレンダリングとは何か:

https://www.netlify.com/blog/2016/11/22/prerendering-explained/