Menu
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;
925
React Helmet is a library that helps you deal with search engines and social media crawlers by adding meta tags to your pages/components on React so your site gives more valuable information to the crawlers. “This reusable React component will manage all of your changes to the document head.
Adding a new script tag and directly appending it to the <head> element of the page is the easiest way to add <script> tags in the React app. react-helmet is a third-party library that can be used to achieve the same thing by handling the <head> tag on every page.
You may edit the <title> tag in it to change the title from “React App” to anything else. Note that normally you wouldn't edit files in the public folder very often.
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).
BTW, I found the Sharing Debugger offered by Facebook to be quite helpful when debugging issues with sharing-related headers.
172
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"
40
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.
45
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
