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.

Useful Resources

Internationalization Analytics