@bradgarropy/gatsby-plugin-seo v2.2.0
🔎 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
🥑 Usage
To add a base set of SEO tags, create a custom <Layout/>
component and add the <SEO/>
component there. The SEO tags will render for every route in your site.
// .src/components/Layout.js
import SEO from "@bradgarropy/next-seo"
const Layout = ({children}) => {
return (
<>
<SEO title="My website" description="A blog and portfolio" />
{children}
</>
)
}
export default Layout
If you want to override SEO tags on individual pages, use the <SEO/>
component and only include the props that you want to update. For example, if you added <SEO/>
in the Layout.js
file as shown above, and then included <SEO/>
in the about.js
file as shown below, the description
would be overwritten to be Learn more about me
.
// .src/pages/about.js
import SEO from "@bradgarropy/next-seo"
import Layout from "../components/layout"
const AboutPage = () => {
return (
<Layout>
<SEO description="Learn more about me" />
<h1>about</h1>
</Layout>
)
}
export default AboutPage
With this capability, you can create a default set of SEO tags, and then tailor certain properties on specific pages.
📖 API Reference
<SEO>
Name | Required | Example | Description |
---|---|---|---|
title | false | "My website" | Page title. |
description | false | "A blog and portfolio" | Description of the page. |
keywords | false | ["website", "blog", "portfolio"] | Array of keywords. |
icon | false | "/favicon.ico" | Tab icon url. |
themeColor | false | "#000000" | Browser theme color. |
colorScheme | false | "light" | Preferred color scheme. |
facebook.image | false | "/facebook.png" | Facebook share image. |
facebook.url | false | "https://website.com" | Page URL. |
facebook.type | false | "website" | Type of resource. See all types here. |
twitter.image | false | "/twitter.png" | Twitter share image. |
twitter.site | false | "@bradgarropy" | Twitter handle of publishing site. |
twitter.card | false | "summary" | Format of Twitter share card. See all types here. |
All of the SEO
props are optional. If a prop is not provided, the associated meta tag will not be rendered.
// renders no seo tags
<SEO/>
// renders all seo tags
<SEO
title="My website"
description="A blog and portfolio"
keywords={["website", "blog", "portfolio"]}
icon="/favicon.ico"
themeColor="#000000"
colorScheme="light"
facebook={{
image: "/facebook.png",
url: "https://website.com",
type: "website",
}}
twitter={{
image: "/twitter.png",
site: "@bradgarropy",
card: "summary",
}}
/>
// renders some seo tags
<SEO
title="My blog"
description="Posts about technology"
keywords={["website", "blog", "technology"]}
/>
❔ Questions
🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼♂️ use my ama or twitter to ask any other questions