@natu/storyblok-seo

Handling the SEO.

getStoryblokSeoData contains main functionality of the package. It gets SEO data from Storyblok and generates metadata object which can be used in the Next page. See docs about using metadata in Next.js ↗ (opens in a new tab) for more datails.

Usage

"dependencies": {
    "@natu/storyblok-seo": "*",
}

import { type Metadata } from 'next';
import { getStoryblokSeoData } from '@natu/storyblok-seo';
 
export const generateMetadata = async (
  { params }: PageProps,
  parent: ResolvingMetadata,
): Promise<Metadata> => {
  const { isEnabled } = draftMode();
  const { getContentNode } = getStoryblokApi({ draftMode: isEnabled });
 
  const slug = getSlugWithAppName({ slug: getSlugFromParams(params.slug) });
 
  const prevData = await parent;
  const configData = await getContentNode({
    slug,
    relations,
  });
 
  return getStoryblokSeoData(configData.ContentNode?.content.seo, {
    slug: `/${getSlugFromParams(params.slug)}`,
    prevData,
  });
};

Managing from CMS

Global SEO

You will find global SEO settings in the application configuration tab:

It will be rendered by default on every page unless you override it on a specific page.

Per page SEO

Each page-type content has an SEO tab where you can override the corresponding global properties.

Sitemap.xml

The application also builds a sitemap of pages, which is accessible at this address /sitemap.xml

Check the const validSitemapComponents. These are the content types that are to be included in the sitemap. For example, if you add a blog, just add the name of the new content type after the comma:

// add more -> "page,other-content-type,other"
const validSitemapComponents = 'page,blogPost';

If a page has the noIndex select option checked, it will not be included in the sitemap.