Getting Started with the Open Graph Protocol

Learn all about the Open Graph protocol and how to use it to make your sites display rich content when customers and users share your links!
GitHub Repo: github.com/cov...
Don't forget to like this video and subscribe to our channel - we're publishing more videos and walkthroughs every week. Comment below and let us know what you'd like to see next!
Join the Covalence community: covalence.io
Shop Covalence merch: covalence.merc...

[@It_guy613]

it is very interesting to know that different social medias display different informations... great video!

[@ARBeatz]

Question: code validation says I shouldn’t have the trailing slash at the end of the tag. What’s your thoughts on this?

[@covalence-io]

It doesn't really matter. The slash vs no slash is leftover from the xhtml days. I tend to like it personally, but you can go ahead and remove it if you don't. Either way the browser should treat it the same as far as I know

[@ARBeatz]

Thanks

[@induwaraperera5401]

Thanks for the video

[@DayaDash-l5h]

Hi Thanks for this - Very useful - I have a requirement where I want to show a dynamic og:description - It needs to have an Amount field - For Example - Bank A wants to send you £10. Or Bank A wants to send you £30 .. How to get the dynamic amount field ?

[@covalence-io]

If you have a custom site, you should be rendering the page your serving to your client with the value you need. If it's not a custom site, and is more like a squarespace or wordpress site, this is more difficult. The easiest way to do something like what you're talking about would be to use something like Google Tag Manager that would let you inject a custom script into your page to select your og:description element and change it based on a data layer variable. The way your changing your value would depend a lot on where that value is coming from.

[@zackOverflow]

Thumbs-up, man. Can I make the URL dynamic?

[@covalence-io]

Anything on the webpage can be dynamic as long as you have control over the server that's serving the files. If so, I'd check out a rendering engine like ejs for passing in variables

[@zackOverflow]

Awesome

[@achrefwazzen8926]

How to do that to every bloog articel ??
Now when i post my articels to Fb they all have the same image and titel 😅

[@covalence-io]

So you need to be able to dynamically set those properties for each blog page... if you're in control of your server, you can modify those properties before serving the page. If you're using something like wordpress or squarespace, you'll need to most likely use a plugin or write some custom code to achieve this.

[@eyadjafar1772]

is this work on local host if i use laravel

[@covalence-io]

The open graph protocol is a standard so it'll work regardless of the language or framework you're using as long as it's valid HTML that's being served... that being said, if you're testing this on localhost then an application like Facebook or Twitter is not going to be able to access the data when you do something like paste the link. The only way to make it work locally would be to use something like localtunnel so that there is a public URL that can be used.

[@oudom9629]

How can i hide og:title

[@covalence-io]

Unfortunately, as far as I know there is no way to tell FB, or any other service that uses open graph, how to format the information they display... so I do not believe they let you hide it

[@It_guy613]

Why would you wanna do that

[@covalence-io]

@@It_guy613 I'm assuming it's just an aesthetic preference... for instance, they may have a graphic that has the title in it already... so displaying the title would be redundant