I have ecommerce website developed in reactjs with APIs from laravel app. I used react-helmet to show metas(title, keywords etc.) on every page dynamically. Metas do appear if i browse my website in browser . But if I check url through any toolkit like https://metatags.io/, it shows static meta title added in index.html file. Can anybody please guide me as i am struggling a lot with SEO stuff in reactjs
@faizi_856 …and this is why I wouldn’t use React to build an e-commerce website.
Your problem is, your React code is going to be processed after the page has rendered, which is absolutely the worst thing if you care about SEO. You should have just built a “normal” server-rendered app using Blade templates, and used JavaScript for progressive enhancement.
@martinbean is there any way now for this problem to be solved??? I can not rewrite my whole application ...
@martinbean React has Server Side Rendering which will fix this issue
I can not rewrite my whole application ...
@faizi_856 Then maybe you should have properly evaluated your technology choices before starting the project…
You’re going to need to server-side render your project so that the compiled HTML is sent to the browser, rather than a “skeleton” HTML page that then initialises a React app. But this is still going to require some work on your part.
can you share some of the code inside helmet
@mrbegginerak sure here is the helmet code
<Helmet>
<title>{meta && meta['meta_title_' + i18n.language] ? meta['meta_title_' + i18n.language] : 'XYZ'}</title>
<meta name="description" content={meta && meta['meta_description_' + i18n.language]} />
<meta name="keywords" content={meta && meta['meta_keywords_' + i18n.language]} />
</Helmet>
look into implementing server-side rendering, if you are using nextjs - https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering
@CodeNathan no I'm using react js. can you share some resources with me for implementation of server side rendering in react js???
Are you using Vite by any chance? If so check this out:
Thank you very much for your help - these turned out to be very useful links for me
thanks for your share
Please or to participate in this conversation.