想要在LinkedIn中分享帖子特定的og：image答案

【问题标题】：Want to share post in LinkedIn with post specific og:image想要在LinkedIn中分享帖子特定的og：image
【发布时间】：2019-09-12 17:48:54
【问题描述】：

我有 Angular 4 Web 应用程序。我需要分享一些帖子以链接到包含缩略图预览的 URL。

我所做的是： 我正在为 index.html 页面使用静态元信息，并且在导航到另一个页面时，我正在更新元信息。从那个页面我分享帖子到linkedin。成功与 og:image 共享 url，但缩略图预览包含主 index.html 中的 og:image。

以下是 index.html 元信息：

<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">

下面是更新 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' });

我想要的是： 我想与更新的元信息和 og:image 共享 URL。

【问题讨论】：

你在做任何服务器端渲染吗？如果没有，LinkedIn 可能只会加载索引文件，它不会加载 Angular 并呈现您的应用程序。
我正在使用 SSR，但仍无法通过 LinkedIn 捕获数据，有什么解决办法吗？

标签： angular share linkedin meta-tags

【解决方案1】：

您的 Angular 项目有一个像这样的 index.html 文件...

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

如果您在 index.html 文件中动态呈现该数据，您将只能拥有自定义共享 URL 标题/图像/描述等。因此，例如，如果您的网址是...

example.com?post=123456

那么你会想要类似......

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

要得到一个结果 index.html 页面，如...

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

在这种情况下，您将需要处理...

1 - 使用服务器端处理呈现数据。
2 - 将 ?entryid=... 数据附加到您通过 LinkedIn 共享的 URL。

【讨论】：