Skip to content

SEO

SEO Meta Tags

To get SEO tags for a page, you should run the following function on every page:

import { getSEO } from 'utils/seo'
// will return the default metadata
export const metadata = generateSEOTags()
// or customize the metadata
export const metadata = generateSEOTags({
title: 'Page Title',
description: 'Page Description',
image: 'https://example.com/image.jpg',
url: 'https://example.com/page',
})

Structured Data

When appropriate, include Structured Data on a webpage by utilizing the genSchemaTags() method in /libs/seo.tsx. This will enhance Google’s comprehension of your site and potentially result in a rich snippet.

import { getSchemaTags } from 'lib/seo'
export default function RootPage() {
return (
<>
{getSchemaTags()}
<main>{/* Your content */}</main>
</>
)
}

Robots.txt and Sitemap.xml

Metadata files are generated by code:

  • robots.ts -> generates the src/app/robots.txt file
  • sitemap.ts -> generates the src/app/sitemap.xml file
  • manifest.ts -> generates the src/app/manifest.json file

Metadata images

You will have 4 metadata files as a placeholders for you

  • opengraph-image: src/app/opengraph-image.jpg (1200x660)
  • twitter-image: src/app/twitter-image.jpg (1200x660)
  • Favicon: src/app/favicon.ico (32x32)
  • Icon image: src/app/icon.jpg (512x512)

Read more in the Nextjs Docs

TIP: Make sure the images are compressed and optimized to avoid consuming too much bandwidth. Here is a tool to help you with that.