Hey everyone! I'm reaching out because I'm having a tough time with SEO on my open-source Vite + React project, which is still in its early stages. I want to make it easier for new developers to find and contribute to it, but I'm facing some serious SEO challenges. I've tried various solutions like react-helmet, Vite SSG, and server-side rendering with vite-plugin-ssr, but I'm seeing issues where the head tags don't update correctly for different pages. They seem to refresh only after a while and only when JavaScript is enabled, which doesn't help with crawlers that don't execute JS. I know I'm missing something fundamental about implementing SEO in modern React apps. Is it even feasible to achieve good SEO in a Vite SPA setup, or am I just out of luck if I want pages that are crawlable by non-JS bots? Any experiences or suggestions would be greatly appreciated, especially if you've tackled SEO for an open-source project!
3 Answers
If your site relies on non-JS crawlers, those crawlers won’t see your content since they can't execute JavaScript. Google does have crawlers that can run JS, but they aren't as efficient. I'd recommend looking into SSR or static site generation for better SEO results. Yes, CSR sites can be indexed too, but it takes longer to show up in search results—sometimes even a week! Keeping your site light with less heavy JS can help crawlers index your site more effectively. Consider simplifying things to get better engagement overall.
If you want optimal SEO benefits, consider moving toward a full SSR setup. Setting one up can be quite complex if you're doing it yourself, especially without using a framework like Next.js or Nuxt. But I believe that SPAs, while previously thought of as the ideal solution for everything, might actually lose ground as the web evolves. It's possible that CSR sites might rank better moving forward since they offer a more authentic content experience. Still, if you want easy indexing for Google, plain SSR or static HTML is the way to go.
I see what you mean! Finding the right balance between smooth UX and SEO is tough.
You're not alone in this! The main issue is that if your HTML isn't there before the JavaScript runs, crawlers will miss it. Tools like react-helmet only modify the head after JS loads, which isn't helpful for SEO. Many successful React projects kind of workaround this by keeping their core app as an SPA but serving static HTML for the homepage and docs, which is discoverable by crawlers. It’s crucial for open-source projects to have easily accessible documentation rather than relying solely on deep app routes for discoverability. So, you're definitely not screwed, but you might need to rethink how your project structure works in terms of SEO by separating your marketing pages from the app itself.
Thanks for the advice! I’m going to focus on creating static HTML for the main pages and use the React app for the interactive parts.
This really clears things up for me! Making the right changes should help me a lot.
That's helpful! I’ve been worried since my site is pretty JS-heavy. I'll look into optimizing it.