Getting Article Banners to show up in meta tags

[Sam Ruggerio]

I want to be able to make the article banner image become the image for og:image and twitter:image meta tags. Unfortunately, it seems like the original source location of the image gets lost when trying to modify the Article index.tsx, even if I wanted to use Helmet directly.

Any ideas on how to support this?

[Konstantin Münster]

Hey @Surg-Dev! Modifying the Article/index.tsx seems like the right way to do it. Did you try modifying the SEO component too and passing the image url as props? It may be that the SEO component overrides your og:image you set inside the Article template.

Anyways, I like the idea and will add this to the core theme as soon as I have time for it. Thanks for opening this up!

[Sam Ruggerio]

I'm not super versed in "best practice" when it comes to webdev, (very systems guy). Passing it into SEO probably is the more modular answer, especially if I make other pages that want that meta tag made. Right now, this is the solution I'm using in Article/index.tsx...

    const article = props.pageContext.article;
    const image = article.banner?.src?.childImageSharp?.gatsbyImageData?.images?.fallback?.src;
    return (
        <>
            <Seo title={article.title} description={article.description || undefined} useTitleTemplate={true} />
            <Helmet>
                <meta property="og:image" content={image} />
                <meta property="twitter:image" content={image} />
                <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
                <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
            </Helmet>
            <Page>

I'm not entirely "comfortable" with how nested the actual image is in the Gatsby Image Wrapper, but it seems to work?

[Konstantin Münster]

It's correct that the image src is such deeply nested. The actual image gets processed by gatsby-image during the build and it spits out the gatsbyImageData object.

Great to hear that you found a working solution. I leave this issue open until I added proper support for this in the core theme 👍