Skip to main content
All pages are optimized for SEO by default. The codebase comes with tools to automatically import the right metadata tags, generate a sitemap and dynamic OG banners.

​
Metadata

By default, the layout.tsx file will import the metadata specified in config.ts. Additionally, demo apps import & overwrite the default metadata with the values specified in their respective toolConfig.ts file.
You can override the default meta tags by exporting a metadata object in your pages.tsx file.
app/layout.tsx
export const metadata = {
  title: `${defaultTitle}`,
  description: defaultDescription,
  icons: [{ rel: "icon", url: `${defaultUrl}/favicon.ico` }],
  openGraph: {
    url: defaultUrl,
    title: `${defaultTitle} | ${projectName}`,
    description: defaultDescription,
    images: [
      {
        url: `${defaultUrl}/og.png`,
        width: 800,
        height: 600,
        alt: `${projectName} logo`,
      },
    ],
  },
};
SEO defaults are configured in the config.ts file at the root of your project.

​
Sitemap

Under /app/sitemap.ts you’ll find the script to generate your sitemap. It automatically generates an entry for each of your blog pages using Content Collections, and you can add static pages or modify it as desired.
app/sitemap.ts
import { allBlogs } from "content-collections";
import { type MetadataRoute } from "next";
import { companyConfig } from "@/config";

export default function sitemap(): MetadataRoute.Sitemap {
  const posts = allBlogs;

  const staticLinks = [
    "/blog",
    "/apps",
    "/audio",
    "/chat",
    "/studio",
    "/image-ai",
    "/vision",
    "/structured-output",
    "/voice",
  ];

  return [
    {
      url: companyConfig.company.homeUrl,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    ...staticLinks.map((path) => ({
      url: `${companyConfig.company.homeUrl}${path}`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 0.8,
    })),
    ...posts.map((post) => ({
      url: `${companyConfig.company.homeUrl}/blog/${post.slug}`,
      lastModified: new Date(post.date),
      priority: 0.7,
    })),
  ];
}

​
Dynamic OG images

Under /app/api/og/route.ts you’ll find the code used to generate dynamic OG images for your website. We use the next/og library for this. You can find examples of usage here.