NextJS

With Next.js header tags we have a nice way to make it easy to configure and update meta tags using your `<Head>` component, but you still need to know which tags to set and replace. And to facilitate this process, we can use on the `next-seo` package.

# Instaling the package

First of all, we need to install the `next-seo` package in our Next.js app:

```bash
yarn add next-seo
# or
npm install next-seo
```

# Using SEO in Next.js app

I prefer to create a file in the root folder of the project called `next-seo.config.js`. And inside it, put the application's default SEO information. Example:

```javascript
const SEO = {
  title: 'Site title',
  titleTemplate: '%s | Site title',
  defaultTitle: 'Default site title',
  description: 'Lorem ipsum dolor...',
  openGraph: {
    type: 'blog',
    site_name: 'Site name',
    locale: 'en_US',
    url: 'address-of-your-site.com',
    profile: {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
};

export default SEO;
```

And then add this SEO data in the `_app.tsx` or `_app.jsx`.

```javascript
import SEO from '../next-seo.config';
import type { AppProps } from 'next/app';
import { DefaultSeo } from 'next-seo';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp
```

# Changing default data on other pages

Let's say you want to change the title or description of a specific page, then you can import and add in the NextSEO component the proporties you want to change. For exemple, I want to change the title of page about me, so I'm going to add the component at the `about-me.tsx` page.

```javascript
import { NextPage } from 'next';
import { NextSeo } from 'next-seo';

const AboutMe: NextPage = () => {
  return (
    <>
      <SeoPage title={'About me'} />
      ...
    </>
  );
};

export default AboutMe;
```

And there you have it, a quick introduction to `next-seo`. I hope this article has been of some help to you. Until next time! 👋

The better way to manage SEO in Next.js

Tag: NextJS

Contact Me

Have question? Get in touch!