Twitter not displaying summary_large_image card correctly

Question

Twitter not displaying summary_large_image card correctly

3.5k Views Asked by CXL At 26 March 2021 at 15:35

I'm trying to get the large image card to work with a website. The metadata is being read correctly, but it's displaying the small summary card, instead.

My metadata:

<!-- 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 seems to see my metadata correctly, too:

What am I missing here?

ETA: The validator doesn't show my cards correctly, but if I actually tweet them, they show up just fine. So there's something going on with the validator, but as long as my cards show up on Twitter, I'm good.

Original Q&A

There are 1 best solutions below

**Rich DeBourke** · Answer 1 · 2021-03-26T21:19:16.623000

There are a few things that could be stopping Twitter from sharing a large card for your site:

A couple of your twitter meta settings use “content,” but twitter wants “name.”
Your site is redirecting to https, so use the secure version for the URLs in your meta information.
It’s good to include the image sizes for Facebook.
And you don’t need the index.php file name – your server will automatically serve up the index.php file.

Try replacing your code with this:

<!-- 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">

One thing (that may or may not be impacting Twitter) is the start of your page is missing DOCTYPE and some other stuff:

<!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>

One thing with the Twitter card validator — sometimes is doesn’t rescrape your site when you click the Preview Card button. You may need to restart your browser (closed and reopened) and rescrape a couple of times to get it to load the new version.

Twitter not displaying summary_large_image card correctly

There are 1 best solutions below

Related Questions in FACEBOOK-OPENGRAPH

Related Questions in TWITTER-CARD

Trending Questions

Popular # Hahtags

Popular Questions