Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/catnose99/next-head-seo
A light-weight SEO plugin for Next.js.
https://github.com/catnose99/next-head-seo
nextjs seo typescript
Last synced: 6 days ago
JSON representation
A light-weight SEO plugin for Next.js.
- Host: GitHub
- URL: https://github.com/catnose99/next-head-seo
- Owner: catnose99
- License: mit
- Created: 2021-10-07T06:31:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-03T06:12:33.000Z (almost 2 years ago)
- Last Synced: 2025-01-19T16:06:52.554Z (13 days ago)
- Topics: nextjs, seo, typescript
- Language: TypeScript
- Homepage:
- Size: 324 KB
- Stars: 218
- Watchers: 0
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# next-head-seo
[](https://github.com/catnose99/next-head-seo/actions/workflows/test.yml)
[](https://badgen.net/bundlephobia/minzip/next-head-seo)
A simple and light-weight SEO plugin for Next.js applications.
- ⚡️ < 1kb gzipped
- ✨ Zero dependencies
- ✍️ Designed based on [Google Webmaster Guidelines](https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines)
- 🦄 TypeScript support
Although `next-head-seo` supports only essential SEO properties, it would be enough for most websites.
If you need advanced SEO settings such as [structured data](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data), use [next-seo](https://github.com/garmeeh/next-seo) instead.
## Install
```bash
$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo
```
## Usage
Import `next-head-seo` on each page component and add the desired properties.
Example:
```tsx
// pages/example.tsx
import NextHeadSeo from 'next-head-seo';
const Page = () => (
<>
Hello!
>
);
export default Page
// Output:
//
// Hello!
//
//
//
//
//
```
## Default SEO Settings
There are 2 options to configure default SEO properies.
### Place default `` on `_app.tsx`
First option is to place `` with default values on `_app.tsx`.
```tsx
// pages/_app.tsx
import type { AppProps } from 'next/app'
import NextHeadSeo from 'next-head-seo';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{/* Default SEO configuration */}
{/* Place after */}
>
);
}
export default MyApp
```
Make sure `` is placed before `` since next-head-seo respects the latter value for same property name.
### Create Wrapper Component for next-head-seo
Alternatively, just create a wrapper component which can be used on each page component. This is more flexible and reliable way to set default values.
Here is an example of wrapper component:
```tsx
// components/MyPageSeo.tsx
import NextHeadSeo from 'next-head-seo';
// types
export type MyPageSeoProps = {
path: string;
title?: string;
description?: string;
ogImagePath?: string;
noindex?: boolean;
noTitleTemplate?: boolean;
};
export const MyPageSeo: React.FC = (props) => {
const {
path,
title = "Default title",
description = "Default description",
ogImagePath = "/default-og.png",
noindex,
noTitleTemplate,
} = props;
// Set APP_ROOT_URL on enviroment variables
// e.g. APP_ROOT_URL=https://example.com
// https://nextjs.org/docs/basic-features/environment-variables
const APP_ROOT_URL = process.env.NEXT_PUBLIC_APP_ROOT_URL;
// Absolute page url
const pageUrl = APP_ROOT_URL + path
// Absolute og image url
const ogImageUrl = APP_ROOT_URL + ogImagePath
return (
);
};
```
Then, place `` in each page component.
```tsx
// pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"
const Page = () => (
<>
Hello!
>
);
export default Page
// Output:
//
// Hello! - MyAppName
//
//
//
//
//
//
//
//
//
//
//
```
## Options
All the props for `next-head-seo` are optional.
| Prop | Description | Type |
|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|
| title | ✅ *Recommended to set on all pages.*
Page title. | string |
| canonical | ✅ *Recommended to set on all pages.*
Canonical URL of the page. | string |
| robots | Set `noindex, nofollow` only when you don't want the page to be indexed on search engines. Otherwise you don't have to use this prop. | `"noindex, nofollow"`
`"index, follow"`
`"noindex"`
`"nofollow"` |
| description | ✅ *Recommended to set on all pages.*
Page description. Text after 150 characters will be truncated as [Google do](https://moz.com/learn/seo/meta-description). | string |
| twitter.card | Twitter card image type. Set along with `og:image` prop.
See detail: [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary) | `"summary"`
`"summary_large_image"`
`"player"`
`"app"` |
| twitter.site | Twitter username starting with `@` | string |
| og.title | For og:title. Automatically use `title` value if blank.
See detail: [Open Graph protocol](https://ogp.me/) | string |
| og.description | For og:description. Automatically use `description` value if blank. | string |
| og.url | For og:url. Automatically use `canonical` value if blank. | string |
| og.image | For og:image. Set image url. | string |
| og.type | For og:type. | `"article"`
`"book"`
`"website"`
`"profile"` |
| og.siteName | For og:site_name | string |
| customMetaTags | Array of object for custom meta tags. See [customMetaTags](#custom-meta-tags) section. | An array of objects |
| customLinkTags | Array of object for custom link tags. See [customLinkTags](#custom-link-tags) section. | An array of objects |
### Custom Meta Tags
You can set additional meta tags.
Example:
```tsx
// Output:
//
//
//
//
```
If you want to override custom meta tags from another page component, use same keys for both component.
Example:
```tsx
// in /pages/_app.tsx
// in /pages/example.tsx
// Output:
//
//
//
```
### Custom Link Tags
You can set additional link tags.
Example:
```tsx
// Output:
//
//
//
//
```
If you want to override custom link tags from another page component, use same keys for both component.
Example:
```tsx
// in /pages/_app.tsx
// in /pages/example.tsx
// Output:
//
//
//
```