GuidesSEO

Setup

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

/app/tos/page.js

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 & andcanonicalUrlRelativefor each pages.

• When relevant, add Structured Data to a page using the renderSchemaTags() function in /libs/seo.js. 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.js

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 text-center gap-12 p-8">
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.js & sitemap.js file in the /app folder and it will generate when people visit /robots.txt & /sitemap.xml.

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

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

Make a Blog in minutes

In the /app/blog/_assets folder, you have a content.js 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.