2022-02-28

Next SEO

What is Next SEO

Next-seo is a lightweight library designed to simplify the management of SEO within Next.js applications. As we know, SEO stands for Search Engine Optimization, which involves improving a website's visibility in search engine results pages (SERPs) through various techniques such as optimizing content, using the right keywords, and ensuring that the site's meta tags are properly configured.

However, managing these configurations in a single-page application (SPA) like those made using Next.js can be cumbersome. This is where next-seo comes into play. By providing a streamlined way to control the SEO attributes of your pages, it ensures that your content is presented effectively to both users and search engines.

Installation and Setup

Before you can utilize next-seo in your Next.js application, you need to install it. Next-seo is available as an npm package, so you can install it by using either npm or yarn.

Using npm

bash

$ npm install next-seo

Using yarn

bash

$ yarn add next-seo

After installing next-seo, it’s time to integrate it into your Next.js project. Start by importing it in your page component or in your _app.jsx file for global configuration.

import { NextSeo } from 'next-seo';

Now you can use the NextSeo component in your application.

Integration with Next.js

To integrate next-seo into your Next.js application, you need to use the NextSeo component inside the components or pages where you want to customize the SEO attributes.

Here is an example of how you can use NextSeo to set the title and description of a page:

import { NextSeo } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <NextSeo
        title="Home Page - My Next.js App"
        description="Welcome to the home page of my awesome Next.js application."
      />

      <div>
        <h1>Home Page</h1>
        <p>This is the home page of my Next.js application.</p>
      </div>
    </>
  );
}

In the above example, the NextSeo component is used inside the HomePage component. It takes two props, title and description, which set the page title and meta description respectively.

Next-seo is highly configurable and allows you to set a wide range of SEO attributes, such as canonical URLs, open graph tags, and much more. The NextSeo component can be utilized on a page-by-page basis, giving you fine-grained control over the SEO configurations of each page in your Next.js application.

Next SEO Component

Configuring Meta Tags

The NextSeo component is a fundamental part of the next-seo library. This component can be used in your Next.js pages or components to configure a wide variety of meta tags for SEO purposes. For example, the title and description props can be used to set the title and description meta tags of your pages, respectively.

Here's an example of how you can use NextSeo to set the title, description, and canonical URL of a page:

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

In this example, the canonical prop is used to specify the canonical URL for the page, which can help to prevent duplicate content issues in search engines.

The NextSeo component also allows you to define how your pages will be presented when shared on social media platforms like Facebook and Twitter. This can be done by setting the openGraph and twitter props.

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
        openGraph={{
          url: 'https://www.example.com/',
          title: 'Example Page - My Next.js App',
          description: 'This is an example page of my Next.js application.',
          images: [
            {
              url: 'https://www.example.com/images/og-image.jpg',
              width: 800,
              height: 600,
              alt: 'Og Image Alt',
            },
            {
              url: 'https://www.example.com/images/og-image-2.jpg',
              width: 900,
              height: 800,
              alt: 'Og Image Alt 2',
            },
          ],
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

In this example, the openGraph prop is used to configure how the page will be presented when shared on Facebook, while the twitter prop is used to customize the Twitter card for the page.

SocialProfileJsonLd Component

Another important component provided by next-seo is the SocialProfileJsonLd component. This component allows you to add structured data about your social media profiles in JSON-LD format to your pages, which can enhance your visibility in search engine results.

import { SocialProfileJsonLd } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <SocialProfileJsonLd
        type="Person"
        name="John Doe"
        url="http://www.example.com"
        sameAs={[
          "http://www.facebook.com/yourusername",
          "http://instagram.com/yourusername",
          "http://www.linkedin.com/in/yourusername",
          "http://plus.google.com/yourusername"
        ]}
      />
      <div>
        <h1>Home Page</h1>
        <p>Welcome to my personal website. Connect with me on social media!</p>
      </div>
    </>
  );
}

In this example, the SocialProfileJsonLd component is used to provide structured data about a person's social profiles. The type prop specifies that the structured data is about a person, while the name and url props provide the person's name and website URL. The sameAs prop is an array that contains URLs of the person's social media profiles.

Customizing SEO Tags

With next-seo, you have the flexibility to customize SEO tags for different parts of your application. This enables you to create a tailored experience for different pages and content types, which can lead to more effective SEO strategies.

For instance, if you have a blog within your Next.js application, you might want to set custom titles, descriptions, and social media tags for each blog post. This can be achieved using the NextSeo component within each blog post component.

import { NextSeo } from 'next-seo'

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
        openGraph={{
          title: post.title,
          description: post.summary,
          images: [
            {
              url: post.image,
              alt: post.title,
            },
          ],
        }}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  )
}

In this example, the NextSeo component is used within a BlogPost component. The title, description, and openGraph props are set dynamically based on the data of the blog post.

ArticleJsonLd Component

Another important aspect of SEO, especially for blog posts and articles, is providing structured data in the form of JSON-LD. JSON-LD stands for JSON for Linking Data, and it helps search engines understand the content and context of your pages, which can improve the display of search results.

next-seo offers the ArticleJsonLd component for this purpose. This component allows you to add structured data for articles on your website.

Here’s an example of how to use the ArticleJsonLd component in a blog post:

import { NextSeo, ArticleJsonLd } from 'next-seo';

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
      />

      <ArticleJsonLd
        url={`https://www.example.com/blog/${post.slug}`}
        title={post.title}
        images={[post.image]}
        datePublished={post.datePublished}
        dateModified={post.dateModified}
        authorName={post.authorName}
        publisherName="Example Publisher"
        publisherLogo="https://www.example.com/images/logo.jpg"
        description={post.summary}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  );
}

In this example, the ArticleJsonLd component is used to add structured data to a blog post.

Setting up Default SEO Configuration with DefaultSeo

next-seo allows you to set a default SEO configuration for your Next.js application using the DefaultSeo component. This is useful for setting base SEO attributes that can be used across all pages in your application. You can override these defaults on individual pages using the NextSeo component.

Here's how you can use the DefaultSeo component:

src/pages/_app.jsx

import { DefaultSeo } from 'next-seo';
import defaultSeoConfig from '../seo-config';

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

export default MyApp;

seo-config.js

export default {
  title: "Default title for my Next.js App",
  description: "Default description for my Next.js App",
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.example.com/',
    site_name: 'SiteName',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
};

In this example, a default SEO configuration is set using the DefaultSeo component in the _app.jsx file. This configuration is imported from a separate seo-config.js file. Any page in the Next.js application will use this configuration unless it is overridden using the NextSeo component on that specific page.