2

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/`,
      },
    },
  ],
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
João Pedro
  • 794
  • 2
  • 12
  • 28
  • Can you share your SEO component as well as your `gatsby-config.js`? – Ferran Buireu Feb 02 '21 at 06:46
  • @FerranBuireu I have added them to the post – João Pedro Feb 02 '21 at 07:30
  • The problem is while you have 5 meta tags, you don’t have *all* of the tags nor do you have the right tags for Twitter or Open Graph. If you view your page using the browser’s View source code, you won’t see any twitter or og tags, but those tags are in the final code for the page. I’m guessing that you’re building the page in the browser using JavaScript, but Twitter et. al. won’t build the page to find the tags. You have to provide the tags in the initial html file (and near the top, before style and script sections – WhatsApp doesn’t download your entire file). – Rich DeBourke Feb 02 '21 at 21:10
  • Actually all the og and twitter tags show up for me inside the but at the end of it, for what I've checked I have all the necessary tags. – João Pedro Feb 04 '21 at 01:52
  • OK , I ran a curl url -v -A Twitterbot https://www.peregrinastro.com and found out twitter's crawler isn't seeing any tags. According to twitter https://twittercommunity.com/t/card-error-unable-to-render-or-no-image-read-this-first/62736 : "is your page adding the tags after it is loaded, for instance using JavaScript (e.g. Angular, Meteor, Google Tags Manager)? The crawler and validator cannot execute JavaScript and the tags must be static." , so how can I solve this, since the SEO component probably generates the tags with javascript? – João Pedro Feb 04 '21 at 02:33
  • I think you’re using the Gatsby framework to build your site. I haven’t used Gatsby, but it appears that it has two build processes, [develop and build](https://www.gatsbyjs.com/docs/conceptual/overview-of-the-gatsby-build-process/#differences-between-develop-and-build). I think the develop version sends a bunch of individual files from your server to your browser for seeing the page (which your browser has to assembly, and Twitter won’t do that) while the build version builds and stores the page in your server and then sends the complete page upon request. Could that be the issue? – Rich DeBourke Feb 04 '21 at 14:11

0 Answers0