React helmet is not showing the dynamic preview on social networks even after implementation

[rohan2734]

to report a Bug

** current behavior?**
React helmet is not showing the dynamic preview on social networks even after implementation

What is the expected behavior?
expected behaviour is to show the dynamic preview upon different blog URLS ,but only default home page meta description is showing

https://algorithammer.herokuapp.com/

but the expected behaviour is to show this text
A place which fits everything with happiness are cafes. Hyderabadi now crave for the best outdoor cafe with good Caffeine for perfect socio gatherings. There are top most must visiting cafes in Hyderabad, in order with work friendly, best themed for photoshoots, with best ambience and budget friendly for every single person to chill with friends to have some alone time.

this is not working on the latest version

[mwelwankuta]

I had been experiencing the same issue. I thought maybe this was because the the Facebook and or twitter bots just scrape for the html and do not run the JavaScript, hence the social media previews come from the default meta tags in the public/index.html file. server side rendering or pre-rendering might help you with your issue.

[rohan2734]

i know that server side rendering is the solution , but i cant change the whole thing now, thats why i came on react helmet but it doesnt work

…

On Fri, 7 Jan, 2022, 5:48 pm Mwelwa Nkuta, ***@***.***> wrote: I had been experiencing the same issue. I thought maybe this was because the the Facebook and or twitter bots just scrape for the html and do not run the JavaScript, hence the social media previews come from the default meta tags in the public/index.html file. server side rendering or pre-rendering might help you with your issue. — Reply to this email directly, view it on GitHub <#661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN6P37RL5KHKJ3NYTU2EMG3UU3K2DANCNFSM5KKML6KA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[mwelwankuta]

@rohan2734 i understand, a simple fix is pre-rendering. if your routes are not dynamic it goes through them and creates a separate html file for each of them. but if you have meta tags with dynamic content from a database for example it could be a little tricky.

[rohan2734]

ok let me research on pre rendering

…

On Fri, 7 Jan, 2022, 6:53 pm Mwelwa Nkuta, ***@***.***> wrote: @rohan2734 <https://github.com/rohan2734> i understand, a simple fix is pre-rendering. if your routes are not dynamic it goes through them and creates a separate html file for each of them. but if you have meta tags with dynamic content from a database for example it could be a little tricky. — Reply to this email directly, view it on GitHub <#661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN6P37QYCBU5CHQT6FFQIALUU3SORANCNFSM5KKML6KA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[rohan2734]

but my routes are dynamic and gets the data from database

…

On Fri, 7 Jan, 2022, 7:07 pm Rohan Devaki, ***@***.***> wrote: ok let me research on pre rendering On Fri, 7 Jan, 2022, 6:53 pm Mwelwa Nkuta, ***@***.***> wrote: > @rohan2734 <https://github.com/rohan2734> i understand, a simple fix is > pre-rendering. if your routes are not dynamic it goes through them and > creates a separate html file for each of them. but if you have meta tags > with dynamic content from a database for example it could be a little > tricky. > > — > Reply to this email directly, view it on GitHub > <#661 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AN6P37QYCBU5CHQT6FFQIALUU3SORANCNFSM5KKML6KA> > . > Triage notifications on the go with GitHub Mobile for iOS > <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> > or Android > <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. > > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[mwelwankuta]

If the title and meta tags don't change on those routes then pre-rendering should work. As long as the meta tags are not receiving data from the database it should work.

[rohan2734]

title,meta tags are also from the database

…

On Fri, Jan 7, 2022 at 7:22 PM Mwelwa Nkuta ***@***.***> wrote: If the title and meta tags don't change on those routes then pre-rendering should work. As long as the meta tags are not receiving data from the database it should work. — Reply to this email directly, view it on GitHub <#661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN6P37VTW5XLLDQ7W4KPW2LUU3V2BANCNFSM5KKML6KA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[mwelwankuta]

That's a tough one then, you could read this article talking about SEO strategies, hope you find something that helps, would love to hear how it goes.
https://www.toptal.com/react/react-seo-best-practices

[mwelwankuta]

I was looking at the thenewboston developers' organization right here on GitHub it seems like they used a package called called react-helmet-async I haven't gone through it yet, but it seems like it would give you your desired result.

[mwelwankuta]

@rohan2734 would like to hear from you

[rohan2734]

ok i will try the react helmet async too

…

On Sun, 9 Jan, 2022, 1:34 pm Mwelwa Nkuta, ***@***.***> wrote: @rohan2734 <https://github.com/rohan2734> would like to hear from you — Reply to this email directly, view it on GitHub <#661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN6P37SE3GRBAHFPGEKOKX3UVE6SJANCNFSM5KKML6KA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[rmacuna]

Having the same issue, anybody found a solution?

[Elius94]

I think it's because this react plugin changes the index.html only if js is enabled... I suppose that the social engines that generates the preview reads only the "crude" index.js generated in the build process.

To bypass this trouble i've created this usefull npx command:

https://github.com/Elius94/js-seo-ingector

Enjoy

[premsharma1230]

i'm facing same issue for link preview , if anyone have this solution please help me

[mario8a]

I was looking at the thenewboston developers' organization right here on GitHub it seems like they used a package called called react-helmet-async I haven't gone through it yet, but it seems like it would give you your desired result.

react-helmet-async solve this problem? 😮😮