og:image does not work

Hello Axel,

Thanks for reaching out.

On checking the Twitter Card Validator, there are no errors and sharing on Twitter does not show an image. Inspecting your robots.txt file, you seem to have a directive blocking Twitterbot. We recommend using the default robot rules below:

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Please refer to this article: https://yoast.com/wordpress-robots-txt-example/. To edit your robots.txt through our plugin, please follow this guide: https://yoast.com/help/how-to-edit-robots-txt-through-yoast-seo/

“On checking the Twitter Card Validator, there are no errors and sharing on Twitter does not show an image.”
Thanks for repeating what i already described.

The robots.txt
1: The lines you criticize have been added yesterday and the issue exists longer.
2: The robots.txt is edited now but still there is no image

axel

Hello Axel,

No offence; I only confirmed what you reported so you know I could reproduce it too.

Nonetheless, the Yoast SEO plugin is outputting the correct meta tags necessary for Twitter; we are not sure why the image is not showing. You may want to consider checking if the summary card or summary with large image card meets the requirements for the card type. This article has a troubleshooting guide on what to check: https://yoast.com/help/twitter-sharing-not-working/

Hi,
1: i carefully checked if imagesizes/dimensions could be the reason before i opened this thread and —NO, it isnt.
Twitter shows images even if they dont match the requirements.

2: What about the issue i described in my first thread:”Switching from “summary” to “summary with big image” shows no difference when validating the card”

axel

addendum:
This is the image which has been used as a featured image / twitter image:
https://www.guidos-welt.de/wp-content/uploads/2021/07/661E1AAF-0E4B-4E66-AB56-A42B86209015.jpeg

This is the post where this image is attached/used:
https://www.guidos-welt.de/welches_problem/

As you see:
1: The image is not too big
2: The validator does not show the image

result: although the image does match the requirements there are no images in the preview

axel

I researched a bit deeper and found some more.
Please check the HTML from the iframe that shows the Validator result!
Here the URL with the issue.
Line 2 says: “SummaryCard–noImage”
Why does it say “NoImage”? (Its not an error/warning…its some kind of markup)

<div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
    <a class="js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small SummaryCard--noImage" href="https://www.guidos-welt.de/welches_problem/" rel="noopener" data-card-breakpoints="w400 w350 w300 w250 w200 w150 w100 w50 ">
  <div class="SummaryCard-image TwitterCardsGrid-float--prev">
    <div class="tcu-imageContainer tcu-imageAspect--1to1">
  <div class="tcu-imageWrapper">
  </div>
</div>
  </div>
  <div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
    <div class="SummaryCard-content TwitterCardsGrid-ltr">
  <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline" dir="ltr">Welches Problem? | Guidos Welt</h2>
  <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline" dir="ltr">Cartoons by Guido Kuehn</p>
  <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination" dir="ltr">guidos-welt.de</span>
</div>
  </div>
</a>
  </div>

To compare here is a random newspaper article that shows an image.
Line 2, same place: ” SummaryCard–large”

 <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
    <a class="js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--large" href="https://www.spiegel.de/start/remote-work-und-hochzeits-fotografie-christine-bay-arbeitet-das-halbe-jahr-im-ausland-a-362879ff-c5d9-4435-be32-a22da760bd2e" rel="noopener" data-card-breakpoints="w400 w350 w300 w250 w200 w150 w100 w50 ">
  <div class="SummaryCard-image TwitterCardsGrid-col--12">
    <div class="tcu-imageContainer tcu-imageAspect--2to1">
  <div class="tcu-imageWrapper" style="opacity: 1; background-image: url(&quot;https://pbs.twimg.com/card_img/1411565665388011520/tgS8DSxr?format=jpg&name=600x314&quot;); background-size: cover;" data-style="background-image: url(https://pbs.twimg.com/card_img/1411565665388011520/tgS8DSxr?format=jpg&name=600x314); background-size: cover;">
    <img class="u-block" data-src="https://pbs.twimg.com/card_img/1411565665388011520/tgS8DSxr?format=jpg&name=600x314" alt="" src="https://pbs.twimg.com/card_img/1411565665388011520/tgS8DSxr?format=jpg&name=600x314">
  </div>
</div>

  </div>
  <div class="SummaryCard-contentContainer TwitterCardsGrid-col--12">
    <div class="SummaryCard-content TwitterCardsGrid-ltr">
  
  <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline" dir="ltr">Hochzeitsfotografin Christine Bay arbeitet im Sommer durch – und verbringt den Winter im Ausland</h2>

  <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline" dir="ltr">Als Hochzeitsfotografin arbeitet Christine Bay das halbe Jahr ohne Pause. Den Rest verbringt sie in Namibia, Südostasien ...</p>

  <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination" dir="ltr">spiegel.de</span>

</div>

  </div>
</a>

  </div>

Thanks for following up with us. You identified multiple queries that you want us to address and we’ll address them in order:

