SEO

Utility functions

ship.pluv.io comes with several utility functions to ensure each of your pages have the relevant SEO tags and data to be represented correctly and ranked on search engines.

getSeoMetadata

The getSeoMetadata function defines a central location where your site-wide defaults for SEO metadata can be configured. The default values for this function are defined within the following config file: /packages/configs/defaultSeoMetadata.js.

import { getSeoMetadata } from "@workspace/utils";
import type { Metadata } from "next";

// As a value
export const metadata: Metadata = getSeoMetadata({
    // You can provide properties to overwrite the defaults
    title: "My custom title",
    description: "My custom description",
});

// If you need to dynamically generate metadata, export `generateMetadata`
// instead, and provide a function parameter to getSeoMetadata
export const generateMetadata = getSeoMetadata(async () => {
    const details = await getMyMetadataDetails(/* ... */);

    return {
        // You can provide properties to overwrite the defaults
        title: details.title,
        description: "My custom description",
    };
});

Tips

• Next.js will automatically merge metadata objects shallowly for a given route. So often times, you should only need to call getSeoMetadata in each Next.js app's root layout. Then for all other pages/layouts, you can just export the metadata partial object containing the fields you wish to overwrite.

JsonLd

Type-safe SEO rich snippets via the JsonLd component. This component can represent either a single entity or a graph containing multiple entities.

Once the @type property is provided, TypeScript will infer the correct attributes for that entity so you can provide the other properties of those entities confidently.

Render this in your page component wherever you wish to provide this.

import { JsonLd } from "@workspace/ui/custom/JsonLd";

// As a single entity
<JsonLd data={{ "@type": "Person" }} />

// As a graph
<JsonLd
    graph={[
        { "@type": "Person" },
        { "@type": "Organization" }
    ]}
/>

// example of rendering in your page
const Page = () => {
    return (
        <>
            <JsonLd
                data={{ 
                    "@type": "Person",
                    // ...other properties
                }}
            />
            <div>
                {/* ... */}
            </div>
        <>
    );
}

Tips

• If you are building an application that supports user reviews for products, consider adding JsonLd to those product pages and include star ratings. These will appear on Google, and can make users more likely to visit your site.

OG image generation

OG image generation is included via the @vercel/og package. OG images are generated dynamically via the /api/og route. Provide a custom title and description property to generate the image. The route can be called as a typesafe function via the rpc.

The included OG image template can be updated within the following component file: /packages/og-images/src/templates/OgGlobalTemplate.

import { rpc } from "@/shared/rpc";
import type { Metadata } from "next";

const ogImage: URL = rpc.api.og.$url({
    query: {
        title: "How to Make Hard-Boiled Eggs",
        description: "Delicious recipes",
    },
});

// Next.js metadata export
export const metadata: Metadata = {
    // ... other metadata
    openGraph: {
        // ... other openGraph data
        images: [ogImage],
    },
};

Sitemap generation

Sitemaps and robots.txt files are automatically generated for each Next.js app zone via the next-sitemap package each time your app is built (i.e. during automated deployments with your hosting provider).

Each Next.js app zone's sitemaps will be correctly indexed and linked together, even when deployed separately. If you wish to configure your sitemap generation, edit the next-sitemap.config.js files at the base of each Next.js app directory.

Blog

SEO metadata will be taken from the SEO Title and Meta Description columns automatically from your Notion database. All other properties will be taken from the metadata exported from the marketing root layout. See the Blog documentation for more details.

Docs

SEO metadata will be taken from your page's frontmatter title and description properties. All other properties will be taken from the metadata exported from the docs root layout.