search

staylor / react-helmet-async

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

Meta tags - URL Preview #160

Closed HarishReddyCH closed 9 months ago

HarishReddyCH commented 2 years ago

URL Preview is not working when adding meta tags using Helmet

Please check this to know about URL/Link Preview

CODE: `

Sample Page 
    <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 commented 2 years ago

the same issue

hoangman1108 commented 2 years ago

home they fix this problem soon

rrodwell commented 2 years ago

Any update on this?

apnnux commented 1 year ago

the same issue

Antonio112009 commented 1 year ago

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 commented 1 year ago

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 commented 9 months ago

the HTML source of the page needs to contain the tags