Page Types, Templates and Custom Fields

Use page meta data

Use page meta data for SEO, social sharing, structured data, and bind visual components directly to title, description, and meta image.

Estimated time: 6 minRaw Markdown

In this how-to, you'll learn how page meta data works in React Bricks and how to use it for SEO and social sharing.

Each page in React Bricks includes a meta property.

In the Page type definition, it is defined as:

type Page = {
  // ...
  meta: IMeta
  // ...
}

So meta data belongs to the page itself, just like custom fields belong to the page.

What page meta data is used for

Page meta data is used for the information that should end up in the page <head> and in social previews.

With the React Bricks SEO module, editors can manage:

SEO meta data
Open Graph data
Twitter Card data
structured schema.org JSON-LD data

Docs reference: SEO Module

This is useful because the content editors can manage SEO information directly in React Bricks without hardcoding it in the frontend.

Render meta data on the frontend

Once editors set the page meta data, the frontend project needs to render it in the page header.

For non-RSC projects, React Bricks provides these helpers:

renderMetaData
renderJsonLd

They render the meta tags and the structured JSON-LD data.

A simplified example looks like this:

import { renderJsonLd, renderMetaData } from 'react-bricks/frontend'
 
export default function PageHead({ page }: { page: types.Page }) {
  return (
    <>
      {renderMetaData(page.meta)}
      {renderJsonLd(page.meta)}
    </>
  )
}

With Next.js and the App Router, the recommended approach is different.

Instead of rendering meta tags directly, you use:

getMetaData to convert page.meta into the correct Next.js metadata object shape
the <JsonLd page={page} /> component to render structured data

A simplified App Router example looks like this:

import { JsonLd, getMetaData, types } from 'react-bricks/rsc'
 
export async function generateMetadata({ page }: { page: types.Page }) {
  return getMetaData(page.meta)
}
 
export default function Page({ page }: { page: types.Page }) {
  return (
    <>
      <JsonLd page={page} />
      {/* page content */}
    </>
  )
}

So the editorial data entered in React Bricks becomes real Next.js metadata and structured data on the frontend.

Bind text components to page meta data

A very useful feature is that Text components can be bound directly to page meta fields.

Docs reference: Bind to meta data or custom fields

This means a visual field in a brick can edit a page meta value such as the title or description.

For example:

import { Text, types } from 'react-bricks/frontend'
 
interface HeroProps {
  title: types.TextValue
  description: types.TextValue
}
 
const Hero: types.Brick<HeroProps> = ({ title, description }) => {
  return (
    <section>
      <Text
        value={title}
        metaFieldName="title"
        placeholder="Page title..."
        renderBlock={({ children }) => <h1>{children}</h1>}
      />
 
      <Text
        value={description}
        metaFieldName="description"
        placeholder="Page description..."
        renderBlock={({ children }) => <p>{children}</p>}
      />
    </section>
  )
}

In this example, the visual text fields are bound to the page meta title and description.

So when the editor updates the text in the content, they are also updating the page meta data.

This creates a very nice workflow when the visible hero content should match the SEO title and description.

Bind an image component to the meta image

The same idea also works for images.

Docs reference: Image: bind to Meta data or Custom fields

The Image component can bind to the page meta image using metaFieldName.

Example:

import { Image, types } from 'react-bricks/frontend'
 
interface HeroImageProps {
  coverImage: types.IImageSource
}
 
const HeroImage: types.Brick<HeroImageProps> = ({ coverImage }) => {
  return (
    <Image
      source={coverImage}
      alt="Hero image"
      metaFieldName="image"
      aspectRatio={1.91}
      maxWidth={1200}
    />
  )
}

In this case, the editable image is bound to the page meta image.

That is useful when the same image should be used both:

visually in the page content
as the social sharing and SEO image

Why this binding is useful

Binding visual components to page meta data creates a two-way connection between what editors see in the content and what is stored in the page meta fields.

This helps avoid duplication and keeps content aligned.

For example:

the visible page title can stay in sync with the SEO title
the visible intro text can stay in sync with the meta description
the hero image can also become the Open Graph image

This is often better than asking editors to type the same content twice.

When to use meta data vs custom fields

Meta data and custom fields are both page-level data, but they serve different purposes.

Use meta data for:

SEO title and description
Open Graph and Twitter Card information
the page social preview image
structured data for search engines

Use custom fields for:

structured business data that is specific to your project
values used by bricks but not meant for the page header
product IDs, prices, labels, or other page-level application data

So, if the value is primarily about SEO, sharing, or search engines, it usually belongs in meta.

If it is business or content model data for your application, it usually belongs in customFields.