Skip to main content

SEO

Configuration​

open the config.js file in the root directory and add values for appName, appDescription, and domainName. These values will be used as default SEO tags.

config.js
const config = {
  appName:        "OneDay.Build",
  appDescription: "OneDay.Build provides individual developers or startups with a set of basic functionality packages for building a SaaS platform.The NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app.",
  domainName:     "OneDay.Build",
  contactEmail:   "bassnova@gmail.com",
  ogImage: "https://OneDay.Build/images/og.png",
	links: {
		twitter: "https://twitter.com/bassnova",
		instagram: "https://instagram.com/OneDayBuild",
	},
}

Meta​

To add all important SEO tags (with your default values) to all pages through the main file /app/layout.js, use the /libs/seo.js file to reference the website information content.

How to Use​

This function is used to generate a set of SEO-related metadata tags for a web page. These tags can be used in the head section (< head >) of the page to improve the page's visibility and ranking in search engines.

These are all the SEO tags you can add to your pages.

It's already added in the root layout.js so you don't have to add it to every pages

To add custom SEO tags to a page without overriding all tags, do the following:


import { getSEOTags } from "@/libs/seo";
...

export const metadata = getSEOTags({
title: "Dashboard | oneday.Build",
canonicalUrlRelative: "/dashbaord",
});

export default async function Dashboard() {
...

This function returns an object containing all these SEO-related information. The information is based on the provided parameters and the default configuration from @/config.

I recommend to set the canonical URL for each page (export const metadata = getSEOTags({canonicalUrlRelative: "/"});)

SchemaTags​

renderSchemaTags() function from /libs/seo.js is used to add structured data to a web page. It is a script in JSON-LD format that tells search engines detailed information about the page content. Structured data helps search engines better understand the content of the page, and can potentially produce rich results, which are more prominently displayed in search results and can increase click-through rates.

Open the component for more documentation. Here's an example:

import { renderSchemaTags } from "@/libs/seo";

export default function Page() {
return (
<>
{renderSchemaTags( )}

  <main className="flex min-h-screen flex-col items-center justify-center text-center gap-12 p-8">
    <h1 className="text-3xl font-extrabold">Ship Fast</h1>
...
  </main>
</>
);
}

In this function, the dangerouslySetInnerHTML property of the <script> tag is used to insert the JSON-LD data. This JSON contains the following information:

  • @context and @type: Defines the context and type of the data, which is SoftwareApplication in this case.

  • name: The name of the application.

  • description: The description of the application.

  • image: The icon or image of the application.

  • url: The URL of the application.

  • author: The author information of the application.

  • datePublished: The publication date.

  • applicationCategory: The category of the application.

  • aggregateRating: The aggregate rating of the application, including the rating value and the number of ratings.

  • offers: Information about the offers for the application, including the price and currency.

This information should be customized according to the actual application or web page content.

info

sitemap​

In the next-sitemap.config.js file in the root folder, add your root URL to siteUrl (e.g., https://yourdomain.com). It will generate a sitemap.xml and robots.txt file for all pages (during build).

tip

Declare ownership of your domain on Google Search Console to help with indexing.