DEV Community 👩‍💻👨‍💻

An one-minute fix to make your React site just a bit more Google-friendly 🤝

SEO (Search-Engine Optimization) remains important as long as we live in the Google era. Many React apps are written as SPA (Single Page App) and are not Google friendly, as it takes extra effort for Google to render and scrape the front-end Javascript.

Here is an example of how Google indexed my side-project getd.io when it was initially launched. You can see the site description are just some random words from scraping my website's JS:

Alt Text

Btw, a shameless plug: getd.io is a free, online API builder that I created as Postman without the native apps. Give it a try and let me know what you think. You can also read more in this post.

Ideally, we could use SSR (Server-Side Rendering) to help Google get a fully rendered static page, but SSR is tricky and ain't nobody got time for that 😅

To quickly fix this, I used react-helmet to add META tags to getd.io. Then, I went to Google Search Console and requested a re-index. After that, the search result looked much better:

Alt Text

And here is what my code looks like:

const seo = {
  title: "getd.io/",
  description:
    "A free, online API builder that works with CORS. A Postman alternative without the need for client app installation.",
  url: "https://getd.io/",
  image: "https://getd.io/image.png"
};

<Helmet
  title={seo.title}
  meta={[
    {
      name: "description",
      property: "og:description",
      content: seo.description
    },
    { property: "og:title", content: seo.title },
    { property: "og:url", content: seo.url },
    { property: "og:image", content: seo.image },
    { property: "og:image:type", content: "image/png" },
    { property: "twitter:image:src", content: seo.image },
    { property: "twitter:title", content: seo.title },
    { property: "twitter:description", content: seo.description }
  ]}
/>

You can put <Helmet> component anywhere in your React tree, and they will be properly moved to under <head>:

Alt Text

Top comments (10)

Collapse
 
rowin1125 profile image
Rowin Mol

SSR is indeed tricky if you're trying to create the code yourself, why not just use something like NextJS to make your site (or single page) completely SEO suitable?

Collapse
 
techbos profile image
TechBos😎

I did a quick glance on NextJS and it seems a great tool with SSR support out-of-box. However, when I started looking deeper into how to integrate NextJS with react-router, express, passport and GraphQL, things started to get a bit messy. The official example code to work with express and user auth was only recently added and required quite some setup using Micro and etc. It seems to me that the support for a more dynamic backend wasn't something NextJS was built for.

I will keep an eye on the framework but in general I'd say SSR is still tricky if you have a fairly complex, real-world backend :)

Let me know if you disagree or I missed something.

Collapse
 
rowin1125 profile image
Rowin Mol

Interesting and can see why this is messy if you trying this yourself. I learned it by a good tutorial of Wes Bos (Advanced React & GraphQL), in which you build an webshop with Nextjs, Graphql and Apollo. Highly suggest looking into to the examples of that course, really intersting :D

Thread Thread
 
techbos profile image
TechBos😎

Thanks for the pointer. Will check it out!

Collapse
 
techbos profile image
TechBos😎

I haven't get a chance to learn NextJS but I will for sure check it out! Thanks for the good pointer.

Collapse
 
dellward profile image
Dell Ward

You had me at "ain't nobody got time for that" 🤣 Great post.

Collapse
 
techbos profile image
TechBos😎

:D

Collapse
 
seanmclem profile image
Seanmclem

How is this different from manually adding The Meta tags? Isn't helmet more for adding meta tags per page using SSR?

Collapse
 
jeromedeleon profile image
Jerome De Leon

Yes, using Helmet is overkill for just a single component but I think he's just giving a way for SPA -> SEO friendly without using SSR.

Collapse
 
seanmclem profile image
Seanmclem

Right I was just merely pointing out that because it's only for the homepage - you could literally just use meta tags in a spa still. And also asking because I'm not a hundred percent sure, but it seems like helmet is a library meant for SSR

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