时间戳

首页 > 解决方案 > Twitter 未正确显示 summary_large_image 卡

facebook-opengraph - 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 上，我就很好。

标签： facebook-opengraphtwitter-card

解决方案

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

  • 您的一些 twitter 元设置使用“内容”，但 twitter 需要“名称”。</li>
  • 您的网站正在重定向到 https，因此请为您的元信息中的 URL 使用安全版本。
  • 最好包含 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 卡验证器的一件事- 有时当您单击预览卡按钮时不会重新抓取您的网站。您可能需要重新启动浏览器（关闭并重新打开）并重新抓取几次以使其加载新版本。

推荐阅读