Understanding Of Real Example Open Graph Protocol

- 1 answer

On the open graph home page it shows the following : As an example, the following is the Open Graph protocol markup for The Rock

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />

Now certain services, like twitter and facebook, can use this information within their own site when linking to the url? Trying to get the terminology correct as well. Any links to open servces (edu) of og markup in web page and its use on another site appreciated.



OG Protocol is useful for Facebook only, not Twitter, which needs it's own tags for Twitter Cards.

For Facebook, your tags must be complete, like this block:

<meta property="fb:app_id" content="ENTER YOUR APP ID"/>
<meta property="fb:admins" content="ENTER YOUR PERSONAL ID"/>
<meta property="og:site_name" content="ENTER SITE NAME" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ENTER SITE TITLE"/>
<meta property="og:description" content="ENTER SITE DESCRIPTION"/>
<meta property="og:url" content="ENTER SITE URL" />
<meta property="og:image" content="ENTER IMG URL" />
<meta property="og:image:type" content="image/png" /> <!-- enter IMG extension -->
<meta property="og:image:width" content="1200" /> <!-- enter IMG width, in px -->
<meta property="og:image:height" content="630" /> <!-- enter IMG height, in px -->

Images for big facebook cards should be 1200px x 630px and to small, 600 x 315 px, so they will fit perfectly on the screen. You can check it here.

For facebook, it's also recommended that you add this to the <head>:

<head prefix="og:>

Here you'll find a guide for best practices when sharing website content on Facebook. Here you'll find a full guide for OG Protocol and here you can find the Facebook Debugger Tool for OG Protocol.

Now, for Twitter, you will have to add its own tags, like that:

<meta name="twitter:card" content="summary_large_image"> <!-- there are other card types you can choose --> 
<meta name="twitter:site" content="@YOUR_USERNAME">
<meta name="twitter:creator" content="@YOUR_USERNAME"> <!-- or author's name, if that is the case -->
<meta name="twitter:title" content="ENTER THE WEBSITE TITLE">
<meta name="twitter:description" content="ENTER THE WEBSITE DESCRIPTION">
<meta name="twitter:image" content="ENTER THE IMG URL"> 

You can find all Twitter Cards documentation here and the testing tool here

You can see working examples in this blog (Facebook & Twitter) and in this site (Facebook only).

Finally, to understand what those things do exactly, share these sites I provided you the links and you will see how the sharing posts look like on Facebook. If you don't want to share them publicly, restrict the post for yourself only, so you don't need to explain to your friends why are you sharing these contents! For Twitter, you can give a look at my own feed so you'll see some cards there.

Hope to have helped!