GuidesSEO
Table of Contents:
Setup
- Open
config.js
file and add values forappName
,appDescription
, anddomainName
. 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:
- 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: - 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 asitemap.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/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
& andcanonicalUrlRelative
for each pages.
/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}
/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.