I am trying to do SEO for my React website/improve user experience. On my site, users can post offers, which are stored in a database. Then when a user clicks an offer card on the offers page, it opens the offer details page. For each offer detail page, I need to set the title automatically to the offer's title.
using react-helmet-async I could achieve this with the next code:
<Helmet> <title>{"Sitename | " + (record?.model || "")}</title> <meta name="description" content={record?.model + " " + record?.description} /> </Helmet>
This successfully sets the title on the tab title and console. but when I access Google Search Console, and do a live URL test google only shows "Sitename | " as the title. (I checked on an indexed page on Google search results, and it does only display "Sitename | " too.)
I think that the problem is, that when Google is crawling the website it gets the data before the API is done fetching the record and Helmet sets the title.
How could I go about fixing this?