Twitter Cards -- image does not work

[sashafklein]

Description

This issue (unsolved) is described on Stack Overflow here. I'm relatively certain this has to do with Gatsby image processing, as replacing the content of my meta tags with an externally hosted image seems to work fine. Someone got in touch with me by email to share an identical issue, on Gatsby 3.1.2.

The issue is that my application, which uses react-helmet and gatsby-plugin-react-helmet, handles all Facebook (etc) meta tags just fine, and passes the Twitter card validator without error, but does not show an image on the validator or on Twitter, despite the image being specified in both a twitter:image meta tag and an og:image metatag (both the complete URL).

The images are hosted "locally" using Netlify CMS, and the app is on Netlify. I'm on Gatsby 2, as you can see below. Could try to update if that's a plausible cause of the issue, but it seems to be occurring for this other person on Gatsby 3 as well.

Also, if it's relevant, here's how I tried configuring gatsby-plugin-robots-txt, which should (I think) allow the Twitterbot to access the directory with my images:

  {
    resolve: "gatsby-plugin-robots-txt",
    options: {
      policy: [{ userAgent: "Twitterbot", allow: "/static" }],
    },
  },

When that didn't fix things, I reverted to a default configuration:

"gatsby-plugin-robots-txt",

Rather than duplicate the rest of the issue here, I'm just linking to the SO post, but if you would prefer, I can move it here.

Steps to Reproduce

1. Start a new Gatsby app
2. In the SEO component, add Twitter cards as here, using an image from src/images pulled in via the allImageSharp query.
3. Deploy, and test on the Twitter card validator.

Below are two simplified reproductions.

The first included Netlify CMS, which I thought might have been part of the problem. Here it is. It's based off of this starter template, with Uploadcare/Cloudinary removed and Twitter card metadata added to the header. Other than that, and removing unnecessary pages, I didn't make any other changes. I used this starter for a repro rather than a vanilla starter app, because I'm unsure whether the issue is caused by the interaction of Netlify CMS and the Gatsby Sharp Image plugin. I might try to put together a second reproduction. For now, the code for this repo is here, and the pages that should show Twitter cards are the blog posts, such as this one.

The second is a super basic reproduction, with Gatsby 3 and no Netlify CMS or anything, and it has the same issue. Here's the minimal reproduction, with the image taken from src/images using an allImageSharp query and inserted into the metadata for each page. Code here.

Expected Result

Twitter images display.

Actual Result

Twitter images are not displaying on Twitter cards. Facebook, LinkedIn, etc display just fine. No errors are raised by Twitter validator.

Environment

No flags in my config.

  System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i7-6660U CPU @ 2.40GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /var/folders/mn/sl_gpfh175dgnr3ybxv6kmz00000gn/T/yarn--1624315942450-0.724570785839193/node
    Yarn: 1.22.10 - /var/folders/mn/sl_gpfh175dgnr3ybxv6kmz00000gn/T/yarn--1624315942450-0.724570785839193/yarn
    npm: 6.14.11 - ~/.asdf/installs/nodejs/14.16.0/bin/npm
  Languages:
    Python: 3.9.5 - /Users/sasha/.asdf/shims/python
  Browsers:
    Chrome: 91.0.4472.106
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages:
    gatsby: ^2.20.35 => 2.32.13
    gatsby-image: ^2.3.5 => 2.11.0
    gatsby-plugin-google-analytics: ^2.3.13 => 2.11.0
    gatsby-plugin-google-tagmanager: ^2.11.0 => 2.11.0
    gatsby-plugin-netlify: ^2.2.4 => 2.11.1
    gatsby-plugin-netlify-cms: ^4.2.5 => 4.10.1
    gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: ^3.2.5 => 3.10.0
    gatsby-plugin-robots-txt: ^1.5.1 => 1.6.2
    gatsby-plugin-sass: ^2.2.4 => 2.8.0
    gatsby-plugin-sharp: ^2.5.7 => 2.14.4
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-remark-copy-linked-files: ^2.2.4 => 2.10.0
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.2.6 => 3.11.1
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^2.2.5 => 2.11.1
    gatsby-transformer-remark: ^2.7.5 => 2.16.1
    gatsby-transformer-sharp: ^2.4.7 => 2.12.1

[colestriler]

I am running into the exact same issue. Externally hosted photos are displaying fine on the Twitter card, but no image is rendered when I use a locally hosted one. The issue is happening exclusively with Twitter cards for me -- the image is loading fine on Facebook and LinkedIn.

[LekoArts]

Hi, thanks for the issue!

To make the process of resolving problems quicker for both sides we need you to fill out the issue template and give us a minimal reproduction:

<!--
  Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

  Useful Links:
  - Documentation: https://www.gatsbyjs.com/docs/
  - How to File an Issue: https://www.gatsbyjs.com/contributing/how-to-file-an-issue/

  Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
-->

## Description

Describe the issue that you're seeing.

### Steps to reproduce

Clear steps describing how to reproduce the issue. **Please** link to a reproduction, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

### Expected result

What should happen?

### Actual result

What happened.

### Environment

Run `gatsby info --clipboard` in your project directory and paste the output here. Also name any `flags` you use inside `gatsby-config.js`.

[sashafklein]

@LekoArts Updated with a reproduction.

[LekoArts]

Your error lies here:

https://github.com/sashafklein/gatsby-twitter-card-repro-2/blob/bd1f400cfbf7c306b4a63a639ae115f99b0e9f78/src/components/seo.js#L46-L47

location and thus origin is not available during gatsby build and thus the generated HTML has undefined there. You can check this by doing curl https://suspicious-almeida-f9879d.netlify.app/:

<meta data-react-helmet="true" name="twitter:image" content="undefined/static/03475800ca60d2a62669c6ad87f5fda0/58026/energy.jpg"/>

The starters or our examples (https://www.gatsbyjs.com/docs/add-seo-component/) you'll see use the siteUrl from siteMetadata to construct the path.