twitter 卡验证器错误：找不到卡卡错误，即使我有元标签

问题描述

我按照本教程将社交媒体卡片添加到我的网站：https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/

但是，我的网址 https://www.peregrinastro.com/articles/jupiter-saturn-conjunction-in-aquarius-part-1-fresh-air 仍然在 twitter 卡验证器中返回：

INFO:  Page fetched successfully
INFO:  5 metatags were found
ERROR: No card found (Card error)

我可以看到我拥有所有元标记，那么可能是什么问题？

SEO 组件：

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`,{
          property: `og:type`,content: `website`,{
          property: `og:site_name`,{
          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",]
            : [
                {
                  name: "twitter:card",content: "summary",]
        )
        .concat([
          {
            name: `twitter:creator`,content: site.siteMetadata.twitter,{
            name: `twitter:title`,{
            name: `twitter:description`,{
            name: `twitter:site`,])
        .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/,path: `${__dirname}/src/images/`,}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）