How to successfully implement og:image for LinkedIn

facebook-opengraph, html, linkedin-api, share

Solution

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.

Problem

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: - 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)? - Can an image be too large? - Should I use the xmlns, should I not use xmlns or it doesn't matter? - 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~

Original source