Blog

A Gatsby SEO Component for Gatsby SEO Needs

A drop-in Gatsby component to set page titles, descriptions, canonical urls, and sitewide default SEO & social sharing tags with the option to manually override on individual pages.

musical duo playing accordion and piano

Be Seen with Gatsby

This is a component which can be used to set common meta tags in the head of pages in a Gatsby site.

See the Source Code

You can set a default title, description, and image in the site’s Gatsby config. When using the component. It is recommended to always pass title and description as props to avoid duplicate titles and metadescriptions. These props will set title & description meta tags, as well as associated Open Graph & Twitter tags.

When using this component, you should set default values for:

  • Site title in the Gatsby config
  • Site description in the Gatsby config
  • Site siteUrl in the Gatsby config
  • Filename of the default social sharing image in the component’s GraphQL query
  • the height and width of the default image as fallbacks for the ogImageWidth & ogImageHeight props
  • default image alt text as the fallback for the imageAlt prop