Docs
SEO
Metadata
JSON-LD

JSON-LD SEO Configuration

Overview

The seo.js file, located at /utils/seo.js, provides utilities for generating JSON-LD (JavaScript Object Notation for Linked Data) structured data. This structured data enhances your website's SEO by providing search engines with detailed information about your application. This utility depends on the settings.js file, located at @/settings. Ensure this file contains the correct values.

It Generates structured data including:

  • Application name and description
  • Author information
  • Pricing details
  • Aggregate rating
  • Application category
  • Publication date
  • Image and URL

File Location

/utils/seo.js

Function Signature:

export const getJSONLD = ({ 
  title, 
  description, 
  canonicalRelativeURL, 
  imageUrl 
} = {}) => { ... }

This function returns a React component that wraps the JSONLD function output in a script tag. The JSONLD function generates a JavaScript object representing the JSON-LD structured data.

Usage

  • Avoid Duplication: It's recommended to avoid using getJSONLD in the root layout to prevent duplication.
  • Placement: Place the getJSONLD function call inside specific pages or layouts.
  • Nested Structures: When used in layouts, avoid calling it again in inner pages to prevent duplicate JSON-LD scripts.

Here is an example usage without any parameters:

import { getJSONLD } from "@/utils/seo";
 
export default function Page() {
  return (
    <>
      {getJSONLD()}
      {/* Rest of your page content */}
    </>
  );
}

Here is an example usage with parameters:

import { getJSONLD } from "@/utils/seo";
 
export default function Page() {
  return (
    <>
      {getJSONLD({
        title: "My Amazing App",
        description: "The best app for managing your tasks",
        canonicalRelativeURL: "/amazing-app",
        imageUrl: "https://myapp.com/app-image.png"
      })}
      {/* Rest of your page content */}
    </>
  );
}

Parameters

  • title (string): The title of the page or application. If not provided, defaults to settings.APP.name.
  • description (string): A brief description of the page or application. If not provided, defaults to settings.APP.description.
  • canonicalRelativeURL (string): The relative URL for the canonical link. If not provided, defaults to settings.APP.url.
  • imageUrl (string): The URL of an image representing the application. If not provided, defaults to ${settings.APP.url}/icon.png.

Configuration

The JSONLD function relies on a settings object for default values. Ensure your /settings.js file includes the following properties:

  • APP.name: Your application's name
  • APP.description: A default description for your application
  • APP.author: The name of the application's author
  • APP.url: The base URL of your application
  • JSONLD.datePublished: The initial publication date of your application
  • JSONLD.price: The price of your application (default: "10.00")
  • JSONLD.currency: The currency for the price (default: "USD")
  • JSONLD.appRating: The aggregate rating of your application (default: "4.9")
  • JSONLD.appRatingCount: The number of ratings (default: "14")
  • JSONLD.appCategory: The category of your application (default: "EducationalApplication")

By properly configuring these settings and utilizing the getJSONLD function, you can significantly enhance your application's SEO presence and provide search engines with rich, structured data about your software application.

MetadataPage SEO