twitter card validator error : No card found (Card error) , even thou I have the metatags - twitter

Question

I followed this tutorial for adding social media cards to my site: https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/
However, my url https://www.peregrinastro.com/articles/jupiter-saturn-conjunction-in-aquarius-part-1-fresh-air still returns this in twitter card validator:
INFO: Page fetched successfully
INFO: 5 metatags were found
ERROR: No card found (Card error)
I can see that I have all the metatags, so what can be the issue?
SEO component :
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, image: metaImage, title }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
keywords
author
url
twitter
facebook
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const image =
metaImage && metaImage.src
? `${site.siteMetadata.url}${metaImage.src}`
: null
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
name: "keywords",
content: site.siteMetadata.keywords.join(","),
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
property: `og:site_name`,
content: title,
},
{
property: `og:url`,
content: site.siteMetadata.url,
},
]
.concat(
metaImage
? [
{
property: "og:image",
content: image,
},
{
property: "og:image:width",
content: metaImage.width,
},
{
property: "og:image:height",
content: metaImage.height,
},
{
name: "twitter:card",
content: "summary_large_image",
},
{
name: "twitter:image:src",
content: image,
},
]
: [
{
name: "twitter:card",
content: "summary",
},
]
)
.concat([
{
name: `twitter:creator`,
content: site.siteMetadata.twitter,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
{
name: `twitter:site`,
content: site.siteMetadata.twitter,
},
])
.concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
image: PropTypes.shape({
src: PropTypes.string.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
}),
}
export default SEO
gatsby-config.js
const { isNil } = require("lodash")
const mapPagesUrls = {
index: "/",
}
module.exports = {
siteMetadata: {
title: `Peregrin Astrology`,
description: `astrology blog, horoscopes, mundane, historical astrology, birth chart consultations.`,
keywords: [
"astrology",
"astrologer",
"zodiac",
"signs",
"aries",
"taurus",
"gemini",
"cancer",
"leo",
"virgo",
"libra",
"scorpio",
"sagittarius",
"capricorn",
"aquarius",
"pisces",
"horoscope",
"forecast",
"mundane",
"birth chart",
],
author: `Pedro Coelho`,
url: "https://www.peregrinastro.com",
siteLanguage: "english",
twitter: "#peregrinastro",
facebook: "peregrinastro",
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/favicon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `https://astrobeats-cms.herokuapp.com`,
queryLimit: 10000, // Default to 100
contentTypes: [`article`, `category`, `author`],
//If using single types place them in this array.
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "fonts",
path: `${__dirname}/src/fonts/`,
},
},
{
resolve: "gatsby-plugin-web-font-loader",
options: {
google: {
families: ["Merriweather", "Montserrat", "Lato:100,300,400,700,900"],
},
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/,
},
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
}