🔎 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.
This package is hosted on npm.
npm install @bradgarropy/next-seoTo 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 MyAppIf 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 AboutPageWith this capability, you can create a default set of SEO tags, and then tailor certain properties on specific pages.
| 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"]}
/>🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼♂️ use my ama or twitter to ask any other questions
Brad Garropy 💻 📖 |
Nick Radford 🐛 |
Max Programming 🐛 🤔 💻 📓 |