Twitter 未正确显示 summary_large_image 卡片

如何解决Twitter 未正确显示 summary_large_image 卡片

我正在尝试让大图像卡片与网站配合使用。元数据被正确读取，但显示的是小摘要卡。

我的元数据：

<!-- Twitter Card -->
<Meta name="twitter:card" content="summary_large_image">
<Meta property="twitter:domain" content="volkischexe.com">
<Meta property="twitter:url" content="/germania/index.PHP">
<Meta name="twitter:title" content="Germania: An Introduction">
<Meta name="twitter:description" content="...">
<Meta name="twitter:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1aa">

<!-- OpenGraph Card -->
<Meta property="og:type" content="website">
<Meta property="og:url" content="/germania/index.PHP">
<Meta property="og:title" content="Germania: An Introduction">
<Meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1ae">
<Meta property="og:description" content="...">

<!-- HTML Meta -->
<title>Germania: An Introduction</title>
<Meta property="og:url" content="http://volkischexe.com/germania/">
<Meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1b1">
<Meta property="og:title" content="Germania: An Introduction">
<Meta property="og:description" content="...">  
<Meta name="description" content="...">
<title>Germania: An Introduction</title>

Twitter 似乎也正确地看到了我的元数据：

我在这里遗漏了什么？

ETA：验证器没有正确显示我的卡片，但如果我真的在推特上显示它们，它们显示得很好。所以验证器出了点问题，但只要我的卡片出现在 Twitter 上，我就很好。

解决方法

有几件事可能会阻止 Twitter 为您的网站共享大卡片：

您的一些 Twitter 元设置使用“内容”，但 twitter 想要“名称”。
您的网站正在重定向到 https，因此请对元信息中的网址使用安全版本。
最好包含 Facebook 的图片大小。
而且您不需要 index.php 文件名 - 您的服务器将自动提供 index.php 文件。

尝试用这个替换你的代码：

<!-- OpenGraph Card -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://volkischexe.com/germania/">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="From where does the modern Western world derive its values and morals?">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="volkischexe.com">
<meta name="twitter:url" content="https://volkischexe.com/germania/">
<meta name="twitter:title" content="Germania: An Introduction">
<meta name="twitter:description" content="From where does the modern Western world derive its values and morals?">
<meta name="twitter:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc1">

有一件事（可能会或可能不会影响 Twitter）是您页面的开头缺少 DOCTYPE 和其他一些内容：

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Germania: An Introduction</title>
        <meta name="description" content="From where does the modern Western world derive its values and morals?">

        <link rel="preload" href="/res/AndBasR.ttf" as="font" type="font/ttf" crossorigin>
        <link rel="preload" href="/res/CelticHand.ttf" as="font" type="font/ttf" crossorigin>
        <link rel="preload" href="/res/Norse-Bold.otf" as="font" type="font/otf" crossorigin>

        <link rel="stylesheet" href="/res/main.css">

        <script src="/res/main.js"></script>

Twitter card validator 的一件事是，当您单击预览卡按钮时，有时不会重新抓取您的网站。您可能需要重新启动浏览器（关闭并重新打开）并重新抓取几次才能加载新版本。

Twitter 未正确显示 summary_large_image 卡片

如何解决Twitter 未正确显示 summary_large_image 卡片

解决方法

相关推荐