Image isn’t appearing on social media (Twitter)
We looked at the relevant page and can confirm that Yoast SEO is generating all the social media open graph metadata correctly as expected. However, the relevant page has the following social open graph metadata for the image and the image URL is invalid:

<meta property="og:image" content="https://www.guidos-welt.de/wp-content/uploads/2021/06/85A1C50C-8AB7-4D38-B6A8-8B27F06C2B0B-scaled.jpeg" />

If you go to the relevant image file directly from your browser, you’ll see that it’s showing a 404 error page rather than showing the actual image.

In addition, we looked a random page on your website and could confirm the same thing with the relevant page as well. The og:image property refererring to an image that doesn’t exist.

So, that explains why the image doesn’t appear when sharing pages from your website on social media (Twitter). You’ll need to make sure the image you add specifically to a page using the Yoast SEO meta box → Social (tab) is publicly accessible and the image URL works.

Note: the page you’ve as a reference in your most recent reply has a broken URL as well. The image URL https://www.guidos-welt.de/wp-content/uploads/2021/07/661E1AAF-0E4B-4E66-AB56-A42B86209015.jpeg that you have selected as a featured image doesn’t work either.

Twitter card type
We understand when you change the card type from Summary to Summary with a big image from Yoast SEO Twitter settings, you don’t see the relevant change reflected when debugging your site using the Twitter card validator.

First thing first, when changing the Twitter card type from Yoast SEO settings, it shall immediately update the open graph metadata for all the existing pages on your website. However, it might take a little while to fetch the updated information when sharing your website on social media.

That said, once you change the Twitter card type settings from Yoast SEO, you could always verify the relevant changes from any of your page’s source code and checking the twitter:card property. If it says, summary you know that the settings are currently being selected from Yoast SEO plugin settings.

We hope that clarifies all of your queries better now and gives an indication of what’s exactly wrong with your setup!

Sorry, this is not true.
This is only because we changed the filenames SINCE YESTERDAY.
Just pick one post from this list and you will see that the og:images axist:
https://www.guidos-welt.de/

Or investigate this post as an example (i promise we will not edit anything until the issue is solved)
https://www.guidos-welt.de/blasenbewohner/

Hi @alauer

We checked https://www.guidos-welt.de/blasenbewohner/ and we can confirm that the og:image of https://www.guidos-welt.de/wp-content/uploads/2021/04/F52AB30E-8194-4ABB-BD63-689AE6B58553-scaled.jpeg is loading as expected.

We tried to run it through Facebook’s Sharing Debugger Tool and it can pick up the correct image.

However, when running it through the Twitter Card Validator Tool, while it is showing the correct title, description, and card type (summary), the image isn’t loading as expected. We’re not sure exactly why the image isn’t showing (since it is showing for Facebook’s tool), but it’s possible that the image result may have been cached.

Please do refer to the guidelines here to refresh the card and see if it helps – https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards#refreshing

Its not a cacheproblem.
How do i know?
Because it happens also with brandnew posts which never have been shared before.

additional info which might help to find the reason:
This post shows an image:
https://www.guidos-welt.de/welches_problem/
What is the difference to all other posts?

addendum:
– The setting is on “summary with big image”
– The HTML says “<meta name=”twitter:card” content=”summary_large_image” />”

Nevertheless the Validator (& Tweets) are showing ALL posts as “summary”.
WHY??

@alauer We reviewed that post and the difference we are seeing is that the https://www.guidos-welt.de/welches_problem/ is outputting a twitter:image tag whereas the other pages we checked were only outputting an og:image tag and twitter does appear to be reading the twitter:image tag correctly. If you specifically set a twitter image for one of the problematic pages does Twitter then read the image correctly?

As far as i know:
1: If only featured image –> og:image and twitter shows it
2: If a separate twitter image is set–>twitter:image and Twitter shows that instead.

The posts “welches-problem” has only been edited to find the reason – its not meant as a solution.

So twitter:image is an option, not a “must” and the issue is:
Why is there no image when only the feature image is set?

@alauer

The separate Twitter image should take priority over the Featured image. When no Twitter image is set but the Featured image is, then Twitter should show that Featured image.

We can ensure, Yoast SEO is it’s outputting the correct twitter:image on the page source as per the above contexts.

Just to confirm further, let’s do a conflict check to see if any plugin or theme in combination with Yoast SEO is causing this issue.The fastest way to rule out any conflict, is to deactivate all non-Yoast plugins and switch to a standard theme like Twenty Twenty.

Please test this on your development or staging site, if you have one. If not, we recommend using the Health Check & Troubleshooting plugin. This plugin has a troubleshooting mode, which does not affect normal visitors to your site.

If you’re unfamiliar with checking for conflicts, we’d like to point you to a step-by-step guide that will walk you through the process: How to check for plugin conflicts

Do you see any difference in result from above?

We are going ahead and marking this issue as resolved due to inactivity. If you require any further assistance please create a new issue.