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:

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~

回答1:

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.

回答2:

I found this simple fix which worked for me after lots of complicated solutions which didn't work:

LinkedIn

The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.

This is done by adding a made-up parameter to the link. It doesn’t affect your webpage, but it does force the metadata to be re-fetched.

Example:

Original link: //beantin.se/consultant-resume "New" link: //beantin.se/consultant-resume?1

回答3:

I was having the same issue last night. Spent hours researching solutions and I tried the solutions recommended by others in this post but to no avail. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this actually worked.

All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what code to include, what is missing, and how to fix it.

Here is the website to use Post Inspector:

https://www.linkedin.com/post-inspector/

回答4:

LinkedIn is also caching previews. If OpenGraph image was incorrectly cached at some point before, try defeating the cache with a query parameter on a shared link, e.g. https://your-website.com/?1.

回答5:

This may be a bit late for the OP, but there is new documentation at https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin. Hopefully this helps others.

回答6:

If @Kym's answer works for you, and you don't want to have a fake URL parameter in your LinkedIn links, a simple solution is just to sign out and then sign back in.

*Writing my own answer since I don't have enough rep to comment on theirs

回答7:

I ran into this recently, spent a huge amount of time working on it with all the types of solutions above. I was working with someone else's HTML and finally figured out that the html was simply missing the head tag, while it did have the closing tag for head.

Linked In is apparently not scanning page text for the og tags, but processing the page dom, and if the dom objects aren't properly coded, they won't process. If you have issues with unmatched tags or unclosed tags, this could be your issue if everything else is not working.

I did not need to add prefix to the meta tags or add og image height and width tags once the html was fixed. Linked In processed it fine once the html was fixed.

回答8:

I spent whole day implementing it. My main criteria was to do it for all my posts without touching even a single post in Wordpress.

LinkedIn solution didn't work. Also LinkedIn caches the images for 7 days and if you changed the image, you are not able to look at refreshed image. So these were the constraints and I was able to implement it using some PHP, Javascript and using dummy parameter to refresh LinkedIn cache. Here's the solution

回答9:

For me solution was to put all the <meta> tags (without prefix) inside <head> tag.

For other social networks like Facebook, Twitter or Google you don't even need to have <head> tag. (because it it optional in HTML5 specs)

PS. There is a new nice way for testing <meta> tags on your website: https://metatags.io/

回答10:

In my case I did exactly this and it worked fine (on my page of course).

Put these four lines in the head:

<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">

BUT, pay attention that if you have more than one head in your page, these lines need to be inserted in the first head otherwise it will not work.

I also had prefix="og: http://ogp.me/ns#” in the html

回答11:

After researching for a day, I found that meta tag with attribute property should be used instead of name.

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

Ref: https://ogp.me/

来源：https://stackoverflow.com/questions/10042786/how-to-successfully-implement-ogimage-for-the-linkedin

标签

html

opengraph