Tips and Tricks to Improve SEO Performance of a Next.js Application
Tags: javascript, programming, react, aws
Published: 2023-11-27 15:39:59

To read more articles like this, [visit my blog](https://www.mdfaisal.com/blog)


We all love React for its speed and performance. As it uses single-page application approach, everything feels fast and instantaneous.

But this comes with a cost: this approach hurts React applications’ SEO. It’s very hard to make a React application that is SEO-friendly.

There are some ways you can do it, though.

[**3 Easy Ways to Solve SEO Problems in React Applications**
React is not suitable for SEO… or is it?javascript.plainenglish.io](https://javascript.plainenglish.io/3-easy-ways-to-solve-seo-problems-in-react-applications-d3d7873dc494)

But if you care about SEO, using plain React might not be a good idea. You should look into Next.js.

## How Next.js Helps with SEO

We all know that for a page to be indexed by Google and other search engines, your website has to be crawlable by Google bots.

The bots are looking for meta tags on your page to understand the content of the page and rank that page accordingly.

As React generates a single-page application, including appropriate meta tags for each page is hard. We have some workarounds, but Next.js makes it super simple.

Let’s see how:

## First Option: Using Head

Next.js has a special `Head` component that can be imported like this:

```js
import Head from 'next/head'
```

You can use this `Head` component to add meta tags to your page.

Let’s create a new project using Next.js. We will use `create-next-app`.

```js
yarn create next-app seo-demo --typescript
```

Now open the **index.ts** page under the **pages** folder, and you can see there is already a Head section there. You can add the following additional meta tags there:

```js
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>

      <Head>
        <title>SEO Demo with NextJS</title>
        <meta
          name="description"
          content="This is an application to demo the seo features of NextJS"
        />
        <meta name="og:title" content="SEO Demo with NextJS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <body>This is a SEO Demo page</body>
    </div>
  );
};

export default Home;
```

See we have added a title and 2 meta tags. But did it work? Let’s find out by opening the page.

From your root folder, run:

```js
yarn dev
```

Now open `localhost:3000` and if you inspect the contents of your page, you can see the head tag on your page.

![SEO Tags on the actual HTML document](https://cdn-images-1.medium.com/max/2844/1*tDDKGVgPxeA80Jj-uuowMA.png)

So it’s really powerful that you can add any meta tags to any page. You can even make them dynamic if you want!

## First Option: Using next-seo

Now there is another option we can choose, a special package whose sole purpose is to provide SEO support to Next.js applications. And it’s quite popular as well!

The package’s name is [next-seo](https://www.npmjs.com/package/next-seo). First, install it:

```js
yarn add next-seo
```

Now what this package does is provide you with a special component named NextSEO . Previously, we have seen that inside the Head section, we have to add meta tags manually.

So there is a chance of a typo or some other kind of error. But when using next-seo, it’s controlled by component props so we have better type safety!

Let’s import it inside our component:

```js
import { NextSeo } from "next-seo";
```

And Instead of the `Head` component, we will use this `NextSEO` component now:

```js
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { NextSeo } from "next-seo";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <NextSeo
        title="SEO Demo with NextJS"
        description="This is an application to demo the seo features of NextJS"
        openGraph={{
          title: "Open Graph Title for SEO Demo",
        }}
      />
      <body>This is a SEO Demo page</body>
    </div>
  );
};

export default Home;
```


So now if you open your page, you can see the same result there

![SEO Demo for next-seo package](https://cdn-images-1.medium.com/max/2844/1*WQcFUEu0kZoToPIcob6dzg.png)

And there are tons of other options you can explore while using this awesome package.

## My Recommendation

If you are a simple developer (like me) and don’t know much about SEO, then next-seo will be a better idea because it forces you to use some of the features that can automatically improve the SEO performance without you knowing it.

But if you are an SEO expert and know what you are doing, the `Head` component provided by Next.js should be enough for you!

That’s it for today! Have a great day!


**Have something to say? Get in touch with me via [LinkedIn](https://www.linkedin.com/in/56faisal/) or [Personal Website](https://www.mdfaisal.com/)**