How To Make Gatsby Markdown SEO Friendly

December 08, 2020

Gatsby markdown files are the real weapon for your daily content writing. Nothing feels easier than opening a markdown file and writing your thoughts and marketing your products. What if we could automate the SEO friendliness of the markdown files seamlessly every time we make it live on the web. I would like to reveal how I do it for my product.

Which attributes to add for improving SEO compliance?

Page URL

slug attribute creates the page url so do make sure its unique, and has the core keywords you aim to SEO.

slug.svg

Title/#

title attribute gets mentioned in the title meta tag which is important really important to have your important keywords mentioned there and keep it in perspective from what users could be searching in order to find it, which is often a question format query. It will also become by default the main title of the blog or the <h1> tag.

title.svg

Description

description tag is a decisive factor when users are going through their searches in google as it gives the quick detail of what the page is actually about.

description.svg

##

We can have multiple ## which has translated into <h2> on the webpage. The Importance of <h2> is less than <h1> but it does get scanned by Google so do include the important keywords in this as well.

h2.svg

Modifying Markdown structure

You can use the sample blog by Gatsby to achieve compliance, I have personally used the same one.

Change the markdown file structure by changing the GraphQL query it uses -

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        description
      }
    }
  }
`;

Mapping Markdown with React Helmet

The key to this automation is creating properties in markdown and then mapping them with React Helmet. React Helmet is a library that comes pre-installed in Gatsby. You can specify all your key SEO attributes in this. Here’s a simplified example of it

function SEO({title, description}) {
  return (
      <Helmet
          title={title}
          description={description}
      />
  )
}

You can use this SEO component in markdown files like this in your blog template -

  <SEO
      title={post.frontmatter.title}
      description={post.frontmatter.description}
  />

Configure once, automate for life

We know SEO is crucial and it cannot be skipped, so automate it. This setup can remove the hassle of doing SEO configurations for every new blog you write. Make your blogs - SEO battery included now.

chrome.svg


Harsh Vardhan  is a SEO consultant & software developer using a mix of technical and content writing skills to optimise your site ranking