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

Technical Questions CMS
1

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?

3

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:

5

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
6

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

E.g.


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 -->
7

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

8

@steve the meta tag functionality has been working smoothly, but we’re running into an issue where some unrelated tracking / pixel code in the <head> stops working properly on pages where we use this feature (i.e. we noticed Google Analytics and our Snap pixel breaks).

More specifically, any page for us that ends with “/news” for us doesn’t appear in Google analytics (in addition to other pixel and tracking-related issues). On the contrary, pages that end in “/candy” for us (which are dynamic URLs, but don’t use the meta tag feature) work just fine.

After digging into it, we noticed that some random parts of the head HTML seem to be changing.

Here are a few examples:

"/news" page where tracking breaks

image
image721×268 23.4 KB

normal page where tracking works

image
image744×255 22.1 KB

/news page where tracking breaks

image
image888×747 59.9 KB

normal page where tracking works

image
image889×728 59.7 KB

9

Hey John,

Thanks for the detailed response and screenshots! I know we already connected via slack, but wanted to post here as well.

We’ve found a bug with our HTML parsing that can cause this to happen, but you can get around it in the meantime by having one space between opening and closing tag. Let me know if you have any questions!

1 Like
10

Is there a way to specify the favicon? state.metaTags.favicon doesn’t seem to do anything. Nor does state.links = [ { rel: 'icon', url: '…' } ]

12

Hi @jamesarosen , for adding custom html to the head of a hosted page, use state.customHeadHtml, for example your favicon can be added by adding

state.customHeadHtml = `<link rel="icon" type="image/png" href="..." />`

Where href is the link to your favicon image, you can upload images and get an instant cdn link on builder.io/upload , then copy the link and add it to the href attribute in the example above.

1 Like
13

It looks like there’s a small bug in state.customHeadHtml when used in combination with state.metaTags: it renders <html><head> before the content, but we’re already in the <head>. The <meta> tags end up in the <body>.
builder-head-html

14

I see the issue, thanks for reporting @jamesarosen, we’re working on a fix to that API, will let you know once it’s released.

15

Custom head html fix went to production today, sorry you ran into this issue, it should be resolved now. @jamesarosen

16

Where would this code go exactly?

17

This is in your content js code section in the data tab ( all the way down)

Screen Shot 2021-05-18 at 12.31.08 PM
Screen Shot 2021-05-18 at 12.31.08 PM462×871 23.8 KB

Press Edit content js + css
Then add your custom code in the js section
Screen Shot 2021-05-18 at 12.31.56 PM
Screen Shot 2021-05-18 at 12.31.56 PM1332×536 52.1 KB

1 Like