Easy way to add FB Open Graph or Twitter Card meta tags per page?

Design help Animations & Interactions
1

Is there an easy way to add FB Open Graph or Twitter Card meta tags per page?

2

The only way to add Facebook Open Graph and Twitter meta tags is to go to your custom code and add it in the <head> section. That’s what I did for our Interactions page and it worked great. Twitter tags fall back on open graph tags (the important ones). So something like this (with your content):

<meta property="og:title" content="Website Interactions Without Code" />
<meta property="og:description" content="No more messing around with jQuery code snippets. Design your own interactions and animations without writing a line of code using Webflow Responsive Website Builder." />
<meta property="og:site_name" content="Webflow" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://interactions.webflow.com/" />

<meta property="og:image" content="https://daks2k3a4ib2z.cloudfront.net/5317d67d660658b254000454/534e682e6360a96139000147_social-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

More information here:

4 Likes
3

Cool, thanks @thesergie !

5

Guys,

Sorry for re-open an old discussion, but again, the impossibility to handle custom code on Header sections per Page causes bad practices.

Implementing the Open Graph code as mentioned here will make that all social sharing from every page of the site to be related to the same page specified on the header. This is a very bad way to handle social networking shares…

One more reason to implement a way to add custom code on Header per Page!

:smile:

Best,

2 Likes
6

Bump for Guihnz’ idea! This would really make big changes to Webflow

7

Is there still no way to set custom code per page?

8

You can set costume code to any page. It is located in the setting of the page. Along with Open Graph settings for that page. :smile:

942Ă—984 207 KB

1 Like
9

YUUUUUUUUUUUUUUSSSSSSSSSSSSSSS!!! Thank you @AlexN :smiley:

10

Got to say you guys are kicking ass with these updates~

Probably want to do some announcement post with new features.

11

Hey guys, what the heck is open graph settings? #totalnewbie

12

Hi all, funnily enough this is an issue I have just begun experiencing.

I’ve put those OG meta tags in the custom header sections for the pages I want but I’m getting a funny result. I have the image URL I want to use and I’ve placed it in the meta tags but OG just ignores it and uses a different one that isn’t even present on my site. The image was in my asset library but I’ve removed it and its still appearing.

13

Hi @Godweeno, try using the FB debug tool, to refresh the scrape information on your pages. Could you also post the link that is misbehaving?

Cheers,
Dave

14

Thanks @cyberdave

I’ve been on the FB debug tool to try and refresh the scrape but no joy unfortunately.

The website link that contains the share button is as follows:
http://www.ninjaacademy.co.uk/blog-library/001-snow-camp

Not sure if thats the link you mean or not? :smile:

15

Any chance we can get a similar setup for Twitter Cards? Would make social media sharing so, so much easier! http://forum.webflow.com/t/twitter-card-fields/22520

16

They probably could add it to the UI. Untill then you can manually create them in the custom code section and add dynamic fields to populate the info.

That is what I did on the article pages for my website.
https://webflow.com/website/new-portfolio-ijc9xiuo