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 and Sitemap

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.