nfl / react-helmet

A document head manager for React
MIT License
17.37k stars 661 forks source link

Googlebot not crawling React Helmet title and meta description on homepage #377

Open cliffasaurus opened 6 years ago

cliffasaurus commented 6 years ago

Hi everyone :D I've been using react-static with Netlify and enabled prerendering and I'm running into a problem with Googlebot. It can't seem to fetch my title and meta tags properly for the homepage. I use React Helmet and using fetch as Google does not reflect the tags I declared in<Helmet>for home.js.As in they're not there.

I find it very weird since I use react helmet for the ALL the other pages and it works perfectly on them. fetch as Google returns <title data-react-helmet="true">MY OTHER PAGE TITLE</title><meta data-react-helmet="true" name="desccription" content"MY OTHER PAGE CONTENT"/>

I have script injections of a chat widget and google analytics and I think that they may have something to do with it but other pages have them as well and it renders well.

Any idea how I should proceed? Thanks!

mattlr20 commented 6 years ago

I was having the same issue with React-Helmet + React-Router v4 on Netlify. To solve my issue, I generated a sitemap using botnap.io. I added the sitemap to my search console and used "Fetch as Google" to request indexing for each route.

rawris commented 6 years ago

@cliffasaurus Did you find the solution? I think I'm facing the same issue as Google structured data only fetch the structured data json/ld not all the meta tags.

ghost commented 6 years ago

Same here. The googlebot and bingbot do not recognize any changes.

cliffasaurus commented 6 years ago

Okay I've returned to this after about a month and I did absolutely nothing and the google result now properly shows what I have inside the meta tags.

@Rickmey it's weird that when this issue popped up last month, I was testing this on Bing, the result is okay.

ghost commented 6 years ago

@cliffasaurus I found that search engines currently not support true SPA. Google does not recognize any changes to the head. Bing does nothing for me. I solved the issue with Google by rendering the head server sided - specifically for crawler with the cost of double requests. As for now the only reliable way to get indexed everywhere is to use server sided rendering.

Vanals commented 6 years ago

@cliffasaurus How have you checked if Google was able to see your helmet meta tags?

tiarebalbi commented 5 years ago

Any updates on this issue? Still happening

xjoyzaza commented 5 years ago

why you guys say google don't see helmet meta tags , I use https://search.google.com/search-console and see the helmet meta update the title

gpanneti commented 5 years ago

I see them also in the source code of the crawled webpage but it seems that it does not change anything in the results title / description.

shacco commented 4 years ago

Agust 2020 still happening. google bot does not recognize my metadescription. If i have to use a server to do SEO. There is no point on write here. Does someone found any solution at all?

aquinaso commented 1 year ago

Few insights about this topic. I learned that React Helmet supports Client-side Rendering, not Server-side Rendering. For Letting Google Bot ( e.g. google search console ) read some meta tags, we need to hand our meta tags over to the server. Because, Google Bot reads what server gives.

So We need to prepare some files for Server-side Rendering ( SSR )

Working on Gatsby , ReactJS

  1. I prepared a protocol for robots, so I made Robots.txt file under ./root/public/ folder.
  2. I prepared a .js file named 'gatsby-ssr.js' for Server-side Rendering (ref. gatsby docs)

file content composed like this.

// gatsby-ssr.js
// For Server-side Rendering
import React from 'react';

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <meta
      key="google-site-verification"
      name="google-site-verification"
      content="[hash value that made by who has robots]"
    />,
    <meta
      key="naver-site-verification"
      name="naver-site-verification"
      content="[hash value that made by who has robots]"
    />,
    // any other meta tags send to a server first, before client-side rendering.
  ]);
};

I hope this comment help y'all. Have a good day.

Zifah76 commented 5 days ago

ed the sitemap to my search console and used "Fetch as Google" to request indexing for e

Bro, How to update? ![Uploading SEO Meta 1 click.png…]()