GuidesSEO
Table of Contents:
Setup
- Open
config.ts
file and add values forappName
,appDescription
, anddomainName
. 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:
- 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: - 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.ts
&sitemap.ts
file in the/app
folder and it will generate when people visit/robots.txt
&/sitemap.xml
.
/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
& canonicalUrlRelative
for each pages.
/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}
/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.