---
title: Use page meta data
category: Page Types, Templates and Custom Fields
order: 4
status: published
summary: Use page meta data for SEO, social sharing, structured data, and bind visual components directly to title, description, and meta image.
estimatedTime: 6 min
keywords: page meta data seo opengraph twitter jsonld schema.org rendermeta renderjsonld metafieldname
---
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:
```tsx
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 `` 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](https://docs.reactbricks.com/cms-features/seo/)
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:
```tsx {6-7}
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 `` component to render structured data
A simplified App Router example looks like this:
```tsx {3,8,14}
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 (
<>
{/* 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](https://docs.reactbricks.com/api-reference/visual-components/text/#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:
```tsx {13,20}
import { Text, types } from 'react-bricks/frontend'
interface HeroProps {
title: types.TextValue
description: types.TextValue
}
const Hero: types.Brick = ({ title, description }) => {
return (
{children}
}
/>
{children}
}
/>
)
}
```
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](https://docs.reactbricks.com/api-reference/visual-components/image/#bind-to-meta-data-or-custom-fields)
The `Image` component can bind to the page meta image using `metaFieldName`.
Example:
```tsx {12}
import { Image, types } from 'react-bricks/frontend'
interface HeroImageProps {
coverImage: types.IImageSource
}
const HeroImage: types.Brick = ({ coverImage }) => {
return (
)
}
```
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`.