Adding OG Tags to Page header

As request @emmanuel

We are now able to add page thing data to the header

That will enable sharing of individual pages to Facebook etc, rather than the whole site.

However, this does not work as the dynamic tags are not being picked up, as the page has a canonical page set in the header further up.

If you look at the page source …

You will see duplicate meta tags…

<meta property="og:url" content="https://forumapp3.bubbleapps.io" />
<meta property="og:type" content="website" />

<snip>

<meta property="og:title" content="Lemon" />
<meta property="og:url" content="https://forumapp3.bubbleapps.io/version-test/socialshare" />
</head>

Facebook therefore seems to scrape the first URL, not the one I have specified. So my dynamic title is never picked up.

1 Like

Most of the time tags are being evaluated to the last item, but if Facebook is doing things differently, you should remove the previous one. There is nothing we can really do on the Bubble side to avoid that.

Remove from the settings page ?

The top one isn’t set at page level.

I think I read somewhere the tags coming later usually win, but i’m happy to be proven wrong if you saw otherwise.

Ah, ok will check.

@NigelG did you get this work?
I can’t get my head around it

No, for whatever reason it picks up the top level page URL.

Which isn’t what is needed.

Could bubble give us the option to remove the site tags ?

Well just delete the things in the settings panel.

1 Like

The <meta property="og:url" content="https://forumapp3.bubbleapps.io"> setting isn’t in the panel. It must be set by you.

So I can’t delete it !

Would really appreciate you looking at this @emmanuel

If og:url is set, then Facebook will ignore all the other tags and scrape the content URL.

Okay then i’ll move the custom header up so that it shows up before.

Thanks.

It’s live now

Thanks. That is now picking up the URL higher up.

But now realise that I don’t have access to the page URL. Would that be possible along with current page thing and current user ?

Well we do that automatically, so why do you need to do it?

I need to pass the page URL to Facebook in the OG tag.

So the actual URL that includes the thing, otherwise there is no current page thing … and I just get “Loren Ipsum” when Facebook scrapes the page.

I can probably use the slug method I have tried before but it is a making it quite complicated.

The issue is with that canonical URL in the OG tag. Without that you can could share a page and the tags.

But conversely if you “like” something you don’t want it at page level … you want all likes grouped at the top level

If that makes sense ?

So if I can use page URL in the tags … that would be great, but may be able to work around.

Well it sounds like we should fix this and have the page thing’s id in the URL then. I’ll push that.

If I could access that in the header for the page, that would be fine.

Well i’ll push the right URL first, sounds like a bigger win for everyone, and then we’ll see.

3 Likes

Right, that works very nicely !

Just to recap …

Now when you share a page’s URL, you share the actual page you are on, not the “site” - so if someone clicks your link then go to the page that was shared. This will pick up the page tags of that page.

If you want to share “your site” - so people clicking on the share will go to the index page not the page the sharer was on … you can just put the top level URL into the share, and it will pick up tags from the top level (or default the images).

Nice.

Anyone else what to have a test ?

2 Likes