如何成功实现LinkedIn的og:image

问题描述 投票:37回答:11

问题:

  • 我正在尝试在现场实施开放图形图像,但没有太大成功: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中指定的图像!


我的问题:

  1. https://developer.linkedin.com/documents/setting-display-tags-shares说了一件事,支持论坛上的人员说“超过300”有谁知道图像的官方最小尺寸是什么(w和h)?
  2. 图像太大了吗?
  3. 我应该使用xmlns,我不应该使用xmlns或无关紧要吗?
  4. og:title和og:description标签的最大(和最小)长度是多少?

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

在此先感谢,欢呼〜

html share opengraph linkedin
11个回答
32
投票

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


0
投票

对我来说,解决方案是将所有<meta>标签(没有prefix)放在<head>标签内。

对于Facebook,Twitter或Google等其他社交网络,您甚至不需要使用<head>标签。 (因为它在HTML5规格中是可选的)

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


0
投票

在我的情况下,我做了这一点,它工作得很好(当然在我的页面上)。

将这四行放在头部:

<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中也有前缀=“og:http://ogp.me/ns#


9
投票

您是否尝试过将prefix="og: http://ogp.me/ns#"添加到HTML标记中?


7
投票

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

LinkedIn

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

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

例:

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


5
投票

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

所有你要做的就是输入你的URL,他们做所有繁忙的工作,即验证正确的属性代码,如图像,作者,标题,描述,发布日期等。他们不仅验证,他们还告诉你什么代码到包括,缺少什么,以及如何解决它。

这是使用Post Inspector的网站:

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


4
投票

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


1
投票

这可能对OP来说有点晚了,但是在https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin上有新的文档。希望这有助于其他人。


1
投票

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

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


1
投票

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

Linked In显然不是扫描og标签的页面文本,而是处理页面dom,如果dom对象没有正确编码,它们将不会处理。如果您遇到无法匹配的标签或未关闭标签的问题,如果其他一切都无效,这可能是您的问题。

一旦html被修复,我不需要为元标记添加前缀或添加og图像高度和宽度标记。一旦html被修复,链接在处理它就好了。


0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.