Want to share post in LinkedIn with post specific og:image

Question

I have angular 4 web application. Where I need to share some post to linked in with URL containing thumbnail preview.

What I did is: Am using the static meta infromation for index.html page & while navigating to another page, i am updating meta information. from that page i am sharing post to linkedin. Successfully able to share the url with og:image but the thumbnail preview contains og:image from main index.html.

Below is index.html meta information:

<meta name="title" property="og:title" content="Title Example">
<meta property="og:type" content="Article">
<meta name="image" property="og:image" content="[Image URL here]">
<meta name="description" property="og:description" content="Description Example">
<meta name="author" content="Example">

Below is code is to update meta information for Share.html

this.meta.updateTag({ prefix: 'og: http://ogp.me/ns#' , name: 'title', content: 'Title Example Badge'});
this.meta.addTag({ prefix: 'og: http://ogp.me/ns#' , name: 'description', content: 'Badge Description '});
this.meta.updateTag({ prefix: 'og: http://ogp.me/ns#' , property: 'og:image', content: this.imageURL, itemprop: 'image' });
this.meta.updateTag({ prefix: 'og: http://ogp.me/ns#' , property: 'og:image:type', content: 'image/png' });
this.meta.updateTag({ prefix: 'og: http://ogp.me/ns#' , property: 'og:url', content: this.routerUrl , itemprop: 'url' });

What I want is: I want to share the URL with updated meta information & og:image.

Are you doing any server-side rendering? If not, LinkedIn is probably only ever loading the index file, it won't load Angular and render your app. — jonrsharpe
I am using SSR but still not capturing the data by LinkedIn, any idea to resolve? — Pardeep Jain

HoldOffHunger HoldOffHunger · Accepted Answer · 2020-07-31T20:20:56

Your angular project has an index.html file like so...

<meta name="title" property="og:title" content="Title Example">

You will only be able have a custom share url title/image/description, etc., if you are dynamically rendering that data here, in your index.html file. So, for instance, if your URL is...

example.com?post=123456

Then you would want something like....

<meta name="title" property="og:title" content="Post #<?php print($post[id]); ?>">

To get a resultant index.html page like...

<meta name="title" property="og:title" content="Post #123456">

In that case, you will need to handle...

1 - Rendering the data with server-side processing.
2 - Appending ?entryid=... data to the URLs you are sharing through LinkedIn.

Want to share post in LinkedIn with post specific og:image

1 Answers