Question

问题：

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

配置：

我没有共享按钮或类似按钮，我只想通过我的个人资料分享链接。
图片远远超过300x300px：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标签的最大（和最小）长度是多少？

当然欢迎任何其他建议：）

先谢谢，干杯〜

Answer 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帐户清除缓存... 发布您的结果。

Answer 2

您是否尝试将prefix="og: http://ogp.me/ns#"添加到HTML代码？

Answer 3

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

<强> LinkedIn

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

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

示例：

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

Answer 4

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

所有您需要做的就是输入您的URL，他们将完成所有繁琐的工作，即验证属性的正确代码，例如图像，作者，标题，描述，出版日期等。他们不仅进行验证，还会告诉您要包括的代码，缺少的代码以及解决方法。

这是使用Post Inspector的网站：

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

Answer 5

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

Answer 6

OP可能有点迟，但https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin有新文档。希望这有助于其他人。

Answer 7

如果@Kym的答案适合您，并且您不想在LinkedIn链接中使用虚假的URL参数，那么一个简单的解决方案就是退出然后重新登录。

*写我自己的答案，因为我没有足够的代表来评论他们的答案

Answer 8

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

Linked In显然不是在扫描页面文本中的og标签，而是在处理页面dom，并且如果dom对象的编码不正确，它们将无法处理。如果您在使用不匹配的标签或未关闭的标签时遇到问题，那么如果其他所有方法都不起作用，则可能是您的问题。

在html修复后，我不需要在meta标签上添加前缀或在图像高度和宽度上添加og图片。修复html后，Linked In可以很好地处理它。

Answer 9

我花了一整天时间来实现它。我的主要标准是为我的所有帖子都做这个，而不用触及Wordpress中的一个帖子。

LinkedIn solution没有用。此外，LinkedIn还会将图像缓存7天，如果您更改了图像，则无法查看刷新的图像。所以这些是约束，我能够使用一些PHP，Javascript和使用虚拟参数来刷新LinkedIn缓存来实现它。这是solution

Answer 10

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

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

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

Answer 11

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

将这四行放在头部：

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

Answer 12

经过一天的研究，我发现应该使用属性为property的元标记代替name。

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

参考：Sherif Elkassaby

Answer 13

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

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

Answer 14

这对我来说是 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" />

如何成功实现LinkedIn的og：image

14 个答案: