seo Question posted in
Some basic information to get you started with this can be found here.

Google Not Showing React-Helmet Title And Description – SEO

I’m using react-helmet to give each of my pages a unique title and description for my React application. The title is rendering correctly in the browser tab and the title and description are rendering correctly when I inspect the page using Dev Tools. However, Google isn’t showing either the title or description in their search results. What am I doing wrong?

I’ve looked into using prerender.io but as my site doesn’t have a backend (it’s just a marketing site for the moment) I’m not sure it’s a good solution. I’ve removed some elements, but this is essentially how my code looks…

import React, {Component} from 'react';
import {Helmet} from "react-helmet";

class Home extends Component {
  render() {
    return (
      <div>
        <Helmet>
          <title> My title </title>
          <meta name="description" content="My description"/>
        </Helmet>
      </div>
    )
  }
}

export default Home;
Tags:

4

Answers


  1. 0

    I am not sure if you have already figured out!

    Try removing <meta name="description"> and <title> from public-> index.html folder.

    Inject all <head> section using React Helmet directly to your js files. If your app.js is your landing page, try injecting all meta tags over there directly.

    Also check your indexed page has data-react-helmet=”true” in your meta tag, using Google Search console.

    Request for re-indexing and wait for google to crawl again.

    It’s currently working for me in “react-helmet”: “5.2.1”

    Login or Signup to reply.
  2. 0

    Although not specifically what you are asking for, you or others who may find this question may benefit from server side rendering. Even if you change up your react-helmet configuration, sites like Facebook will not cache your title and description when rendered via javascript.

    Login or Signup to reply.
  3. 0

    I’m hosting a client side rendered React application and using react-helmet 5.2.1 to manage og tags and other sharing-related headers. I was running into the described issue with Facebook (and other websites), in that my sharing-related headers were not being recognized.

    My React website is hosted using Netlify and the fix was to enable Netlify’s Prerendering setting. After enabling Prerednering, sharing-related headers were immediately recognized. It seems headers rendered client-side are not recognized (more information from this SO question).

    enter image description here

    BTW, I found the Sharing Debugger offered by Facebook to be quite helpful when debugging issues with sharing-related headers.

    Login or Signup to reply.
  4. 0

    I had issues with my description tag which wasn’t showing up correctly. Google instead displayed some random text from my post in the search result. Then I realized I didn’t install the gatsby-plugin-react-helmet alongside the react-helmet package.
    So:

    npm install gatsby-plugin-react-helmet react-helmet

    And in your gatsby-config.js file, add the plugin.
    That solved my issues.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search