用于 facebook、linkedin 和 twitter 的 OpenGraph 元数据答案

【问题标题】：OpenGraph meta for facebook, linkedin and twitter用于 facebook、linkedin 和 twitter 的 OpenGraph 元数据
【发布时间】：2018-03-04 04:53:18
【问题描述】：

我正在尝试确保在共享我的网站时显示正确的元信息。我以为我可以正常工作，但我在不同的社交网站上遇到了一些问题，如下所示：

Twitter 拉入文本但不显示指定的图像。
LinkedIn 显示文本，但似乎使用了错误的图像，因此被拉伸了。
Facebook 不显示任何内容。如果我发布 URL，这就是显示为超链接的全部内容。

最初我只有 meta name="twitter: 的东西，但后来我在上面添加了 meta property="og:，因为有人告诉我这是 LinkedIn 需要的。

这是我在我的网站head 中使用的元/OpenGraph 数据：

<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:image" content="/img/site/social-logo.png">

谁能发现我错过了什么？ Twitter 似乎没问题，除了图片不显示且 URL 正确。虽然 LinkedIn 没有正确使用 og 并且 Facebook 不存在？

提前致谢。

【问题讨论】：

标签： facebook twitter linkedin facebook-opengraph meta-tags

【解决方案1】：

图像需要完整路径，我也尝试了相对路径，但没有成功。

你使用“twitter:url”、“twitter:title”、twitter:description”和“twitter:image”是多余的，除非你只希望twitter有不同的行为。如果没有找到这些标签，twitter将退回到 OGP 标签。

对于 Facebook，您可能缺少以下内容：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

调试OG预览的工具：

我的问题是，尽管他们的 documentation 说最小尺寸为 80 x 150 像素以防止它被人为拉伸以适应布局，但 LinkedIn 似乎拉伸了图像。

【讨论】：

是的，我想我现在可以在大多数平台上使用它了。我从其他地方复制了 Twitter 信息，但如果它不存在，它会退回到 OGP 标签。我认为这非常有用，因为它们使用不同的图像纵横比。 LinkedIn是一个有趣的。我实际上放了一张支持票。得到了应有的一切，但它仍然忽略了我指定的图像。它改为显示页面上的第一个缩略图。他们承认这是他们最后的一个问题，但没有估计什么时候会解决。
我错过了那个 Facebook 链接，那是为了什么？ Facebook 现在似乎确实可以工作，但偶尔/间歇性地它不显示拇指/信息。我想知道那条线是否会有所帮助。本来以为是网址末尾没有放空格造成的，有点奇怪！
他们的文档说要包含命名空间，这就是该行的作用。
啊，好吧，这很方便，并阐明了为什么会发生这种情况，至少有一个修复/解决方法。所以我只是在每一页的头部添加那一行。在哪里重要吗？
领英：linkedin.com/post-inspector

【解决方案2】：

尽量包含图片的完整路径。同样使用 facebook，您可能需要再次抓取页面。

如果您访问此页面https://developers.facebook.com/tools/debug/ 输入您的站点，它应该会显示任何错误。进行任何更改时，您还需要再次点击刮擦按钮

【讨论】：

谢谢，我收到的警告之一是 “应该明确提供 'og:image' 属性，即使可以从其他标签推断出一个值。” 所以我想这是指og:image 的路径。请注意，它确实说 “缺少以下必需属性：og:url, og:type, og:title, og:image, og:description, fb:app_id” 以及任何一些包括那些标签？