Misleading SEO/opengraph compatibility

[mmichealjroberts]

Unfortunately, React Helmet simply does not provide good compatibility with opengraph data.

We inherited a project which uses React and React.Helment extensively, and although the head updates - this is a virtualised DOM update. Facebook and Twitter can not crawl the opengraph meta provided.

I have added the following to the React Render function:

`

      <meta name="twitter:card" content="summary" />
      <meta name="twitter:site" content="@<twitter_handle>" />
      <meta name="twitter:creator" content="@<twitter_handle>" />
      <meta property="og:url" content={ window.location } />
      <meta property="og:type" content="article" />
      <meta property="og:title" content="Artwork Share | Chenja" />
      <meta property="og:description" content={ this.props.artwork.description } />
      <meta property="og:image" content={ this.props.artwork.image.src } />

`

And then using Twitter's card debugging tool, we get the following issue:

INFO: Page fetched successfully INFO: 7 metatags were found ERROR: No card found (Card error)

For anyone reading: Please do not be duped by this half baked, flavour of the month Frameworks when building modern, SEO friendly websites.

[ablankenship10]

You shouldn't be using React for front-end SEO sales pages anyway. Google is decent at parsing it, but if you want your page read properly by bots it needs to be server-side rendered. Try Next.js. I haven't tried it, but Helmet should then work as expected after your page is rendered on the server.

[mmichealjroberts]

Yeh but it's a pretty standard SPA - if Facebook's own propriatory frontend framework does not allow for SEO opengraph meta data to be picked up - then either the framework is junk, or their meta data crawling is junk.

[mkarajohn]

Render the header (of the page the user lands on) server side and deliver it in the served HTML. Works fine.

[mmichealjroberts]

"Just do something that isn't in the documentation. Works fine".

[mmichealjroberts]

Bottom line - this doesn't work for opengraph data, please add this to the README.md / documentation.

[mkarajohn]

"Just do something that isn't in the documentation. Works fine".

It's not the docs' job to tell you how to utilize the library in your usecase. I've implemented the same thing I suggested, on a production site, using the documented API, and it works fine.

[3nvi]

@michealjroberts Please don't forget the this is a free & open source library. You didn't pay for it. If you found a bug, then help fix it. Don't deter other people from using it, simply because you found some sort of issue.

[mmichealjroberts]

@mkarajohn Pretty sure opengraph isn't an edge use case...but, opinions.

[mmichealjroberts]

@3nvi If it is open - it is open to critique. Appreciate that work goes into these things, but also appreciate you can waste people's time.

[3nvi]

@3nvi If it is open - it is open to critique. Appreciate that work goes into these things, but also appreciate you can waste people's time.

It's your attitude that causes the issue, you could have phrased the exact same thing differently, but you chose to attack the lib instead of politely asking whether this can be fixed.

P.S. I understand that this conversation should be limited to the issue that you opened, so I'm going to stop here.

[Loque-]

Hey @michealjroberts , I am using this specifically for opengraph tags and I have solutions to the problem you are having (I literally take time crafting the unfurl cards) - which has nothing to do with Helmet, but ALL JS driven applications that do not return a server rendered page.

You can;

• Use a pre-render service, which if you are on Netlify is free, or maybe your project fits under the free tier on https://prerender.io/ OR is cheaper than you taking the time to learn and use next.js or SSR
• Alternatively use next.js to render your pages (or parts of the page) on the server so bots can crawl this
• Look into other solutions for SSR

I am using the prerender service on Netlify on a few sites, including https://kurtriddell.com/

I hope that helps! I appreciate the challenges and frustrations of development, but you should probably come at this from a different angle - no-one was born with the knowledge and we are here to help each other out.

If you think pre-render/SSR information should be included in the documentation make a PR and help the next you who reaches this problem. For clarity, the problem you are having tho, is not a Helmet thing, but a SPA thing.

[mmichealjroberts]

@3nvi Yes, it's probably best we stop. It's just maddenning when the documentation omits possibly the most important aspect of why you would want to use this tool.

