🔎 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
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.