Cool sharing pages on social networks using Open Graph

I decided to put together in one article a short recipe for cooking a page that rummaged around on all the main social networks. Those who are not in the subject at all will have to first read about the Open Graph protocol .

For Facebook, VKontakte, Odnoklassniki and Googleplus:

<meta property="og:type" content="website"> <meta property="og:site_name" content=" "> <meta property="og:title" content=""> <meta property="og:description" content="."> <meta property="og:url" content="http://example.com/page.html"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="http://example.com/img.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> 

For Twitter and VKontakte (VKontakte will select the title for the title, which will be located in the code below):

 <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content=""> <meta name="twitter:description" content="."> <meta name="twitter:image:src" content="http://example.com/img.jpg"> <meta name="twitter:url" content="http://example.com/page.html"> <meta name="twitter:domain" content="example.com"> <meta name="twitter:site" content="@"> <meta name="twitter:creator" content="@..."> 

GooglePlus normally picks up Open Graph, so you no longer need to add special tags for it:

 <!-- <meta itemprop="name" content=""> <meta itemprop="description" content=""> <meta itemprop="image" content=""> --> 

Choosing a picture of the right size is the main problem. Even within the same social network there are scenarios in which images are shamelessly sprinkled. I used to use a special template to figure out how to frame an image and guaranteed not to lose the main thing.


')
And then I just spied on how to do on an elephant.



Yes, 968 × 504 pixels are less than the minimum 1200 × 630 recommended by Facebook. But at this size and ratio the picture is not sprinkled anywhere, and it looks great.

By the way, the social network caches your page, and it drives you crazy while debugging, until you learn how to reset the cache: VK pages.clearCache , Facebook Open Graph Object Debugger .

Tell us about other subtleties of technology in the comments? Good sharing.