SEO in Next.js 13 with Metadata API

Also available on my blog

Introduction

Next.js has always been a developer's go-to choice for building SEO-optimized web applications. With the release of version 13.2, it's become even more powerful with the introduction of the new Metadata API. In this article, we'll dive into the world of SEO in Next.js, exploring the old and new ways of handling metadata, and how this can help boost search engine rankings.

Exploring the New Metadata API

Before diving into the new Metadata API, let's take a quick look at how metadata was handled before Next.js 13.2.

The Good Ol' Way (Using next/head)

Next.js has provided a simple API for modifying metadata in your application using the next/head component. This allowed you to define metadata (e.g., meta and link tags inside your HTML head element) in your pages and layouts, making it easy to manage SEO.

However, with the introduction of Next.js 13.2, the new Metadata API has been designed to enhance and simplify how you optimize for search engines.

Current State for Next 13

The new Metadata API is available in Next.js 13.2 and above, for the App Router (app). It replaces the previous head.js special file and is not available for the pages directory.

This new API is simple, composable, and designed to be compatible with streaming server rendering. You can set common metadata attributes in your root layout for the entire application and compose and merge metadata objects together for other routes in your application.

SEO in Next: The New Way

Now that we know the basics of the new Metadata API let's dive deeper into how we can use it to create static and dynamic metadata.

Static Metadata

To define static metadata, export a Metadata object from a layout or static page file. For example:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
}

This object allows you to set metadata properties like title, description, openGraph, and more. Check the Metadata object reference for the complete list of supported fields.

Dynamic Metadata

Dynamic metadata can be generated based on runtime information such as route parameters, external data, or parent segment metadata. To do this, export a generateMetadata function that returns a Metadata object.

import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent?: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

The generateMetadata function accepts route parameters and an optional parent metadata object. Next.js will automatically deduplicate fetch requests for the same data across generateMetadata, generateStaticParams, Layouts, Pages, and Server Components.

By using the new Metadata API, you'll be able to create SEO-friendly applications with ease, regardless of whether you need static or dynamic metadata. So, go ahead and give it a try in your Next.js projects, and watch your search engine rankings soar!

Diving Deep into Metadata Fields

As we've explored the new Metadata API in Next.js, it's crucial to understand the different metadata fields, their importance for SEO, and best practices for using them effectively. In this section, we'll take a closer look at each metadata field, providing example values, best practices, and tips to avoid common mistakes. By the end of this section, you will have a comprehensive understanding of how to use these fields to optimize your web application for search engines.

metadataBase

title

{% raw %}description

openGraph

Open Graph properties

Open Graph types are crucial to specify the type of content on your webpage. Each type has its unique set of metadata properties that help search engines and social media platforms better understand and display your content. Some common Open Graph types include website, article, book, and video.movie. Make sure to choose the appropriate type for your content so that it's displayed correctly on different platforms.

The title and description properties are essential for providing a brief overview of your content. The title should be concise and clearly indicate the subject or purpose of your webpage, while the description should provide a short summary of the content. Both properties are often displayed in search results and on social media platforms, so make sure they are engaging and informative to attract users' attention.

The siteName property represents the name of your website or brand. This information helps users recognize your content and associate it with your brand. Ensure that the site name is consistent across all your webpages and accurately reflects your brand identity.

Open Graph allows you to include images, audio, and videos in your metadata to enhance the visual appeal of your content on social media platforms and search results. Make sure to provide high-quality, relevant media files that accurately represent your content. Check that the URLs for these files are valid and accessible to ensure proper display on different platforms.

The url property specifies the canonical URL of your webpage. This information helps search engines understand the preferred version of your content, avoiding duplicate content issues. Make sure to use a complete and well-formed URL, including the protocol (HTTP or HTTPS) and the domain name.

The locale and alternateLocale properties help you specify the language and regional settings of your content. The locale property indicates the primary language and region for your webpage, while the alternateLocale property provides a list of alternate languages and regions for users with different preferences. Properly setting these properties ensures that your content reaches a broader audience and is displayed correctly for users with varying language preferences.

To sum up, Open Graph metadata plays a significant role in improving the presentation of your content on social media platforms and search results, ultimately driving more traffic to your site. Make sure to use the correct Open Graph types, provide engaging titles and descriptions, and include high-quality media files to make your content stand out.

robots

Robots Attributes

The robots metadata is a powerful tool for controlling the behavior of search engines when they crawl and index your website. It accepts a range of attributes, including:

• index (boolean): Determines whether the page should be indexed by search engines. Setting it to true will allow indexing, while false will prevent it. Default is true.
• follow (boolean): Determines whether search engines should follow links on the page. Setting it to true will allow following, while false will prevent it. Default is true.
• noarchive (boolean): Prevents search engines from showing cached versions of the page.
• nosnippet (boolean): Prevents search engines from showing snippets of the page in search results.
• noimageindex (boolean): Prevents search engines from indexing images on the page.
• nocache (boolean): Prevents search engines from caching the page.
• notranslate (boolean): Prevents search engines from offering translations of the page.
• unavailable_after (string): Indicates that the page should be removed from search results after a specific date. Use a date format like "25 Jun 2021 15:00:00 PST".

To use the robots metadata correctly, combine these attributes to provide clear instructions to search engines on how to treat your website's content. For example, if you want your page to be indexed, followed, and not cached, you would set the robots metadata as follows:

{
  index: true,
  follow: true,
  nocache: true
}

This would generate the following HTML:

<meta name="robots" content="index, follow, nocache" />

Remember to double-check your robots metadata to avoid common mistakes, such as accidentally setting noindex or nofollow if you want your pages to be indexed and followed. Additionally, ensure that the syntax and values for other attributes are correct.

referrer

Referrer Values

• no-referrer: The referrer header will not be sent with requests.
• origin: Only the origin of the referring document will be sent.
• no-referrer-when-downgrade: The full URL will be sent unless the request is from HTTPS to HTTP.
• origin-when-cross-origin: The origin will be sent for cross-origin requests, and the full URL for same-origin requests.
• same-origin: The full URL will be sent for same-origin requests, and no referrer for cross-origin requests.
• strict-origin: Only the origin will be sent, unless the request is from HTTPS to HTTP, in which case no referrer will be sent.
• strict-origin-when-cross-origin: The origin will be sent for cross-origin requests and the full URL for same-origin requests, unless the request is from HTTPS to HTTP, in which case no referrer will be sent.

authors

generator

keywords

themeColor

colorScheme

viewport

creator

publisher

alternates

icons

manifest

category

Summary

In conclusion, having a solid understanding of metadata fields and their impact on SEO is vital for creating successful web applications. By leveraging the power of Next.js and its new Metadata API, you can easily create both static and dynamic metadata for your pages, enhancing your application's search engine rankings.

Remember to follow best practices and avoid common mistakes when working with metadata fields to ensure optimal SEO performance. Now, equipped with your newfound knowledge, you're ready to create outstanding, SEO-optimized web applications using Next.js!