Meta tags - URL Preview

[HarishReddyCH]

URL Preview is not working when adding meta tags using Helmet

Please check this to know about URL/Link Preview

CODE: <Helmet> <title>Sample Page</title> <meta name="description" content="Sample description." /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Test Site" /> <meta property="og:image" content="https://us.123rf.com/450wm/andyadi/andyadi1802/andyadi180200513/95572662-vector-logo-design-for-beauty-salon-dermatology-center-and-wellness-house-.jpg?ver=6" /> </Helmet>

Expected output: Meta tags data which I given in Helmet should be shown in link preview.

[hoangman1108]

the same issue

[hoangman1108]

home they fix this problem soon

[rrodwell]

Any update on this?

[apnnux]

the same issue

[Antonio112009]

I believe the problem is related to the use of render mode "SPA". Google bot, Social media preview and others are loading firstly bare bone "index.html" file which does not statically contains all your dynamical changes on client side.

The approach that you are looking for is eighter "SSR" (Server Side Rendering) or "SSG" (Static-Site Generator).

Great explanation of these modes you can find here and I believe the vite-plugin-ssr will suit your project.

To conclude, in the documentation it mentioned that you have to use server-side rendering in order to have appropriate work of the application, because the tags must be already in the index.html file before a client will receive all necessary files (index.html, main.bundle.xxx.js, image.png, and etc).

(Please note that this is explanation for those who have not been using other render methods before)

[SanNic20]

The same issue

I know the problem of crawlers not executing JS.

I looked into multiple solution like combining react-snap and react-helmet but that only works at build time.

Migrating to SSR like NextJS is not an option for me.

Any suggestions, other approaches are appreciated.

Thanks

[staylor]

the HTML source of the page needs to contain the tags