Community Plugin

🔎 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][types].
`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][cards].

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

✨ contributors

_{Brad Garropy}
💻 📖 ⚠️ 🚇

_{Gem Kosan}
💻