How to add meta tags which I first need to fetch

[Borisboky]

I'm trying to og-tags with Gatsby and Helmet. But the problem is that those tags first need to be fetched.

It's a vehicle detail page and I need to show vehicle make and model in those tags, but the vehicle needs first to be fecthed. My code is as follows:

const Page = (props) => {
    const [detailsMeta, setDetailsMeta] = useState(undefined);


    const resolveVehicleDetailMeta = async () => {
          const fetch = require('isomorphic-fetch');

          const resolveVehicleImageUrl = (fetchedImage) => {
            const parsed = JSON.parse(fetchedImage);
            return parsed?.uri
          }

          const VEHICLE_QUERY = `
            query VehicleQuery($reference: String!) {
              vehicle (reference: $reference) {
                reference
                make
                model
                image
              }
            }`;

          await fetch(`/graphql`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              query: VEHICLE_QUERY,
              variables: {
                reference: 'some reference'
              }
            })
          })
        .then((resp) => resp.json())
        .then((result) => {
          const vehicle = result?.data?.vehicle;
          if(vehicle){
            setDetailsMeta({
              reference: vehicle.reference,
              make: vehicle.make,
              model: vehicle.model,
              image: resolveVehicleImageUrl(vehicle.image)
            })

          }
        })
        .catch((err) => {
          console.log('err', err)
        });
    }

    const renderMetaTitle = () => {
      const ogTitle = `Tweedehands ${detailsMeta?.make} ${detailsMeta?.model} ${detailsMeta?.reference}`

      return ogTitle;
    }

    return (
        <>
            <Helmet>
                {detailsMeta && <meta property='og:title' content={renderMetaTitle()} />}
                ...
            </Helmet>

            The rest...
        </>
    )



}

Thus, I first fetch data from the server and store it in detailsMeta and then I show it inside Helmet. When I test it on localhost I see those tags and it works fine, but when I test it in Facebook debugger they are not shown.

Can the data which first needs to be fetched be added at all?

Thanks.

[Jacob-Smit]

I haven't worked with Gatsby but this is a limitation of client side JS frameworks.

There are still many crawlers that will not process client side JavaScript before scraping data from the page.

Facebook's crawler is one of the crawlers that just look at the raw response and doesn't run any JavaScript.

This means anything that you want Facebook to pickup has to be part of the original HTML response served by your backend solution.

Frameworks like NextJS and others get around this with their SSR/SSG utilities that pre-render the page server side so that the data is available in the HTTP response and then hydrate the application client side.

TLDR: This isn't possible with only client side code until (or if) Facebook's crawler runs JavaScript before scraping the page.