Twitter Image Won't Work

[bsraya]

Description

I have been tinkering with my own website's SEO, and I want to make sure that for some pages (such as Home, About, Portfolio and Blog pages) in my website have Twitter card images. I tried to import it locally from ./content/assets/metaImage.png. Yet, it still doesn't work. As I read through Twitter's guideline, it said the image should be able accessed online. Is there any work around for this?

Here is my seo.js file.

import React from 'react';
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
import { StaticQuery, graphql } from 'gatsby';
import ogImage from "../../content/assets/metaImage.png"

const query = graphql`
    query getSiteMetadata {
        site {
            siteMetadata {
                author
                description
                keywords
                siteUrl
                title
            }
        }
    }
`;

function SEO({ meta, title, description, slug, lang, type }) {
    return(
        <StaticQuery
            query = {query}
            render = {data => {
                const { siteMetadata } = data.site;
                const metaDescription = description || siteMetadata.description;
                const defaultTitle = data.site.siteMetadata?.title;
                const url = `${siteMetadata.siteUrl}${slug}`;
                const keywords = siteMetadata.keywords;
                return(
                    <Helmet
                        htmlAttributes = {{lang, }}
                        title={title}
                        titleTemplate={defaultTitle ? `%s - ` + data.site.siteMetadata.author : null}
                        meta={
                            [
                                {
                                    name: 'description',
                                    content: metaDescription,
                                },
                                {
                                    property: 'og:url',
                                    content: url,
                                },
                                {
                                    property: 'og:title',
                                    content: title || siteMetadata.title,
                                },
                                {
                                    property: 'og:description',
                                    content: metaDescription,
                                },
                                
                                {
                                    name: 'twitter:card',
                                    content: `summary_large_image`,
                                },
                                {
                                    name: 'twitter:creator',
                                    content: data.site.siteMetadata.title,
                                },
                                {
                                    name: 'twitter:title',
                                    content: title || siteMetadata.title,
                                },
                                {
                                    name: 'twitter:description',
                                    content: metaDescription,
                             
                                },
                            ]
                            .concat(
                                keywords.length > 0
                                    ?
                                    {
                                        content: keywords.filter((k) => typeof k === 'string').join(`, `),
                                        name: `keywords`,
                                    }
                                    : []
                            )
                            .concat(
                                type === "website"
                                    ? 
                                    [
                                        {        
                                            property: `og:type`,
                                            content: `website`,
                                        },
                                        {
                                            property: 'og:image',
                                            content: ogImage,
                                        },
                                        {
                                            name: 'twitter:image',
                                            content: ogImage,
                                        },
                                    ]
                                    :
                                    [
                                        {
                                            property: `og:type`,
                                            content: type
                                        },
                                        {
                                            property: 'og:image',
                                            content: `${url}twitter-card.jpg`,
                                        },
                                        {
                                            name: 'twitter:image',
                                            content: `${url}twitter-card.jpg`,
                                        },
                                    ]
                            )
                            .concat(meta)
                        }
                    />
                )
            }}
        />
    );
};

SEO.defaultProps = {
    lang: `en`,
    meta: [],
    title: '',
    slug: '',
};

SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    slug: PropTypes.string,
    title: PropTypes.string.isRequired,
};

export default SEO;

Actual result

Environment

  System:
    OS: Linux 5.8 Pop!_OS 20.10
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
    npm: 7.5.2 - ~/.nvm/versions/node/v15.8.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 85.0.1
  npmPackages:
    gatsby: ^2.32.2 => 2.32.2 
    gatsby-plugin-google-analytics: ^2.11.0 => 2.11.0 
    gatsby-plugin-manifest: ^2.4.17 => 2.12.0 
    gatsby-plugin-mdx: ^1.10.0 => 1.10.0 
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5 
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1 
    gatsby-plugin-sitemap: ^2.12.0 => 2.12.0 
    gatsby-plugin-social-cards: ^0.5.17 => 0.5.17 
    gatsby-plugin-typography: ^2.12.0 => 2.12.0 
    gatsby-remark-code-titles: ^1.1.0 => 1.1.0 
    gatsby-remark-copy-linked-files: ^2.10.0 => 2.10.0 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.11.0 => 3.11.0 
    gatsby-remark-responsive-iframe: ^2.11.0 => 2.11.0 
    gatsby-remark-smartypants: ^2.10.0 => 2.10.0 
    gatsby-remark-twitter-cards: ^0.6.1 => 0.6.1 
    gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2 
    gatsby-remark-vscode: ^3.2.0 => 3.2.0 
    gatsby-source-filesystem: ^2.11.0 => 2.11.0 
    gatsby-transformer-remark: ^2.16.0 => 2.16.0 
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0 
  npmGlobalPackages:
    gatsby-cli: 2.19.1

[vladar]

Have you tried adding a full image URL? Your current setup is this:

<meta data-react-helmet="true" name="twitter:image" content="/static/metaImage-4069a80acd3edab533f06363029ced40.png"/>

It likely needs to be this:

<meta data-react-helmet="true" name="twitter:image" content="https://braya.netlify.app/static/metaImage-4069a80acd3edab533f06363029ced40.png"/>

I am not 100% sure about it but the validator returns twitter:image: Invalid URL for your current format which suggests it might be the case.

[bsraya]

WOW, it works! Thanks so much, as well as the time.

[JayMGurav]

I'm facing the same issue, My seo.js is as below

import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const SEO = ({ 
 title:blogTitle, 
 description: blogDescription, 
 image: blogImage, 
 pathname, 
 article
}) => {
 const { site } = useStaticQuery(
   graphql`
     query {
       site {
         siteMetadata {
           defaultTitle: title
           defaultDescription: description
           author {
             name
             summary
           }
           titleTemplate
           defaultImage: image
           siteUrl
           keywords
           social {
             twitter
             instagram
             linkedin
           }
         }
       }
     }
   `
 )

 const {
   defaultTitle,
   defaultDescription,
   siteUrl,
   social,
   titleTemplate,
 } = site.siteMetadata
 const { twitter } = social


 const title = blogTitle || defaultTitle;
 const image = blogImage?.src ? siteUrl + blogImage.src : siteUrl + "/jayGurav.jpg";
 const description = blogDescription || defaultDescription;
 const url = pathname ? siteUrl + pathname : siteUrl;

 return (
   <Helmet
     title={title}
     titleTemplate={titleTemplate}
     htmlAttributes={{ lang: "eng" }}

     meta={[

       { name:"description", content: description },
       { name:"image", content: image }, 

       { property:"og:url", content: url },
       { property:"og:type", content: article ? "article" : "website" },
       { property:"og:title", content: title }, 
       { property:"og:description", content: description },
       { property: "og:image", content: image, },

       { name: "twitter:card", content: "summary_large_image" },
       { name: "twitter:domain", content: siteUrl },
       { name: "twitter:url", content: url },
       { name: "twitter:title", content: title },
       { name: "twitter:description", content: description },
       { name: "twitter:image", content: image },
       { name: "twitter:creator", content: twitter }
     ]}

     link={[
       { rel:"canonical", href:url }
     ]}
   />
 )
}

export default SEO

As @vladar suggested I have also tried changing relative URLs to full URL, When I inspect my site all the meta tags seems accurate, I'm not sure what's going on... Twitter card validator shows an error as below