Features > SEO

Setup

1. Access the config.ts file and input values for appName, appDescription, and domainName. These entries will serve as default SEO tags. The /libs/seo.ts helper ensures that essential SEO tags, populated with your default values, are applied to all pages through the primary /app/layout.tsx file.

2. To put your own SEO tags on a page without changing all of them, follow these simple steps:

/app/blog/page.tsx

    import { getSEOTags } from "@/libs/seo";
    ...

    export const metadata = getSEOTags({
        title: "Blog Page | Next Starter AI",
        canonicalUrlRelative: "/blog",
    });

    export default async function BlogPage() {
    ...
    

🗒️ Recommendation

It is recommended to set title andcanonicalUrlRelative for each of the pages of your application.

3. When appropriate, include Structured Data on a page by using the renderSchemaTags() function found in /libs/seo.ts This enhances Google's understanding of your website, potentially earning you a rich snippet. For more details, refer to the documentation inside the component. Here's an illustration:

/app/custom-page/page.tsx

    import { renderSchemaTags } from "@/libs/seo";

    export default function CustomPage() {
    return (
        <>
        {renderSchemaTags()}

        <main className="flex min-h-screen flex-col items-center justify-center text-center gap-4 p-4">
            <h1 className="text-3xl">Next Starter AI</h1>
            ...
        </main>
        </>
    );
    }
    

4. Include your main URL (e.g., https://yourdomain.com) under siteUrl in the next-sitemap.config.js file located in the root folder. This will produce a sitemap.xml and robots.txt file encompassing all your pages during the build process.

/next-sitemap.config.js

    module.exports = {
        // REQUIRED: add your own domain name here (e.g. https://nextstarter.ai,
        siteUrl: process.env.SITE_URL,
        generateRobotsTxt: true,
        // use this to exclude routes from the sitemap (i.e. a user dashboard). By default, NextJS app router metadata files are excluded (https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
        exclude: ["/twitter-image.*", "/opengraph-image.*", "/icon.*"],
    };
    

📌 Indexing

Make sure Google knows you own your website by verifying it in Google Search Console. This helps Google understand and list your site better.

Create a blog in just a few minutes.

Inside the /app/blog/_assets folder, locate the blog-contents folder housing all your blog posts. In the constants.ts file, find authors, categories, and style. Just input your content there, and Next Starter AI will automatically create a blog for you. Check out the blog section for additional information.