Bug: Wrong open graph image link generated

[anitsh]

Story: As a User I am not able to share the blog posts.

Problem: Seo component generates wrong link to Open Graph(OG) image.

Analysis:

Data Analysis:

Comparing the generated files and existing content to pin point the issue. Source	Content
Generated OG Image	https://codeanit.com/opengraph-images/google-foobar-first-challenge-caesar-cipher.png
Seo component generated OG Meta	<meta property="og:image" content="https://codeanit.com/opengraph-images/google-foo-bar-first-challenge.png" data-react-helmet="true">
Content Filename	google-foobar-first-codechallenge-caesar-cipher.md
Content Field title	Google FooBar First Challenge
Content Field slug	google-foobar-first-challenge-caesar-cipher

Code Analysis

The OG content passed to Seo component from the Blog template:

const SeoBanner = `/opengraph-images/${slugify(title)}.png`; // Name OG image called

<Seo
title={`${title} - ${site.siteMetadata.title}`}
desc={subtitle}
article={true}
banner={SeoBanner}
pathname={slug + '/'}
date={date}
/>

OG image generation process by PrinterComponent:

// gatsby-node.js gets the data and calls PrinterComponent `onPostBuild` stage
const { runScreenshots } = require(`gatsby-plugin-printer`);
const ogData = data.allMdx.edges.map(
    ({
      node: {
        frontmatter: { 
          slug,
          title,
          subtitle,
          date,
          type,
          keywords,
          cover 
        },
      },
    }) => (
      {
      id: slug, // Name of OG image generated
      slug,
      title,
      subtitle,
      date,
      type,
      keywords,
      cover 
      }
    )
  )

  await runScreenshots({
    data: ogData,
    component: require.resolve('./src/components/Printer/index.js'),
    outputDir: 'opengraph-images',
  })
}

// OG image generation
const PrinterComponent = ( ogData ) => (
  <Wrapper>
    <Matrix/>
    <TitleWrapper>
    <Logo height='150' width='150' />
    <h2>{ ogData.subtitle }</h2>
    <h1>{ ogData.title }</h1>
    <p>Blog by Anit Shrestha Manandhar</p>
    <p>codeanit.com/blog/{ogData.slug}</p>
    </TitleWrapper>
  </Wrapper>
);

Findings: The image name passed to Seo component is incorrect.

The slug field value of blog post content is fetched and set to id, which is the name of OG image name by OG image generating function runScreenshots. But function slugify(title) is used to generate image name.

Content Field `slug` | google-foobar-first-challenge-caesar-cipher
Content Field `title` | Google FooBar First Challenge
const SeoBanner = `/opengraph-images/${slugify(title)}.png`; 

Solution: Pass correct OG image name to Seo component

Fix:

const SeoBanner = `/opengraph-images/${slug}.png`;

Live HTML Verification:

Site Status

• Image shown in Linkedin. Twitter shows previous image probably because of cache issue. Facebook does not show image.

This will be verified in another task with analysis on OpenGraph for various social media platforms.