当前位置：theitroad>Html 如何为LinkedIn成功实现og:image

Html 如何为LinkedIn成功实现og:image

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/10042786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-28 23:37:32 　来源:igfitidea点击:

How to successfully implement og:image for the LinkedIn

htmlsharefacebook-opengraphlinkedin

提问by Sabo

THE PROBLEM:

问题：

  • I am trying, without much success, to implement open graph image on site: http://www.guarenty-group.com/cz/
  • The homepage is completeply bypassing the og:image tag, where internal pages are reading all images from the site and place og:image as the last option.
  • Other social networks are working fine on both internal pages and homepage.
  • 我正在尝试在网站上实现开放图形图像，但没有取得多大成功：http: //www.guarenty-group.com/cz/
  • 主页完全绕过了 og:image 标签，其中内部页面从站点读取所有图像并将 og:image 作为最后一个选项。
  • 其他社交网络在内部页面和主页上都运行良好。

THE CONFIGURATION:

配置：

  • I have no share buttons or alike, all I want is to be able to share the link via my profile.
  • The image is well over 300x300px: http://guarenty-group.com/img/gg_seal.png

  • Here is how my head tag looks like:

    <!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>
  • 我没有分享按钮或类似按钮，我想要的只是能够通过我的个人资料分享链接。
  • 图像远远超过 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>

THE TESTING RESULTS:

测试结果：

In order to trick the cache i have tested the site with http://www.guarenty-group.com/cz/?try=N, where I have changed the N every time. The strange thing is that images found for different value of N is different. Sometimes there is no image, sometimes there is 1, 2 or 3 images, but each time there is a different set of images. But, in any case I could not find the image specified in the og:graph!

为了欺骗缓存，我使用http://www.guarenty-group.com/cz/?try=N测试了该站点，我每次都更改了 N。奇怪的是，对于不同的 N 值找到的图像是不同的。有时没有图像，有时有 1、2 或 3 个图像，但每次都有一组不同的图像。但是，无论如何我都找不到 og:graph 中指定的图像！

MY QUESTIONS:

我的问题：

  1. https://developer.linkedin.com/documents/setting-display-tags-sharesis saying one thing, and the personnel on the support forum is saying "over 300" Does anyone know What is the official minimum dimension of the image (both w and h)?
  2. Can an image be too large?
  3. Should I use the xmlns, should I not use xmlns or it doesn't matter?
  4. What are the maximum (and minimum) lengths for og:title and og:description tags?
  1. https://developer.linkedin.com/documents/setting-display-tags-shares说的是一件事，支持论坛上的人说“超过 300” 有谁知道官方的图片最小尺寸是多少（ w和h）？
  2. 图片会不会太大？
  3. 我应该使用 xmlns，我应该不使用 xmlns 还是没关系？
  4. og:title 和 og:description 标签的最大（和最小）长度是多少？

Any other suggestion is of course welcomed :)

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

Thanks in advance, cheers~

先谢谢了，加油~

采纳答案by GothamCityRises

This answer I found on LinkedInforums might be of help to you:

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

Guys, I've spent a whole day trying different things. What worked for me is using the mata [sic] tags as following:

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

Just try to add prefix to every tag (not to html tag), then re-sign in with your LI account to clear the cache... Post your results.

伙计们，我花了一整天的时间尝试不同的事情。对我有用的是使用 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 帐户重新登录以清除缓存...发布您的结果。

回答by Kym

I found this simple fix which worked for me after lots of complicated solutions which didn't work:

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

LinkedIn

领英

The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.

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

This is done by adding a made-up parameter to the link. It doesn't affect your webpage, but it does force the metadata to be re-fetched.

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

Example:

例子：

Original link: //beantin.se/consultant-resume "New" link: //beantin.se/consultant-resume?1

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

回答by Quintessa Anderson

I was having the same issue last night. Spent hours researching solutions and I tried the solutions recommended by others in this post but to no avail. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this actually worked.

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

All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what code to include, what is missing, and how to fix it.

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

Here is the website to use Post Inspector:

这是使用 Post Inspector 的网站：

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

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

回答by Ain Tohvri

LinkedIn is also caching previews. If OpenGraph image was incorrectly cached at some point before, try defeating the cache with a query parameter on a shared link, e.g. https://your-website.com/?1.

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

回答by user2989397

Make sure your og:tags are part of the headtag.

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

I ran into this recently, spent a huge amount of time working on it with all the types of solutions above. I was working with someone else's HTML and finally figured out that the html was simply missing the headtag, while it did have the closing tag for head.

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

Linked In is apparently not scanning page text for the og tags, but processing the page dom, and if the dom objects aren't properly coded, they won't process. If you have issues with unmatched tags or unclosed tags, this could be your issue if everything else is not working.

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

I did not need to add prefix to the meta tags or add og image height and width tags once the html was fixed. Linked In processed it fine once the html was fixed.

一旦 html 被修复，我不需要为元标记添加前缀或添加 og 图像高度和宽度标签。一旦 html 被修复，Linked In 就可以很好地处理它。

回答by Blobs

Just a little late lol,

只是有点晚了哈哈

But I came across this exact issue, figured out that linkedIn was pulling the meta tags from the final landing page.

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

My website that i was trying to link to had an instant redirect, adding the og tags to the page where it was redirected to fixed the issue.

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

回答by Andrew McCombe

This may be a bit late for the OP, but there is new documentation at https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin. Hopefully this helps others.

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

回答by Ivan Aracki

For me solution was to put all the <meta>tags (without prefix) inside <head>tag.

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

For other social networks like Facebook, Twitteror Googleyou don't even need to have <head>tag. (because it it optional in HTML5specs)

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

PS. There is a new nice way for testing <meta>tags on your website: https://metatags.io/

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

回答by John

If @Kym's answer works for you, and you don't want to have a fake URL parameter in your LinkedIn links, a simple solution is just to sign out and then sign back in.

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

*Writing my own answer since I don't have enough rep to comment on theirs

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

回答by ShriKant Vashishtha

I spent whole day implementing it. My main criteria was to do it for all my posts without touching even a single post in Wordpress.

我花了一整天的时间来实施它。我的主要标准是对我所有的帖子都这样做，甚至不触及 Wordpress 中的一个帖子。

LinkedIn solutiondidn't work. Also LinkedIn caches the images for 7 days and if you changed the image, you are not able to look at refreshed image. So these were the constraints and I was able to implement it using some PHP, Javascript and using dummy parameter to refresh LinkedIn cache. Here's the solution

LinkedIn 解决方案不起作用。此外，LinkedIn 会将图像缓存 7 天，如果您更改了图像，则无法查看刷新后的图像。所以这些是约束，我能够使用一些 PHP、Javascript 并使用虚拟参数来刷新 LinkedIn 缓存来实现它。这是解决方案

相关推荐

Html Internet Explorer 中的表格行高

Html Internet Explorer 中的表格行高

Html html5和mysql之间的直接连接

Html html5和mysql之间的直接连接

HTML 缩小？

HTML 缩小？

Html 如何使用 CSS 折叠一组 <div> 标签的边框？

Html 如何使用 CSS 折叠一组 <div> 标签的边框？

相关推荐
最近更新
标签