React Helmet: Facebook Open Graph

reactjs react-helmet
Timmy Lee picture Timmy Lee · May 5, 2018 · Viewed 22.6k times · Source

So I've got react helmet working on my client-side app to re-render facebook og tags into the head depending on which page is active in the app.

however the facebook debugger and facebook itself don't pick any of this up. am i missing something ? is this only possible with server-side rendered pages?

i hope not as i'll have to learn node.js! 

 <Helmet>
    <title>{props.title}</title>
    <meta property="og:url" content={ogUrl} />
    <meta property="og:type" content={props.type} />
    <meta property="og:title" content={props.title} />
    <meta property="og:description" content={props.desc} />
    <meta property="og:image" content={ogImg} />
 </Helmet>

Answer

Gokhan Sari picture Gokhan Sari · May 6, 2018

Most search engines and crawlers use server's response directly, not allowing you to alter it with javascript. So yes, what you need is server-side rendering.

Or, you can use tools like gatsbyjs, react-static. Basically, they render your components into HTML files beforehand.

Related questions

What is the purpose of react-helmet?

I've created a server-side react app, where it would return html as shown below: const html = renderToString(<App />); <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>A …

Read More
Adding favicon to <Helmet/> in React

I was trying to add a favicon in the <Helmet/> tag of a React App my current <Helmet/> tag looks like this. <Helmet title="ABC" meta={[ { name: "ABC", content: "ABC" } ]} links={ rel='icon', type='image/…

Read More
how to give dynamic meta tags in react js project

Currently, I am using meta tags inside the js file with react-helmet. It gives me the meta tags nodes while inspecting the element, but when I view the page source code or while trying to share my links in any …

Read More