Question

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

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

最初我刚收到了meta name="twitter:的内容，但之后又添加了meta property="og:，因为我被告知需要LinkedIn。

这是我在我的网站head中使用的meta / 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却不存在？

提前致谢。

Answer 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似乎仍在延伸图像，以防止人工拉伸以适应布局。

Answer 2

尝试包含图像的完整路径。还有Facebook，你可能需要再次刮页。

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

Facebook，linkedin和twitter的OpenGraph元

2 个答案: