@bradgarropy/gatsby-plugin-seo

🔎 gatsby-plugin-seo

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

🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼‍♂️ use my ama or twitter to ask any other questions

✨ contributors

Brad Garropy 💻 📖 ⚠️ 🚇

Gem Kosan 💻