适用于Facebook，Linkedin和Twitter的OpenGraph Meta [英] OpenGraph meta for facebook, linkedin and twitter
问题描述
我试图确保在共享我的网站时显示正确的元信息.我以为我可以用，但是我在不同的社交网站上遇到了一些问题，如下所示:
I'm trying to make sure that when my website is shared the correct meta information is displayed. I thought I had it working but I'm experiencing a few issues on different social websites, as follows:
- Twitter提取文本，但不显示指定的图像.
- LinkedIn显示文本，但似乎使用了错误的图像，因此被拉伸了.
- Facebook不显示任何内容.如果我发布该URL，那么所有这些都将显示为超链接.
最初，我只是拥有meta name="twitter:的内容，但后来又在其上方添加了meta property="og:，因为有人告诉我这对于LinkedIn是必需的.
Originally I just had the meta name="twitter: stuff but have since added the meta property="og: above it as I was told that was needed for LinkedIn.
这是我在网站head中使用的meta/OpenGraph数据:
This is the meta/OpenGraph data I'm using in my website head:
<!-- 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不存在?
Can anyone spot what I'm missing? Twitter seems ok, aside from the image not display and the URL is correct. While LinkedIn doesn't use the og correctly and Facebook is non-existent?
谢谢.
推荐答案
图片需要完整路径，我也尝试了相对路径，但没有用.
Image requires a full path, I tried relative as well but didn't work.
除非您只希望对twitter采取不同的行为，否则您对"twitter:url"，"twitter:title"，twitter:description和"twitter:image"的使用是多余的.到OGP标签.
Your use of "twitter:url", "twitter:title", twitter:description" and "twitter:image" is redundant unless you want different behavior for twitter only. If these tags are not found, twitter will fall back to OGP tags.
对于Facebook，您可能会缺少以下内容:
For Facebook, you might be missing the following :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
用于调试OG预览的工具:
Tools to debug OG preview :
- LinkedIn (couldn't find one yet)
我的问题是，尽管有文档，但LinkedIn似乎仍在拉伸图像 a>表示最小尺寸为80 x 150px，以防止人为地将其拉伸以适合布局.
My problem is, LinkedIn seems to stretch the image in spite of their documentation saying that minimum size is 80 x 150px to prevent it from being artificially stretched to fit the layout.
这篇关于适用于Facebook，Linkedin和Twitter的OpenGraph Meta的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
