Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to successfully implement og:image for the LinkedIn

THE PROBLEM:

  • I am trying, without much success, to implement open graph image on site: http://www.guarenty-group.com/cz/
  • The homepage is completeply bypassing the og:image tag, where internal pages are reading all images from the site and place og:image as the last option.
  • Other social networks are working fine on both internal pages and homepage.

THE CONFIGURATION:

  • I have no share buttons or alike, all I want is to be able to share the link via my profile.
  • The image is well over 300x300px: http://guarenty-group.com/img/gg_seal.png
  • Here is how my head tag looks like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <title>Guarenty Group : Pojištění pro nájemce a pronajímatelé</title>          <meta name="keywords" content="" />         <meta name="description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání." />         <meta name="image_src" content="http://guarenty-group.com/img/gg_seal.png" />         <meta name="image_url" content="http://guarenty-group.com/img/gg_seal.png" />          <meta property="og:title" content="Pojištění pro nájemce a pronajímatelé" />         <meta property="og:url" content="http://guarenty-group.com/cz/" />         <meta property="og:image" content="http://guarenty-group.com/img/gg_seal.png" />         <meta property="og:description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání [...]" />         ... </head> 

THE TESTING RESULTS:

In order to trick the cache i have tested the site with http://www.guarenty-group.com/cz/?try=N, where I have changed the N every time. The strange thing is that images found for different value of N is different. Sometimes there is no image, sometimes there is 1, 2 or 3 images, but each time there is a different set of images. But, in any case I could not find the image specified in the og:graph!


MY QUESTIONS:

  1. https://developer.linkedin.com/documents/setting-display-tags-shares is saying one thing, and the personnel on the support forum is saying "over 300" Does anyone know What is the official minimum dimension of the image (both w and h)?
  2. Can an image be too large?
  3. Should I use the xmlns, should I not use xmlns or it doesn't matter?
  4. What are the maximum (and minimum) lengths for og:title and og:description tags?

Any other suggestion is of course welcomed :)

Thanks in advance, cheers~

like image 306
Sabo Avatar asked Apr 06 '12 11:04

Sabo


People also ask

Where do I put the OG image?

You can set a custom og:image on a page by page basis. Just go to Page Settings > Social Image > Upload. If you need to add other OG tags and customize the default settings, go to Page Settings > Advanced > Page Header Code Injection. Read the following section on adding the tags manually and copy-paste the code there.

Does LinkedIn use open graph?

LinkedIn uses something called Open Graph meta tags to get the data pertaining to the image, title, and description of your link. These are what you could debug using the free tool Post Inspector.

What size should Og image be?

The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.


1 Answers

This answer I found on LinkedIn forums might be of help to you:

Guys, I've spent a whole day trying different things. What worked for me is using the mata [sic] tags as following:

<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:type" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:image" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:url" content="{Your content}" /> 

Just try to add prefix to every tag (not to html tag), then re-sign in with your LI account to clear the cache... Post your results.

like image 121
GothamCityRises Avatar answered Sep 22 '22 06:09

GothamCityRises