Source:  Twitter logo

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>

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.

29 users liked answer #0dislike answer #029
Gokhan Sari profile pic
Gokhan Sari

Alternatively you can use the ogtag.me API to send data and create shorten links dynamically with previews and then share this shorten link rather than the link of the actual page.

0 users liked answer #1dislike answer #10
Jeremy Dain profile pic
Jeremy Dain

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).