logo标签列表

如何成功在LinkedIn上实施og:image

htmlsharefacebook-opengraphlinkedin-api
52

问题：

  • 我正在尝试在网站上实现开放图像（open graph image），但并没有取得太大的成功：http://www.guarenty-group.com/cz/
  • 主页完全绕过了og:image标签，而内部页面则从网站读取所有图像，并将og:image放在最后一个选项。
  • 其他社交网络在内部页面和主页上都正常工作。

配置：

  • 我没有分享按钮或类似的东西，我只想能够通过我的个人资料分享链接。
  • 这个图片的尺寸超过了300x300像素：http://guarenty-group.com/img/gg_seal.png

  • 这是我的头部标签的样子：

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

测试结果：

为了欺骗缓存，我使用http://www.guarenty-group.com/cz/?try=N对网站进行了测试，每次都更改了N的值。奇怪的是，不同的N值对应的图片是不同的。有时候没有图片，有时候有1、2或3张图片，但每次都是不同的图片集合。 但是，无论如何，我都找不到og:graph中指定的图片！

我的问题：

  1. https://developer.linkedin.com/documents/setting-display-tags-shares上说了一件事，而支持论坛上的人员却说“超过300”。有人知道图片的官方最小尺寸是多少（宽度和高度）吗？
  2. 图片是否可以太大？
  3. 我应该使用xmlns吗？不应该使用xmlns还是无所谓？
  4. og:title和og:description标签的最大（和最小）长度是多少？

当然欢迎任何其他建议 :)

提前感谢，祝好~

13个回答
50

我在LinkedIn论坛上找到的这个答案可能对你有帮助：

大家好，我试了一整天不同的方法，最后成功的方法是使用以下meta标签：

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

尝试给每个标签添加前缀（不是html标签），然后使用您的LI账户重新登录以清除缓存...发布您的结果。

23

在尝试过很多复杂的解决方案都不奏效之后，我找到了这个简单的方法：

领英 (LinkedIn)

想要“清除”领英分享预览缓存的唯一方法是让领英以为你的页面是一个不同（而且是新的）页面。

这可以通过在链接中添加一个虚构的参数来实现。它不会影响你的网页，但会强制重新获取元数据。

例如：

原始链接：//beantin.se/consultant-resume "新" 链接：//beantin.se/consultant-resume?1

这是对我有效的方法。我已经放置了所有正确的元标签，但LinkedIn无法显示我的图片。在URL中添加一个虚假的查询字符串就解决了问题，并强制它获取包含图像引用的新元标签的页面。谢谢！ - Arier
易于操作且高效。非常感谢！ - Iñaki
20
我昨晚遇到了同样的问题。花费数小时研究解决方案，我尝试了此帖子中其他人推荐的解决方案，但都没有成功。最后我联系了领英关于这个问题，他们迅速回复了我。他们的开发团队已经实现了一个名为“Post Inspector”的新工具，它允许您优化内容共享。只需几分钟，就可以有效地完成。

你所要做的就是输入你的URL，他们会做所有繁琐的工作，如验证正确的属性代码，如图像、作者、标题、描述、出版日期等。他们不仅会验证，还会告诉您要包含哪些代码，哪些代码缺失以及如何修复。

这是使用Post Inspector的网站：

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

虽然这个链接很有用，值得点赞，但要注意的是，帖子检查器似乎没有使用与个人资料缓存相同的缓存。也就是说，如果您对网站进行了修改，但似乎没有被考虑在内，您可能需要先检查Kym的答案。 - Skippy le Grand Gourou
2
这对我有用，我认为这应该是被采纳的答案。输入您的帖子检查器网址，它将更新URL的LinkedIn缓存。 - Connor Leech
4

LinkedIn也会缓存预览信息。如果之前的OpenGraph图像缓存不正确，可以尝试在共享链接上使用查询参数来清除缓存，例如：https://your-website.com/?1。

2

有点晚了，哈哈，

但我遇到了这个确切的问题，发现LinkedIn是从最终的着陆页中提取元标签的。

我想链接到的网站有一个即时重定向，将og标签添加到重定向页面上解决了这个问题。

2
请确保你的og:标签是标签的一部分。
我最近遇到了这个问题，在各种解决方案上花费了大量时间。最终我发现，我正在使用别人的HTML，而HTML简单地缺少标签，尽管它有head的结束标签。
显然，Linked In没有扫描页面文本以获取og标签，而是处理页面dom，如果dom对象没有正确编码，它们就不会被处理。如果您遇到未匹配标签或未关闭标签的问题，并且其他所有内容都无法正常工作，则可能是您的问题。
一旦HTML被修复，我就不需要为meta标签添加前缀或添加og图像高度和宽度标签。 Linked In在HTML修复后可以正确处理它。
2

如果您不想像@Kym的回答中建议的那样向LinkedIn URL添加假查询字符串参数，一个简单的解决方案就是注销然后重新登录。

1
对我来说，解决方案是将所有没有“前缀”的<meta>标签放入<head>标签中。
对于其他社交网络，如Facebook、Twitter或Google，您甚至不需要拥有<head>标签。（因为它在HTML5规范中是可选的）
附注：现在有一种新的很好的方法来测试您网站上的<meta>标签：https://metatags.io/
1

经过一天的研究，我发现应该使用带属性property的meta标签，而不是name。

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

参考: https://ogp.me/

0
最终我通过添加完整的图片路径使其正常工作：

<meta name="image" property="og:image" content="https://hasan.life/images/preview.png">

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接