SEO image head tags broken

[maxscience]

Some meta tags in components/seo/seo.tsx don't take into account the static folder https://www.gatsbyjs.org/docs/static-folder/

In particular the <meta property="og:image" content={${siteURL}/images/${image ? image : ''}} />

and <meta name="twitter:image" content={${siteURL}/images/${image ? image : ''}} />

and <meta name="image" content={${siteURL}/images/${image ? image : ''}} />

have the /images/ path hardcoded which results in a 404 error for those URLs when using the static folder. For example an URL will get rendered as /images//static/33b46d14fb5cb9d3eb5a3de9c253cb03/b90bb/IMG_1234.jpg

while it should be /static/33b46d14fb5cb9d3eb5a3de9c253cb03/b90bb/IMG_1234.jpg

So let's say you have the following folder structure:

• static
  • some files
  • images -apple-touch-icon.png -favicons.png

Then favicons and apple-touch-icon.png (for meta name="image") will correctly work in the dashboard page for example but posts will have the bug described above.

[PaulieScanlon]

@maxscience happy to look into this but I’ll probably need to see your repo.

[maxscience]

@PaulieScanlon I deployed the latest version but the "image" still doesn't get picked up by Twitter unfortunately. The path is now correct but it looks like we need to have a full URL instead of the path, including the domain name, at least for Twitter. Tested this using https://cards-dev.twitter.com/validator

[PaulieScanlon]

@maxscience Can you send me the URL of the post you're testing so i can see what urls Helmet is injecting please.

FYI these work fine in the card validator;

page: https://gatsby-theme-gatstats.netlify.com/

post: https://gatsby-theme-gatstats.netlify.com/posts/2019/12/code-example/

Have you added your site URL to the gasby-config

module.exports = {
  siteMetadata: {
...
    siteURL: "https://gatsby-theme-gatstats.netlify.com",
    siteImage: "images/gatstats-open-graph-image.jpg",
...
  },

[maxscience]

I did but it had a typo! Thanks it finally works