如何为 LinkedIn 成功实施 og:image答案

【问题标题】：How to successfully implement og:image for the LinkedIn如何为 LinkedIn 成功实施 og:image
【发布时间】：2012-04-06 11:25:02
【问题描述】：

问题：

我正在尝试在现场实现开放图形图像，但没有取得多大成功：http://www.guarenty-group.com/cz/
主页完全绕过了 og:image 标记，内部页面正在读取站点中的所有图像，并将 og:image 作为最后一个选项。
其他社交网络在内部页面和主页上运行良好。

配置：

我没有分享按钮或类似按钮，我只想通过我的个人资料分享链接。
图片超过300x300px：http://guarenty-group.com/img/gg_seal.png

这是我的 head 标签的样子：

<!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 中指定的图像！

我的问题：

https://developer.linkedin.com/documents/setting-display-tags-shares在说一件事，支持论坛的人员说“超过300”有谁知道图片的官方最小尺寸是多少（w和h）？
图片会不会太大？
我应该使用xmlns，我应该不使用xmlns还是没关系？
og:title 和 og:description 标签的最大（和最小）长度是多少？

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

先谢谢了，干杯~

【问题讨论】：

标签： html share facebook-opengraph linkedin

【解决方案1】：

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

伙计们，我花了一整天的时间尝试不同的事情。有什么用我正在使用 mata [sic] 标签如下：
<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 帐户清除缓存... 发布您的结果。

【讨论】：

【解决方案2】：

在很多复杂的解决方案都不起作用后，我发现这个简单的解决方案对我有用：

领英

“清除”LinkedIn 共享预览缓存的唯一方法是诱使 LinkedIn 认为您的页面是一个不同的（和新的）页面。

这是通过向链接添加一个虚构的参数来完成的。它不会影响您的网页，但会强制重新获取元数据。

例子：

原文链接：//beantin.se/consultant-resume “新”链接：//beantin.se/consultant-resume?1

【讨论】：

这对我有用。我有所有适当的元标记，但无法打赌 LinkedIn 显示我的图像。向 url 添加一个伪造的查询字符串就可以了，并强制它使用包含对图像的引用的新元标记来获取页面。谢谢！

【解决方案3】：

我昨晚也遇到了同样的问题。花了几个小时研究解决方案，我尝试了其他人在这篇文章中推荐的解决方案，但无济于事。最后我就这个问题联系了LinkedIn，他们立即回复了。他们的开发团队实施了一个名为“Post Inspector”的新工具，可让您优化内容共享。从字面上看，这在短短几分钟内就真正奏效了。

您所要做的就是输入您的网址，他们会完成所有繁忙的工作，即验证图像、作者、标题、描述、发布日期等属性的正确代码。他们不仅会验证，还会告诉您要包含哪些代码、缺少什么以及如何修复它。

这里是使用 Post Inspector 的网站：

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

【讨论】：

虽然它应该因为链接有用而获得 +1，但请注意 Post Inspector 似乎没有使用与例如相同的缓存。简介一。也就是说，如果您对自己的网站进行了修改，但似乎没有考虑到这些修改，您可能需要先查看 Kym 的答案。
这对我有用，我认为这应该是公认的答案。将您的 URL 输入到 post 检查器，它将更新该 URL 的 LinkedIn 缓存

【解决方案4】：

LinkedIn 也在缓存预览。如果 OpenGraph 图像在之前的某个时间被错误地缓存，请尝试使用共享链接上的查询参数来破坏缓存，例如https://your-website.com/?1.

【讨论】：

【解决方案5】：

有点晚了，哈哈，

但我遇到了这个确切的问题，发现linkedIn 正在从最终的着陆页中提取元标记。

我试图链接到的我的网站有一个即时重定向，将 og 标签添加到它被重定向到的页面以解决问题。

【讨论】：

【解决方案6】：

确保您的og: 标签是head 标签的一部分。

我最近遇到了这个问题，花了很多时间使用上述所有类型的解决方案。我正在处理其他人的 HTML，最后发现 html 只是缺少 head 标签，而它确实有结束标签作为 head。

Linked In 显然不是为 og 标签扫描页面文本，而是处理页面 dom，如果 dom 对象没有正确编码，它们将不会处理。如果您对不匹配的标签或未闭合的标签有疑问，如果其他一切都不起作用，这可能是您的问题。

修复 html 后，我不需要为元标记添加前缀或添加 og 图像高度和宽度标记。修复 html 后，Linked In 处理得很好。

【讨论】：

【解决方案7】：

如果您不想向您的 LinkedIn 网址添加虚假查询字符串参数（如 @Kym's answer 中所建议的那样），一个简单的解决方案就是退出然后重新登录。

【讨论】：

【解决方案8】：

对我来说，解决方案是将所有<meta> 标签（不包括prefix）放在<head> 标签内。

对于Facebook、Twitter 或Google 等其他社交网络，您甚至不需要<head> 标签。（因为它在 HTML5 规范中是可选的）

PS。有一种新的好方法可以在您的网站上测试<meta> 标签：https://metatags.io/

【讨论】：

【解决方案9】：

研究了一天，我发现应该使用带有property属性的元标记而不是name。

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

参考：https://ogp.me/

【讨论】：

【解决方案10】：

就我而言，我确实做到了这一点，并且效果很好（当然是在我的页面上）。

把这四行放在头上：

<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">

但是，请注意，如果您的页面中有多个头部，则需要将这些行插入第一个头部，否则它将不起作用。

我在 html 中也有 prefix="og: http://ogp.me/ns#"

【讨论】：

【解决方案11】：

我终于通过添加完整的图像路径让它工作了：

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

【讨论】：

【解决方案12】：

我是worked。

如果你没有正确设置你的开放图标签，这个问题就会发生。

而不是这个：

<meta name="image" property="og:image" content="{content}" />

试试这个：

<meta name="image" property="og:image" content="{content}" />
<meta property="og:image:secure_url" content="{content}" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

【讨论】：