📋 NextJS Boilerplate
Features
Seo

SEO

BuilderKit provides a utility function to generate SEO metadata for your Next.js application. This function simplifies the process of creating SEO-friendly pages by providing a structured object with the necessary metadata for search engines and social media platforms.

import getSeoMetadata from "@/utils/seo-metadata";

Usage

const seoData = getSeoMetadata({
  title: "Example Page Title",
  description: "Description of the example page",
  keywords: ["example", "demo", "tutorial"],
  canonicalUrlRelative: "/example-page",
  extraTags: {
    customMetaTag: "Custom meta tag value",
  },
});

The getSeoMetadata function accepts an object with the following properties:

Parameters

  • title (string, optional): The custom title for the SEO metadata. If not provided, it defaults to the app name from the configuration.
  • description (string, optional): The description for SEO. If not provided, it defaults to the app description from the configuration.
  • keywords (string[], optional): An array of SEO keywords. If not provided, it defaults to an array containing the app name.
  • canonicalUrlRelative (string, optional): The relative URL for the canonical link, which is useful for avoiding duplicate content issues.
  • extraTags (Record<string, string>, optional): Any additional meta tags as an object, where the key is the tag name, and the value is the content.

Return Value

The function returns an object structured for SEO usage with the following properties:

  • title: The page title.
  • description: The page description.
  • keywords: An array of keywords.
  • metadataBase: The base URL of the app.
  • openGraph: An object containing Open Graph data for social media sharing, including type, locale, title, description, url, siteName, and images.
  • twitter: An object containing Twitter card data, including card, title, description, and images.
  • alternates.canonical (optional): The canonical URL relative to the base URL, if canonicalUrlRelative was provided.
  • extraTags (optional): Any additional meta tags provided in the extraTags parameter.

This structured object can be passed to the NextSeo component from the next-seo library to inject the SEO metadata into the <head> section of your Next.js application.

Example

Here's an example of how you can use the getSeoMetadata function in a React component:

import getSeoMetadata from "@/utils/seo-metadata";
 
export default function MyPage() {
  const seoData = getSeoMetadata({
    title: "My Page Title",
    description: "This is a description for my page.",
    keywords: ["example", "demo", "tutorial"],
    canonicalUrlRelative: "/my-page",
    extraTags: {
      customMetaTag: "Custom meta tag value",
    },
  });
 
  return (
    <>
      {/* Inject the SEO metadata into the <head> section */}
      <NextSeo {...seoData} />
 
      {/* Render the page content */}
      <div>
        <h1>{seoData.title}</h1>
        <p>{seoData.description}</p>
        {/* ... */}
      </div>
    </>
  );
}

In this example, the getSeoMetadata function is used to generate the SEO metadata for the MyPage component. The generated seoData object is then passed as props to the NextSeo component, which injects the metadata into the <head> section of the HTML document.

Note that the NextSeo component is from the next-seo library, which needs to be installed and configured separately.

WaitlistsCrisp