Social cards and Open Graph meta tags don't work

[JayMGurav]

Description

I have finally developed and deployed my personal blog site, on which I have also added meta tags to support twitter card and open graph using react-helmet, However I am not able to get them work!, The twitter card validator shows something like

As one can see in the log It even recognizes that it found 5 tags, But error's with No card found!!.
Doing some digging around I found that it might be not working for this reason

Here's how my head tag looks

I believe that my style tags loaded by typography.js, styled-components, google fonts(marked in red) are the causes for this error

I also have few thoughts, not sure they could be of any help, but here are they

1. I know that the order of meta tags don't usually matter, However in my case would re-ordering the meta tags to the top of the head resolve the issue(above all style, script, tags and google fonts )?? If so how would I do that(with react-helmet or using some other way)?
2. Would using preconnect, defering and/or preload with fonts help in someway?? if so how would I would I achieve that with typography.js (As I couldn't find any documentation for customizing this behavior)
3. deferring styles and scripts? Not sure how to do this if they are injected by libraries like styled-components or typography.js at build time.

Or if anyone has some other way to resolve this issue, Please Help!!, I am tired looking for solutions and trying to solve this.

[LekoArts]

Looking at https://www.opengraph.xyz/url/https:%2F%2Fjaygurav.netlify.app%2F/ it says your entries are empty there. Are you generating the URL on the client side (e.g. by relying on window or location)? Have you installed and used gatsby-plugin-react-helmet? Can you share the code of your SEO component?

[JayMGurav]

Here below is is my SEO Component, yeah I am passing pathname={location.pathname} as a prop to SEO component from my blog template, and No I haven't tried gatsby-plugin-react-helmet

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

[LekoArts]

Yeah, you should install and use gatsby-plugin-react-helmet. From a first glance the SEO component seems fine

[JayMGurav]

🎉Finally using gatsby-plugin-react-helmet did solve the issue, and since it doesn't support gatsby v2, I had to migrate my whole codebase to v3, had lot of breaking changes, But was worth every effort and my god migrating has made it faster.

@LekoArts thanks a lot for suggestion!.

[LekoArts]

happy to hear that, cheers! 👍

[PauloLuan]

I faced the same issue, and I solved it by:

• Removing react Helmet and using the Head approach instead.
• Properly configuring wrapRootElement and wrapPageElement

Check if your are properly using wrapRootElement and wrapPageElement APIs. The first is “useful to set up any Provider components that will wrap your application” and the second one ”set persistent UI elements around pages”. See Gatsby docs for more info.

If you use wrapRootElement and wrapPageElement, don’t forget to implement it both in gatsby-browser.js and gatsby-ssr.js.

An example on how to configure both wrapRootElement and wrapPageElement:

export const wrapRootElement = ({ element }) => (
  <ThemeProvider>
    {element}
  </ThemeProvider>
)

export const wrapPageElement = ({ element }) => (
  <>
    <GlobalStyles />
    <Navbar />
    <MDXStyles>
      {element}
    </MDXStyles>
    <ScrollToTop />
    <Footer />
  </>
);

I'm using Gatsby v5+, Material UI, gatsby-plugin-material-ui, gatsby-theme-material-ui and it's working!