SEO Optimized

💡

The goal of SEO is to create a strategy that will increase your rankings in search engine results. The higher the ranking, the more organic traffic to your site. Fortunately, NextSaaS boilerplate has everything built-in to follow best SEO practices.

Meta Tags for App Router

Next.js provides a Metadata API to define your application metadata. Here's what's defined in NextSaaS boilerplate:

src/app/layout.tsx

// Generates your favicon set here - https://realfavicongenerator.net/
export const metadata: Metadata = {
  // Title and description
  title: {
    default: SITE.name,
    template: `%s | ${SITE.name}`,
  },
  description: SITE.description,
  // Keywords and authors
  keywords: SITE.keywords,
  authors: [
    {
      name: SITE.creator,
      url: SITE.name,
    },
  ],
  creator: SITE.creator,
  // Open Graph and Twitter metadata
  openGraph: {
    type: "website",
    locale: "en_US",
    url: SITE.url,
    title: SITE.name,
    description: SITE.description,
    siteName: SITE.name,
    images: [
      {
        url: `${SITE.url}/og.png`,
        width: 700,
        height: 577,
        alt: SITE.name,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: SITE.name,
    description: SITE.description,
    images: [`${SITE.url}/logo.jpg`],
    creator: SITE.creator,
  },
  // Robots meta tag and canonical URL
  robots: {
    index: true,
    follow: true,
    "max-image-preview": "large",
    "max-snippet": -1,
    "max-video-preview": -1,
    googleBot: "index, follow",
  },
  alternates: {
    canonical: SITE.url,
  },
  // Apple Web App metadata
  appleWebApp: {
    title: SITE.name,
    statusBarStyle: "default",
    capable: true,
  },
  // Verification for different platforms
  verification: {
    google: "YOUR_DATA",
    yandex: ["YOUR_DATA"],
    other: {
      "msvalidate.01": ["YOUR_DATA"],
      "ir-site-verification-token": ["YOUR_DATA"],
      "facebook-domain-verification": ["YOUR_DATA"],
      "impact-site-verification": ["YOUR_DATA"],
      "p:domain_verify": ["YOUR_DATA"],
    },
  },
  // Manifest and icons
  manifest: `${SITE.url}/site.webmanifest`,
  icons: {
    icon: [
      {
        url: "/favicon.ico",
        type: "image/x-icon",
      },
      // More icon configurations...
    ],
    shortcut: [
      {
        url: "/favicon.ico",
        type: "image/x-icon",
      },
    ],
  },
  // Other meta tags
  other: {
    "msapplication-TileColor": "#da532c",
  },
};

Sitemap and Robots.txt

NextSaaS is integrated with next-sitemap to generate sitemap and robots.txt files in the post-build step. You can customize the generation logic in next-sitemap.config.js, but for most cases, you won't need to modify it.

Checkout our blog post on how we maximize website performance with Next.js and NextSaaS

Maximize Website Performance with Next.js and NextSaaS (opens in a new tab)

Useful Resources

Internationalization Analytics