领英无法识别og:image图片

Question

领英无法识别og:image图片

linkedin-apifacebook-opengraphmeta

26

我在我的一个网站上使用 Open Graph 来丰富从网站分享的帖子。但是 LinkedIn 没有选择 og:image 指定的图片。这个图片被一个简单的 PHP 脚本修改为适合 LinkedIn bot 的 200px X 200px。

我发现一些人遇到了类似的问题 (Linkedin not getting thumbnail image)，但这个问题尚未解决。

- Rik Morskate

也许如果您提供了您网站的URL，我们就可以获得更深入的了解？ - symcbean

抱歉，完全忘记了一个链接：http://personato.nl/vacatures/logistiek/details/logistiek/operations-manager-vas-seacon-logistics-brand-loyalty/PEML15959 - Rik Morskate

尝试按照您发布的链接中描述的解决方案进行操作（您的HTML中有很多错误）。 - symcbean

1

我看到你成功地做到了这一点。我现在也遇到了同样的问题... 你是怎么解决的？ - Golyo

1

我已经通过将所有的<meta>标签放在<head>标签内来解决了这个问题。请参考这个答案。 - Ivan Aracki

12个回答

7

你可能需要检查LinkedIn帖子缓存并刷新特定链接。

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

- Numan Karaaslan

1

这完全解决了它。应该是被接受的答案。 - Joshua Wilkinson

5

我在WordPress网站中使用LinkedIn时，遇到了错误的图像选择问题。通过LinkedIn职位检查器发现URL后，发现尽管存在og:image标签，但仍然使用了oEmbed标签。请注意保留HTML标签。

- Seraphinite Solutions

你是怎么修复的？ - denislexic

@denislexic 我正在使用RankMath。 - Seraphinite Solutions

5

这个问题有点旧，但我也遇到了同样的情况，并找到了解决方案（或者说是我的理解如何解决它），为了帮助其他遇到同样问题的人，我在这里发布我的解决方案。

（感谢@Justin Kominar，在这个问题中的回答帮助了我。）

确保在您的标签中设置了prefix="og: http://ogp.me/ns#，当您有iframe时，请确保哪个页面调用了分享功能。
确保在您的网站中设置了所有四个<meta>标签，并将正确的类型给<meta property="og:type>（请访问ogp.me获取更多信息）。
确保将正确的网址（您要分享的那个网址，例如https://news.com/this_news）传递给<meta property="og:url>，特别是当您使用动态网址时。
在您传递给og:url的页面上（重要的是要理解linkedin会去该页面查找信息而不是您调用分享功能的页面，大多数情况下它们是相同的，但有时并非如此），您需要完成步骤1和2，并设置<meta og:image>，并确保图像链接有效且图像确实存在。

希望这能帮到您。

- Baoyun Chen

1

如果在第3页中，被共享的页面和od:url内容属性值相同，有什么需要考虑的吗？我已经尝试了带前缀和不带前缀的方式，但它并没有获取到图片。Twitter、Telegram、WhatsApp可以正常工作，但LinkedIn不能。甚至将我的页面标签与Medium页面进行比较，看起来非常相似。 - Ricker Silva

2

同样的问题在这里，我的og:url与图像url不同，从未被LinkedIn捕获。 - Ayyash

3

在我的链接末尾添加一个垃圾参数，帮助我强制linkedin再次获取og:image图片。我在post上找到了解决方案。

- Rahul Makhija

1

谢谢！我添加了 ?linkedin=0，现在它已经正确地抓取了 OGP 元数据。 - Chunky Chunk

这是真正的解决方案！谢谢。 - undefined

2

你的代码看起来像这样吗？

<html prefix="og: http://ogp.me/ns#">
<head>
  <meta property="og:title" content="My Shared Article Title" />
  <meta property="og:description" content="Description of shared article" />
  <meta property="og:url" content="http://example.com/my_article.html" />
  <meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
   …
</body>
</html>