@loque Of course, but sticking to the original comment - people who are new to React need to know that opengraph tags will not work with Helmet. This is from the documentation:

Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.

It supports them, sure. But it is misleading - as it does technically support them - but really for me >60% of people who would use this tool is for SEO reasons. It needs to be stated much, much more clearly.

[Loque-]

@michealjroberts it is assumed that as someone who is using React (or building any SPA with or without a framework) would be aware that not all (but some!) bots parse the JS of a site in a headless browser before collecting data...

The supports text is not misleading, it does (technically) do all of those things (I am using it, and it is working) - what it will not do, however, is create server rendered pages for you automatically, you need a strategy for this and do it yourself (as mentioned, there are quite a few options).

Don't get me wrong, I implemented Helmet on my first React site and then had the "oh" moment, when I realised I had overlooked how a bot is supposed to parse my SPA, but that was on me, not on Helmet - luckily we are part of an awesome community that helps each other and we have access to some seriously awesome tools that literally solve this problem for me with very low effort combined with Helmet.

I would strongly urge you to change your approach on this in general tho, contributing to open source software takes time, criticising people who have worked for free, when you have the power to make a PR, is not a good look - help be part of a positive community that supports and helps each other. <3

[Loque-]

I should also add, it's ok to be frustrated with the current state of building websites/applications! Everyone who does development can empathise with debugging an issue and realising something is a problem which we had not even considered or thought of that then requires even more time to solve.

[kevando]

You need to pre-render your html

https://create-react-app.dev/docs/pre-rendering-into-static-html-files

[ggepenyan]

I can't use open graph image. Any update on this?

[Elius94]

A solution for this is using this library.

This is a Javascript command that automatically modify the main html file (like index.html) to add the provided SEO meta tags and more. Designed for Create React App. For example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.

Using with Create React App (CRA)

In a standard CRA project, we have to add seo html tags into the production build index.html file.

To make it automatic, we can edit the package.json file at the build script:

from this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

to this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npx seo-injector",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

And then we have to create a seo.json file in the same directory as the package.json file.

Example json file (seo.json):

{
    "title": "Example Title",
    "description": "Example Description",
    "keywords": "Example Keywords",
    "author": "Example Author",
    "openGraph": {
        "url": "https://example.com",
        "title": "Example Title",
        "description": "Example Description",
        "image": "https://example.com/image.jpg",
        "site_name": "Example Site Name",
        "type": "website",
        "locale": "it_IT"
    },
    "twitter": {
        "image": "https://example.com/image.jpg",
        "url": "https://example.com",
        "card": "summary_large_image",
        "title": "Example Title",
        "description": "Example Description"
    },
    "favicon": null,
    "manifest": null,
    "icons": [{
            "src": "https://example.com/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://example.com/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Then we can run the build script:

npn run build

and the seo tags will be injected into the ./build/index.html file.

[gezquinndesign]

Hey @michealjroberts , I am using this specifically for opengraph tags and I have solutions to the problem you are having (I literally take time crafting the unfurl cards) - which has nothing to do with Helmet, but ALL JS driven applications that do not return a server rendered page.

You can;

• Use a pre-render service, which if you are on Netlify is free, or maybe your project fits under the free tier on https://prerender.io/ OR is cheaper than you taking the time to learn and use next.js or SSR
• Alternatively use next.js to render your pages (or parts of the page) on the server so bots can crawl this
• Look into other solutions for SSR

I am using the prerender service on Netlify on a few sites, including https://kurtriddell.com/

I hope that helps! I appreciate the challenges and frustrations of development, but you should probably come at this from a different angle - no-one was born with the knowledge and we are here to help each other out.

If you think pre-render/SSR information should be included in the documentation make a PR and help the next you who reaches this problem. For clarity, the problem you are having tho, is not a Helmet thing, but a SPA thing.

TIL about the Netlify pre-render service and I am grateful. Thank you @Loque-