Home App Docs Github

How to pull page fields and Open Graph content from a model?

Hey team, how can I have a Builder page pull its “Page fields” (e.g. SEO page title / description) and its Open Graph Tags dynamically from a custom model in Builder?

We built a model (called Stories) that allows us to publish individual news stories. I’m trying to create an article page that references this model.

Here’s the page in builder: https://builder.io/content/7358745c5aa6494da0bb79a7395c6aea
Here’s the Story model in builder: https://builder.io/models/74d0f168c1b641d19941ac54e5d259ca
Here’s an example of a public page producing a Story: https://thenewpaper.co/story/f67258133c154157b05d47cae83acf77

Note: this is related to a separate forum post: How to pull a custom URL slug / permalink from a model?

Hi John! Thanks for reaching out.

For pages hosted by Builder, pulling page fields and open graph content dynamically is unfortunately not currently available. Happy to pass this note to our team to get this into our roadmap at some point.

If you are hosting Builder content yourself (e.g. with React), you can do this as described here.

If you have any other questions, feel free to reach back out :grin:

Hi Maddy, thanks for the response!

The pages are indeed hosted by Builder. So, adding this to the roadmap would be great.

We need it so our articles can appear with the appropriate context. For example, the link preview in messaging apps or sharing on social media.

I looked into a few possible workarounds, but unfortunately couldn’t find something that would work.

1 Like

Fresh off the press - this is now possible with Builder hosted sites too.

In your custom JS code you can create a metaTags object and put any meta tag name and values on there, and they will show up on your page rendered by Builder in the


state.metaTags = {}

state.metaTags['og:title'] = 'My dynamic title'
state.metaTags.description = 'My dynamic description'
state.metaTags.title = 'My dynamic page title'
state.metaTags['twitter:card'] = 'Summary'

becomes (in the <head> of your page):

<title>My dynamic title</title>
<meta name="description" content="My dynamic description">
<meta name="og:title" content="My dynamic title">
<!-- etc -->

This is perfect and exactly what we needed! Gave it a spin and looks like everything is working smoothly.