html - 如何为 LinkedIn 成功实施 og:image

Question

问题：

我正在尝试在站点上实现开放图形图像，但没有取得多大成功：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 中指定的图像！

我的问题：

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

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

先谢谢了，加油~

score 49 · Accepted Answer

我在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 帐户重新登录以清除缓存...发布您的结果。

score 19 · Accepted Answer

我发现这个简单的修复程序在许多复杂的解决方案不起作用后对我有用：

领英

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

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

例子：

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

score 16 · Accepted Answer

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

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

这是使用 Post Inspector 的网站：

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

只是有点晚了，哈哈

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

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

参考：https ://ogp.me/

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

把这四行放在头上：

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

score 0 · Accepted Answer

这是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" />

score 0 · Accepted Answer

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

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

html - 如何为 LinkedIn 成功实施 og:image

12 回答 12

Related

Reference