Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bradgarropy/next-seo
🔎 next seo
https://github.com/bradgarropy/next-seo
eslint facebook hacktoberfest jest meta next open-graph prettier react seo twitter typescript
Last synced: about 2 months ago
JSON representation
🔎 next seo
- Host: GitHub
- URL: https://github.com/bradgarropy/next-seo
- Owner: bradgarropy
- License: mit
- Created: 2021-01-05T15:30:50.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-04T13:57:18.000Z (about 3 years ago)
- Last Synced: 2024-10-13T04:38:56.995Z (2 months ago)
- Topics: eslint, facebook, hacktoberfest, jest, meta, next, open-graph, prettier, react, seo, twitter, typescript
- Language: TypeScript
- Homepage: https://npmjs.com/package/@bradgarropy/next-seo
- Size: 1010 KB
- Stars: 20
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license
Awesome Lists containing this project
README
# 🔎 next seo
[![version][version-badge]][npm]
[![downloads][downloads-badge]][npm]
[![size][size-badge]][bundlephobia]
[![github actions][github-actions-badge]][github-actions]
[![coverage][codecov-badge]][codecov]
[![typescript][typescript-badge]][typescript]
[![contributing][contributing-badge]][contributing]
[![contributors][contributors-badge]][contributors]
[![discord][discord-badge]][discord]
_🔎 seo component for [next.js][next]_
[Next.js][next] provides a `` 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][facebook], [Twitter][twitter-cards], [Open Graph][og], and `meta` tags.
## 📦 Installation
This package is hosted on [`npm`][npm].
```bash
npm install @bradgarropy/next-seo
```
## 🥑 Usage
To add a base set of SEO tags, create a [custom `` component][app] and add the `` component there. The SEO tags will render for every route in your site.
```jsx
// ./pages/_app.js
import SEO from "@bradgarropy/next-seo"
const MyApp = ({Component, pageProps}) => {
return (
<>
>
)
}
export default MyApp
```
If you want to override SEO tags on individual pages, use the `` component and only include the props that you want to update. For example, if you added `` in the `_app.js` file as shown above, and then included `` in the `about.js` file as shown below, the `description` would be overwritten to be `Learn more about me`.
```jsx
// ./pages/about.js
import SEO from "@bradgarropy/next-seo"
const AboutPage = () => {
return (
<>
>
)
}
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
### ``
| 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.
```jsx
// renders no seo tags
// renders all seo tags
// renders some seo tags
```
## ❔ Questions
🐛 report bugs by filing [issues][issues]
📢 provide feedback with [issues][issues] or on [twitter][twitter]
🙋🏼♂️ use my [ama][ama] or [twitter][twitter] to ask any other questions
## ✨ Contributors
Brad Garropy
💻 📖 ⚠️ 🚇
Nick Radford
🐛
Max Programming
🐛 🤔 💻 📓
[next]: https://nextjs.org
[facebook]: https://developers.facebook.com/docs/sharing/webmasters
[twitter-cards]: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
[og]: https://ogp.me
[version-badge]: https://img.shields.io/npm/v/@bradgarropy/next-seo.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dt/@bradgarropy/next-seo?style=flat-square
[bundlephobia]: https://bundlephobia.com/result?p=@bradgarropy/next-seo
[size-badge]: https://img.shields.io/bundlephobia/minzip/@bradgarropy/next-seo?style=flat-square
[github-actions]: https://github.com/bradgarropy/next-seo/actions
[github-actions-badge]: https://img.shields.io/github/workflow/status/bradgarropy/next-seo/%F0%9F%9A%80%20release?style=flat-square
[codecov]: https://app.codecov.io/gh/bradgarropy/next-seo
[codecov-badge]: https://img.shields.io/codecov/c/github/bradgarropy/next-seo?style=flat-square
[typescript]: https://www.typescriptlang.org/dt/search?search=%40bradgarropy%2Fnext-seo
[typescript-badge]: https://img.shields.io/npm/types/@bradgarropy/next-seo?style=flat-square
[contributing]: https://github.com/bradgarropy/next-seo/blob/master/contributing.md
[contributing-badge]: https://img.shields.io/badge/PRs-welcome-success?style=flat-square
[contributors]: #-contributors
[contributors-badge]: https://img.shields.io/github/all-contributors/bradgarropy/next-seo?style=flat-square
[discord]: https://bradgarropy.com/discord
[discord-badge]: https://img.shields.io/discord/748196643140010015?style=flat-square
[npm]: https://npmjs.com/package/@bradgarropy/next-seo
[issues]: https://github.com/bradgarropy/next-seo/issues
[twitter]: https://twitter.com/bradgarropy
[ama]: https://bradgarropy.com/ama
[types]: https://ogp.me/#types
[cards]: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
[app]: https://nextjs.org/docs/advanced-features/custom-app