用于 facebook、linkedin 和 twitter 的 OpenGraph 元数据
Posted
技术标签:
【中文标题】用于 facebook、linkedin 和 twitter 的 OpenGraph 元数据【英文标题】：OpenGraph meta for facebook, linkedin and twitter 【发布时间】：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 不存在？
提前致谢。
【问题讨论】：
【参考方案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预览的工具：
Facebook Twitter LinkedIn我的问题是，尽管他们的 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” 以及任何一些包括那些标签？以上是关于用于 facebook、linkedin 和 twitter 的 OpenGraph 元数据的主要内容，如果未能解决你的问题，请参考以下文章
通过 Twitter、Facebook、LinkedIn 和 Google Plus 分享
为 Facebook 和 Linkedin 好友创建统一的个人资料
为 Facebook 和 LinkedIn 提供特定值所需的元标记？
从多个社交网络（Facebook 和 Linkedin...）获取统一配置文件的数据库方案