All pages are optimized for SEO by default. The codebase comes with tools to automatically import the right metadata tags, generate a sitemap and dynamig 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`,
      },
    ],
  },
};

​
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, and you can add static pages or modify it as desired.

app/sitemap.ts
import { allPosts } from "contentlayer/generated";
import { type MetadataRoute } from "next";
import { defaultUrl } from "@/config";

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

  const staticLinks = [
    "/blog",
    "/pdf",
    "/audio",
    "/chat",
    "/openai/gpt",
    "/openai/dalle",
    "/openai/whisper",
    "/replicate/sdxl",
    "/groq/llama",
  ];

  return [
    {
      url: defaultUrl,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    ...staticLinks.map((path) => ({
      url: `${defaultUrl}${path}`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 0.8,
    })),
    ...posts.map((post) => ({
      url: `${defaultUrl}/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.

BlogEmails