The SEO functionality is centralized in the src/lib/seo.ts file. This file provides a set of utilities to generate consistent and customizable metadata for your pages and blog posts.

​
Metadata defaults

You can configure the default metadata in the src/config/config.ts file:

export const config = {
  ...
// REQUIRED - SEO settings for (e.g. Title, Description)
  seo: {
    // REQUIRED — Title of the app
    title: 'My Saas',
    // REQUIRED — Description of the app
    description: 'The best Saas in the world',
  },
  ...
};

​
Metadata for individual pages

To generate metadata for a page, use the generateMetadata function:

import { generateMetadata } from "@/lib/seo";

export const metadata = generateMetadata({
	title: "My Custom Page",
	description: "This is a custom page description",
});

​
Metadata for blog posts

For blog posts, use the generateBlogMetadata function:

import { generateBlogMetadata } from "@/lib/seo";

export const metadata = generateBlogMetadata({
	title: "My Blog Post",
	description: "This is a blog post about...",
	author: "John Doe",
	publishDate: "2023-06-01",
	tags: ["nextjs", "seo", "web development"],
});

​
Opengraph and Twitter Images

At least don’t forget to add an custom image for the opengraph and twitter cards. You can do this by replacing the existing files in the src/app folder:

  • src/app/opengraph-image.jpg
  • src/app/twitter-image.jpg