❀Notoriously Problematic Merge

    @bradgarropy/gatsby-plugin-seo
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0Β β€’Β PublicΒ β€’Β Published

    πŸ”Ž gatsby-plugin-seo

    version downloads size github actions coverage typescript contributing contributors discord

    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

    πŸ’»

    Install

    npm i @bradgarropy/gatsby-plugin-seo

    DownloadsWeekly Downloads

    38

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    30

    Last publish

    Collaborators

    • bradgarropy