Community Plugin
View plugin on GitHub
See starters using this

🔎 gatsby-plugin-seo

npm npm

SEO plugin for Gastby. Supports Facebook, Twitter, Open Graph, and meta tags.

📦 Installation

This package is installable from npm.

npm install @bradgarropy/gatsby-plugin-seo

⚙ Configuration

Head over to the gatsby-config.js file and add @bradgarropy/gatsby-plugin-seo to the list of plugins.

// gatsby-config.js

module.exports = {
    siteMetadata: {
        url: "https://bradgarropy.com",
        title: "Brad Garropy",
        description: "🏡 My home on the web.",
        keywords: ["gatsby", "portfolio"],
        twitter: "bradgarropy",
    },
    plugins: ["@bradgarropy/gatsby-plugin-seo"],
}

Some fields in siteMetadata are also required.

Name Description
url Base url of the website.
title Document title shown in the browser.
description Meta description of the page.
keywords Keywords describing the page.
twitter Twitter handle, without the @.

This plugin also expects the default social media cards and favicon to be availabe at /facebook.png, /twitter.png, and /favicon.png. This can be accomplished by placing these images in the static directory.

static/
  |  facebook.png
  |  favicon.png
  |  twitter.png

🥑 Usage

This plugin exports an <SEO> component that can be used without any props.

import SEO from "@bradgarropy/gatsby-plugin-seo"

const App = () => <SEO />

If you want to customize the SEO properties on each page, the <SEO> component accepts three props: title, description, and image.

import SEO from "@bradgarropy/gatsby-plugin-seo"

const App = () => (
    <SEO
        title="Custom page title."
        description="My custom description."
        image="https://github.com/bradgarropy.png"
    />
)

❔ Questions

If you have any trouble, definitely open an issue and I’ll take a look.

If all else fails, you can ask me directly on Twitter or my AMA.