Based on a new requirements, we want to add a way for Content Editors to be able to specify the metadata SEO fields. I wanted to know if the following is a recommended way or if there is a better approach. We are using a solution based on https://github.com/sitecorelabs/xmcloud-foundation-head template.
I know there's this template /sitecore/templates/Feature/Experience Accelerator/SiteMetadata/_Seo Metadata that already has MetaKeywords and MetaDescription fields.
My idea was to add fields to this template and then add this to the base templates of the OOTB page template /sitecore/templates/Project/MySite/Page. This in order to add those fields to the content pages using this template (e.g. Home, About Us) and such.
Finally, I would modify the Next.js Layout.tsx component and update the Routefields default interface to include the new fields from SEO
interface RouteFields {
[key: string]: unknown;
Title?: Field;
//new SEO fields
}
const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
const { route } = layoutData.sitecore;
const fields = route?.fields as RouteFields;
const isPageEditing = layoutData.sitecore.context.pageEditing;
const mainClassPageEditing = isPageEditing ? 'editing-mode' : 'prod-mode';
return (
<>
{/* <Scripts /> */}
<Head>
<title>{fields?.Title?.value?.toString() || 'Page'}</title>
<link rel="icon" href={`${publicUrl}/favicon.ico`} />
{/*Use new SEO fields here*/}
</Head>
