Why og:image does not rendered with React?

user_239219 0
Viewed 7655

Try to have thumbnail when sending website link in Facebook message. Started to use s-yadav/react-meta-tags followed tutorial but image is not present after link sent.

Link: https://ticket-44-portal-staging.herokuapp.com/buyTicket?status=1959165690885328

applied following code in React componenet:

return (
<div className="container">
  <MetaTags>
    <title>{searchedEventTime.name}</title>
    <meta name="description" content={searchedEventTime.description} />
    <meta property="og:title" content={searchedEventTime.name} />
    <meta
      property="og:image"
      content={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${eventId}.cover.jpg`}
    />
  </MetaTags>

I can see rendered meta tags in HTML, why it isn't work?

enter image description here

enter image description here

reactjs facebook-opengraph
1 Answers

It is because the website is a single-page app. Before the JavaScript is loaded, everything rendered by React is not there yet(including those meta tags). You can verify it by right-clicking the page and select "view source", you will see that inside body, there is only a <div id="root"></div>. The problem is that many search engines and crawlers don't actually run JavaScript when they crawl. Instead, they look at what's in the initial HTML file. And that's why Facebook cannot find that "og:image" tag. There are two ways to solve this problem.

TL;DR Host your app on Netlify if you can. They offer prerendering service.

First, you may look at prerendering which is a service to render your javascript in a browser, save the static HTML, and return that when the service detects that the request is coming from a crawler. If you can host your React on Netlify, you can use their free prerendering service(which caches prerendered pages for between 24 and 48 hours). Or you can check out prerender.io. This is the solution if you don't want to move to another framework and just want to get the SEO stuffs working.

Another more common way to deal with this problem is do static site generation(SSG) or server side rendering(SSR). These mean that HTML content is statically generated using React DOM server-side APIs. When the static HTML content reaches client side, it will call the hydrate() method to turn it back into a functioning React app. Two most popular frameworks are Gatsby.js and Next.js. With these frameworks, you will be writing React and JSX code like you already do. But they offer more to power your app, including SSG, SSR, API routes, plugins, etc. I'd recommend you to check out their "Get started" tutorials. Transferring from a create-react-app to one of these frameworks can take less than a day, depending of the size of your project.

After implementing one of these solutions, visit Facebook Sharing Debugger to ask Facebook to scape your page again.

user_99121940
Related