Correcting Rich Objects in LinkedIn Social Sharing Graphs using the Open Graph Protocol

Marketing & Content Hub Social Tools
1

When I post a link to a page hosted within my COS in LinkedIn the Rich Object crops the image on the page oddly. It uses the middle third of the image.

I “should” be able to use the Open Graph Protocol to force the Rich Object to use a different image of my choosing that is already cropped and sized for sharing links in LinkedIn, but thus far, this has not worked. I added meta tags in page head to “force” the page to use a different image, but to no avail.

I followed the instructions in this article:

It’s an older article, but the principles should still apply. However, my Rich Object in LinkedIn still doesn’t pull the image I’ve specified in my meta tag in the head. It still pulls the image from the page instead and crops it.

According to LinkedIn’s own documentation, the meta tags should work.

https://developer.linkedin.com/docs/share-on-linkedin#

I’ve even tried to use the full image meta tags referenced by the Open Graph protocol page with no more success:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

You can see the Open Graph Protocol here:

I did notice that at the bottom of the LinkedIn page above, it notes that Open Graph content is cached for 7 days. It could be that linked in is still using the “first” version of my page (that didn’t have the new image meta tag) and won’t update that until 7 days pass.

One last note, in addition to using the correct image, how do I also make the image clickable and point to the page link?

Thanks for bearing with me. Any help appreciated!

2

Hey @CWBourque did you notice any difference after time passed and LinkedIn was re-crawled?

As far as making objects clickable/hyperlinked, this is not a feature HubSpot is able to set/control in Linkedin.

3

Thanks for checking in on this one. No, I did not see a change when I tested this today (8 days after originally testing). I did, however, do one additional test where I submitted a brand new link and that DID work.

I’m not sure how long LinkedIN keeps the cached version as of now, but it appears that if you specify the image you want to display before the first time you share in LinkedIN, it WILL grab the specified image you wanted and not the default.

So, the solution to this dilemma is if you know you want to share articles on LinkedIN, but aren’t confident about the default image in your shared content, it’s best to specify a file you’ve optimized.

I still need to figure out how to make the image the larger version vs the mini, but specifying the image you want to see by defining it in the Open Graph Protocol “before” you ever post the link to LinkedIN the first time seems to be a step in the right direction.

4

I just wasted a bunch of time on this yesterday and thought I’d pass along what we learned.

Like you, I assumed that if I shared a Hubspot landing page URL on LinkedIn it would “behave” properly, but watched in horror as LinkedIn randomly took the upper right corner of my beautiful landing page, stretched it, and presented that as my social sharing image. I then uploaded the link and replaced it with a new image within the LI post, but clicking that image just makes it bigger in your image viewer, and the viewer would have to close that window and then click the URL to view the page. Ick.

We contacted Hubspot support but they didnt know about Open Graph and suggested that we contact LinkedIn for support. Nope.

Our web engineer was unfamiliar with Hubspot but newly familiar with Open Graph, and after playing around a bit, came up with two suggestions that worked:

1. Trick the Hubspot page into doing the right thing on LinkedIn:

* Upload the thumbnail image you want to see in the post itself to Hubspot. Grab the public URL (not the one starting with CDN), and copy it to the clipboard.

* Open the landing page you plan to post to LinkedIn. Go into edit mode, and select Settings. Scroll down to the Advanced Options/Page Settings where you can click on “Edit Head HTML.” Add this one line of code to that window:
<meta property=“og:image” content=“INSERTYOURPUBLICHUBSPOTURLFORTHEIMAGEYOUWANTTODISPLAYHERE”>

* Save and update the page.

2. Trick LinkedIn into thinking you’re sharing a fresh page by giving it a new URL. I didn’t want to change the URL of my page because I’d published it in various messages etc, so I created a bitly link, then pasted that into my LinkedIn post. If you give it a second, you’ll see your awesome image come up with the text you want to see (remember that the Page Title and Meta Description on the Edit/Settings page for your landing page are pulled into LinkedIn). If you don’t want to display the bitly URL (or original URL) on the LinkedIn post, you can now delete it and add whatever text you want to include in your post. When you hit Post in LinkedIn, your awesome image will be there and will link through to your Hubspot landing page.

Lastly, you can test how stuff works on FB’s debugger. LinkedIn uses FB’s version of Open Graph.

Happy sharing,
Steph

5

Thank you, Steph!

Ultimately I did the same thing you did. I am adding Open Graph specifications in the Advanced Options under Edit HTML Head.

<meta property=“og:image” content=“url-of-your-image-from-your-domain” />
<meta property=“og:image:type” content=“image/jpeg” />
<meta property=“og:image:width” content=“700” />
<meta property=“og:image:height” content=“350” />

I opted for the 700x350 size in most cases because LinkedIn was the social network where most of my landing pages were posted. It defaults the shared image to 350px wide and a 2:1 ratio seemed to work well there. Depending on what social networks you use most, there are different sizes recommended all over the web, but a horizontal image that is twice as wide as it is tall works reasonably well.

You are right about “tricking” LinkedIn with a different URL for the same page. The caching stumped me until I read deeper into their policies on it. You can also add a variable to the same URL, but the bit.ly is a creative solution. I like that idea.

Adding a variable would look like:

http://www.yourdomain.com/?2

Don’t worry. Adding the bogus variable won’t affect your web page, but it does force LinkedIn to reload the meta data. Here’s more info on that.

https://support.strikingly.com/hc/en-us/articles/214364928-LinkedIn-or-Facebook-Share-Image-Not-Updating

Thank you for sharing the debugging tool. That’s very helpful!

6

Thanks @CWBourque! The tips on sizing the image in particular are super massively helpful, thank you!