next-head-seo


A simple and light-weight SEO plugin for Next.js applications.

- ⚡️ < 1kb gzipped
- ✨ Zero dependencies
- ✍️ Designed based on Google 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, use 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!

title="Hello!"
description="Some description"
canonical="https://example.com/hello"
og={{
title: "Open graph title",
image: "https://example.com/og.png",
}}
/>

);

export default Page

// Output:
//
//
//
//
//
//
//
`




Default SEO Settings

There are 2 options to configure default SEO properies.

$3

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 /}
og={{
image: "https://example.com/default-og.png",
type: 'article',
siteName: 'Your app name',
}}
twitter={{
card: "summary"
}}
/>
{/ Place after /}


);
}

export default MyApp
`

Make sure is placed before since next-head-seo respects the latter value for same property name.

$3

Alternatively, just create a wrapper component which can be used on each page component. This is more frexible 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 (
title={noTitleTemplate ? title : ${title} - MyAppName}
canonical={pageUrl}
description={description}
robots={noindex ? 'noindex, nofollow' : undefined}
og={{
title,
description,
url: pageUrl,
image: ogImageUrl,
type: 'article',
siteName: 'MyAppName',
}}
twitter={{
card: "summary_large_image",
}}
/>
);
};
`

Then, place in each page component.

`tsx
// pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"

const Page = () => (
<>


Hello!

path="/example"
title="Hello!"
noindex={true}
/>

);
export default Page

// Output:
//
//
//
//
//
//
//
//
//
//
//
//
//
`




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. | string |
| twitter.card | Twitter card image type. Set along with og:image prop.
See detail: Twitter Cards | "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 | 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 section. | An array of objects |
| customLinkTags | Array of object for custom link tags. See customLinkTags section. | An array of objects |




$3

You can set additional meta tags.
Example:

`tsx
customMetaTags={[
{
name: 'foo',
content: 'foo-content'
},
{
property: 'bar',
content: 'bar-content'
}
]}
/>
// 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
customMetaTags={[
{
key: "custom-meta",
name: 'foo',
content: 'foo-content'
}
]}
/>

// in /pages/example.tsx
customMetaTags={[
{
key: "custom-meta",
name: 'bar',
content: 'bar-content'
}
]}
/>

// Output:
//
//
//
`

$3


You can set additional link tags.
Example:

`tsx
customLinkTags={[
{
rel: 'foo',
href: 'https://example.com/foo'
},
{
rel: 'bar',
type: 'bar-type',
href: 'https://example.com/bar'
},
]}
/>
// 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
customLinkTags={[
{
key: "custom-link",
rel: 'foo',
content: 'https://example.com/foo'
}
]}
/>

// in /pages/example.tsx
customLinkTags={[
{
key: "custom-link",
rel: 'bar',
type: 'bar-type',
ccontent: 'https://example.com/bar'
}
]}
/>

// Output:
//
//
//
``