1. Developer guides

Generate page metadata and Open Graph tags

Version: 2.x

Content SDK can generate a page's <title>, standard metadata tags, and Open Graph tags from fields returned as siblings of Title on a Sitecore route. This removes the need to hand-write generateMetadata logic, or <head> markup, for these fields in every page.

The following fields are supported when present on the route:

FieldOutput
Title<title> (always the source for <title>; falls back to a default when absent)
baseMetadataTitle<meta name="title"> (doesn't affect <title>)
baseMetadataDescription<meta name="description">
baseMetadataKeywords<meta name="keywords">
baseMetadataAuthor<meta name="author">
baseOgTitleog:title
baseOgDescriptionog:description
baseOgImageog:image, og:image:width, og:image:height, og:image:alt
baseOgTypeog:type

Every field maps to exactly one tag independently; there is no cross-field fallback. A field with no value simply omits its tag.

Open Graph time tags

When baseOgType is set to a type that the Open Graph protocol defines a time tag for, the route's published and updated values (if present) are mapped to the matching tag:

baseOgType valueCreation time tagUpdate time tag
articlearticle:published_timearticle:modified_time
bookbook:release_date—
music.albummusic:release_date—
video.movievideo:release_date—
video.episodevideo:release_date—
Note

published and updated are populated on the route from the item's publish and modification timestamps, when available from the layout response.

For App Router apps - getPageMetadata

Use getPageMetadata from @sitecore-content-sdk/nextjs as the return value of a page's generateMetadata:

import { Metadata } from 'next';
import { getPageMetadata } from '@sitecore-content-sdk/nextjs';

export const generateMetadata = async ({ params }: PageProps): Promise<Metadata> => {
  const { path, site, locale } = await params;
  const page = await client.getPage(path ?? [], { site, locale });

  return getPageMetadata(page?.layout.sitecore.route);
};

getPageMetadata returns a Next.js Metadata object built from the route fields described in the preceding table.

For Pages Router apps - PageMetaTags

Use the PageMetaTags component from @sitecore-content-sdk/nextjs in your layout to render the same tags via next/head:

import { PageMetaTags } from '@sitecore-content-sdk/nextjs';

const Layout = ({ page }: LayoutProps): JSX.Element => {
  const { layout } = page;
  const { route } = layout.sitecore;

  return (
    <>
      <PageMetaTags route={route} />
      {/* ...rest of layout... */}
    </>
  );
};

PageMetaTags accepts the following props:

PropTypeDescription
routeRouteData<PageMetadataRouteFields> | nullRoute node from a Sitecore layout response, for example page.layout.sitecore.route.
defaultTitlestringFallback for <title> when the route has no Title field. Defaults to 'Page'.

PageMetaTags and getPageMetadata apply the same field-mapping rules, so both routers produce equivalent output.

Extending your route fields type

If you declare a custom type for your route's fields, extend PageMetadataFields so the metadata fields are included:

import { PageMetadataFields, Field } from '@sitecore-content-sdk/nextjs';

export interface RouteFields extends PageMetadataFields {
  [key: string]: unknown;
  Title?: Field;
}
If you have suggestions for improving this article, let us know!