Open Graph and Meta Tags in Headlless SXA using JSS and NextJS

Enhancing the Headless SXA Site

Overview

There is always remaining tasks you have to do in order to finalize a website. Out of this series I'd like to share my simple Meta Tag and Open Graph implementation in XM Cloud using Headless SXA, JSS and NextJs.

Enhance App Route Template
Add output to the layout file

Enhance App Route Template

Similar to the way it has been implemented with SXA I'm creating 2 base templates within the feature folder that I will inherit to my App Route Template later. This way I keep my template structure modular. In case of tenancy solutions I would be able to reuse the same templates. Also I separate what gets generated by SXA from the custom functionalities.

Meta Tags

For Meta Tags I'm adding MetaKeywords field as Singleline Text and MetaDescription as a Multiline Textfield.

Meta Template

OpenGraph

For OpenGraph Tags I'm adding:

OgTitle field as Singleline Text
OgDescription as a Multiline Textfield
OgImage as Image field using the source query:$siteMedia
OgType as Singleline Text

og Template

Adding Base Templates to the App_Route Template

I want to make sure that every page can have its own Meta Tags and Open Graph Tags. Therefore I'm adding my newly created Base Templates to the App Route Template that was generated for me in Templates/Project/Sugcon during Tenant Creation.

Add Base Templates

The fields should now appear in each App Route Item.

Add ouptut to the layout file

But of course they also need to be put out. This can be done defining a placeholder in the head section of the layout.tsx file and adding components later to it (e.g. via Meta Partial Design) or simplified, as I have done it, just statically baked into the layout.tsx. This depends on your requirements.

Layout Tsx

I can read the fields of the page from route.fields by name of the field.

Also I'm wrapping a check around the output to make sure that the field is available and has a value.

{route?.fields?.MetaDescription?.value
          ? <meta name="description" content={`${route?.fields?.MetaDescription?.value}`}/
        : ''}

Make sure that you import the Head from next/head:

import Head from 'next/head';

As Image.value returns an Object (referenced Item) I need to use the src field of my Image Object.

Created: 7.10.2022

XM Cloud NextJs JSS SXA Headless SXA