GuidesSEO

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.

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}

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}

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.