❀Neck Protection Mandate

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

    1.2.0Β β€’Β PublicΒ β€’Β Published

    πŸ”Ž next seo

    version downloads size github actions coverage typescript contributing contributors discord

    πŸ”Ž seo component for next.js

    Next.js provides a <Head> component to update meta tags. However, there's still much to understand if you want to achieve proper SEO. This component makes it easy to manage your SEO tags. It supports Facebook, Twitter, Open Graph, and meta tags.

    next link

    πŸ“¦ Installation

    This package is hosted on npm.

    npm install @bradgarropy/next-seo

    πŸ₯‘ Usage

    To add a base set of SEO tags, create a custom <App/> component and add the <SEO/> component there. The SEO tags will render for every route in your site.

    // ./pages/_app.js
    
    import SEO from "@bradgarropy/next-seo"
    
    const MyApp = ({Component, pageProps}) => {
        return (
            <>
                <SEO title="My website" description="A blog and portfolio" />
                <Component {...pageProps} />
            </>
        )
    }
    
    export default MyApp

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

    // ./pages/about.js
    
    import SEO from "@bradgarropy/next-seo"
    
    const AboutPage = () => {
        return (
            <>
                <SEO description="Learn more about me" />
                <Component {...pageProps} />
            </>
        )
    }
    
    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

    ✨ Contributors


    Brad Garropy

    πŸ’» πŸ“– ⚠️ πŸš‡

    Nick Radford

    πŸ›

    Max Programming

    πŸ› πŸ€” πŸ’» πŸ““

    Install

    npm i @bradgarropy/next-seo

    DownloadsWeekly Downloads

    42

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    24.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • bradgarropy