另外，这里还有文档：

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

同时，使用Facebook Linter检查您的URL（它适用于所有OG标签）：

https://developers.facebook.com/tools/debug/

- Ciprian

是的，它有。og:image元标记是：<meta property="og:image" content="http://personato.nl/bestanden/relaties/logos/1/c/440134_pic779587brandloyalty.gif?ts=1429608173" /> - Rik Morskate

你是否已经有了缓存解决方案？ - Ciprian

不，我们没有使用任何特殊形式的缓存，这可能是问题所在。不是服务器端或软件端的问题。 - Rik Morskate

2

根据@checkTek的评论，LinkedIn不支持使用.webp图片作为og:image属性。

- Dan

2

对我来说，问题在于图像大小。一旦我将大小从300像素增加到1200像素，它就可以工作了。

对于LinkedIn：

允许的最大文件大小为5MB。

最小图像尺寸应为1200px X 627px。

https://dev.to/samuelorobosa/how-to-handle-linkedin-and-twitter-link-previews-23eg

然而，帖子检查器发现了大小约为750MB的较小图像。因此，真正的值介于300：1200之间。

p.s. gif 在 LinkedIn 上可以使用，但在 Twitter 上只是单个静止帧。

- Kermit

1

警告 - 我正在使用JavaScript

检查步骤

首先，您需要检查您的网站/博客是否已正确放置在HTML文档的标签中的所有元标记。您可以通过将您的网站链接放在https://developers.facebook.com/tools/debug上进行调试来完成此操作。

但是，如果您在Linkedin帖子检查器中无论如何都得到错误的图像，而在Facebook调试器中没有这种情况（两者都使用开放图形标签），则问题出在Linkedin。因此，如果出现这种情况，您可以继续阅读以下内容。

我的问题和解决方案

我将我的图像存储在AWS上，因此我使用了2个不同的链接，一个是服务链接，另一个是图像链接。

Linkedin的问题在于它无法读取两个URL。所以您必须正确地进行编码。

我的服务大致如下：

https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options

现在，你将看到一个例子。我有一个函数，它只是把这两个东西放在一起。看一下：

示例：

// The service - 
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options

// Function Input - 
https://s3.amazonaws.com/appforest_uf/imageID/200x200.png

// Function Output - 
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1643682361025x516549218825449500%2F200x200.png?w=&h=&auto=compress&dpr=1&fit=max

这个函数

const resizeS3Image = (s3_url) => {
  let s3_clean_url = s3_url;
  s3_clean_url = s3_clean_url.replace(/\//g, '%2F').replace(/\:/, '%3A');
  const cloudFrontCompressedImage = `https://d1muf25xaso8hp.cloudfront.net/${s3_clean_url}?w=&h=&auto=compress&dpr=1&fit=max`;
  return cloudFrontCompressedImage;
};

你可能注意到的事情

第二个URL（图像）替换了一些内容，例如斜杠（'/'）和冒号（':'），用URL编码的等效代码代替。

2- 我是如何做到的？使用正则表达式模式和.replace JavaScript本地构造器。

我使用的工具和参考资料

https://www.w3schools.com/tags/ref_urlencode.asp

提醒

当您再次在Linkedin Post Inspector上调试您的网站时，请记得在URL后添加“？”后面的内容，例如https://yourwebsite/post/what-is-lorem-impsum?aaaa=912093090 这样，您将更新Linkedin SEO缓存。

- Lázaro Souza

1

尝试使用1000x425像素的图片。这对我有效。

- jrosell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adriana · Accepted Answer

我知道这个问题有点老，但它仍然有效。

Linkedin会缓存连接预览内容7天。进行以下操作可以清除Linkedin预览缓存：

步骤 1：访问 https://www.linkedin.com/post-inspector/inspect/

步骤 2：输入您的URL并单击Inspect，您将看到更新后的预览图像。

步骤 3：现在尝试在Linkedin上共享您的URL。