search

staylor / react-helmet-async

Thread-safe Helmet for React 16+ and friends
Apache License 2.0
2.14k stars 155 forks source link

Is it possible to change meta tags dynamically while page is loading and after that share it to some socials? #218

Open Lenur29 opened 8 months ago

Lenur29 commented 8 months ago

Hi @staylor. I need your help if it is possible

Here is the case. In my React(SPA) application I have only one page that needs to be shared. And when it is shared I need to add the following meta tags to the head element:

<head>
  <meta name="description" content="some text" />
  <meta property="og:image" content="../../some-ing.png" />
  <meta property="og:description" content="some text"  />
</head>

It changes meta tags when the page mounts if I check it in the developer tools, but when I share the link to this page the image and description are not shown with a link. is it posible to implement it without SSR using react-helmet-async?

chulinguy commented 8 months ago

@Lenur29 I worked on this exact same issue.
IIRC, Facebook bot can sometimes "see" the updated metas from React-Helmet-Async, but not Twitter Bot.
I had to implement a conditional logic on the server for the bots.

KaushikJnext commented 7 months ago

Hello @staylor I'm using react-helmet-async. could you assist me with managing dynamic meta tags for Google's web crawler effectively.

index.html image

page.js import { Helmet } from 'react-helmet-async';

<Helmet onChangeClientState={newState => { // Add description const metaDescription = document.querySelector( 'meta[name="description"]' ); if (metaDescription) { metaDescription.setAttribute('content', description || ''); } }}

{title}