GuidesSEO

Table of Contents:

Setup

  • Open config.ts file and add values for appName, appDescription, and domainName. These values will be used as default SEO tags. The helper /libs/seo.tsx adds all the important SEO tags (with your default values) to all pages thanks to the main /app/layout.tsx file.
  • To add custom SEO tags to a page without rewriting all the tags, do this:
  • /app/tos/page.tsx

    1
    2import { getSEOTags } from "@/libs/seo";
    3...
    4
    5export const metadata = getSEOTags({
    6  title: "Terms and Conditions | ShipFast",
    7  canonicalUrlRelative: "/tos",
    8});
    9
    10export default async function TermsAndConditions() {
    11...

    Marc Lou recommends setting title & canonicalUrlRelativefor each pages.

  • When relevant, add Structured Data to a page using the renderSchemaTags() function in /libs/seo.tsx. It helps Google understand better your website and can get you a rich snippet. Open the component for more documentation. Here's an example:
  • /app/page.tsx

    1import { renderSchemaTags } from "@/libs/seo";
    2
    3export default function Page() {
    4  return (
    5    <>
    6      {renderSchemaTags()}
    7
    8      <main className="flex min-h-screen flex-col items-center justify-center gap-12 p-8 text-center">
    9        <h1 className="text-3xl font-extrabold">Ship Fast</h1>
    10        ...
    11      </main>
    12    </>
    13  );
    14}
  • There are 2 way to get a sitemap.xml & robotx.txt file.
    • Add your root URL to siteUrl (i.e. https://yourdomain.com) in the next-sitemap.config.js file, in the root folder. It will generate a sitemap.xml & robotx.txt file for all your pages (at build time).
    • Create a robots.ts & sitemap.ts file in the /app folder and it will generate when people visit /robots.txt & /sitemap.xml.

/app/robots.ts

1import { MetadataRoute } from 'next'
2    export default function robots(): MetadataRoute.Robots {
3    return {
4        rules: {
5            userAgent: '*',
6            allow: '/',
7        },
8        sitemap: 'https://example.com/sitemap.xml',
9    }
10}

/app/sitemap.ts

1import { MetadataRoute } from 'next'
2import { articles } from "./blog/_assets/content";
3
4export default function sitemap(): MetadataRoute.Sitemap {
5
6    const routes = ["", "/blog"].map((route) => ({
7        url: `https://example.com${route}`,
8        lastModified: new Date().toISOString(),
9        changeFrequency: "daily",
10        priority: 1,
11    }));
12
13    const blog = articles.map((article) => ({
14        url: `https://example.com/blog/${article.slug}`,
15        lastModified: new Date().toISOString(),
16        changeFrequency: "daily",
17        priority: 0.5,
18    }));
19
20    return [...routes, ...blog];
21}

Claim your domain ownership on Google Search Console to help indexing.

Make a Blog in minutes

In the /app/blog/_assets folder, you have a content.tsx file that contains all your blog posts, authors, categories and style. Simply add your content there and ShipFast will generate a blog for you. See the blog section for more details.