SOLVED: How to provide a static image url for twitter cards

1

Hi people!
If anyone could help with this we’d really be grateful. Thanks!

Trying to get twitter cards to display correctly from within a create-react-app static site.

The card type summary_large_image validates correctly, as does the title and description but the image does not show on the twitter card validator or on twitter posts. It does however show in Discord posts.

In the <head> of the site the image meta tag is:
<meta property="og:image" content="%PUBLIC_URL%/socialsImage.png" />

where %PUBLIC_URL% is a folder with public media, e.g. the favicon (which displays correctly).

My guess is that this is not seen as a static url by the Twitterbot, but I do not know how to link to a static url within the render framework!

Any help would be gratefully received. Thanks!

2

SOLVED

the %PUBLIC_URL% needed changing to reference the static site’s url. i.e.:

in the index.html, change:

<meta property="og:image" content="%PUBLIC_URL%/socialsImage.png" />

to

<meta property="og:image" content="https://myWebsiteUrl.com/socialsImage.png" />

obvious in hindsight XD