GuidesSEO

Table of Contents:

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.

/app/robots.js

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

/app/sitemap.js

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}

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.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.