Support » Plugin: Yoast SEO » Twitter Image Not Showing When Sharing

  • Resolved Boston Tom

    (@tneveu)


    When people use the Jetpack Twitter sharing button, the image doesn’t show up. I have the default card set to Summary. But on the frontend, the twitter:image meta property is completely missing. The other ones are there, just not that one. It shows twitter:card, twitter:creator, and twitter:site, just not twitter:image. I even switched to Summary w/ Large Image and it still won’t show that tag.
    And yes, the open graph tag for Facebook shows the image property and URL to image, which I understand is what twitter get the image info from.
    I don’t have any other social sharing plugins.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Maybellyne

    (@maybellyne)

    Hello Boston,

    Thanks for reaching out.

    For the Twitter card image, can you please confirm if you were able to set the image as instructed in this article? https://kb.yoast.com/kb/custom-twitter-tags/

    Also, please make sure the image meets the requirements for the card type. This article has a troubleshooting guide on what to check: https://kb.yoast.com/kb/twitter-sharing-not-working/

    If that does not resolve the issue, it might be there are some wonky data hung up in your browser. Can you please try clearing your browser cache, cookies, and restarting it? It sounds intimidating but we’ve got some guides here to walk you through it.

    Thread Starter Boston Tom

    (@tneveu)

    Hy Maybelline,
    Thanks for the prompt reply The image shows up in the Post’s preview as per the article link you sent me. It’s also not my browser’s cache, cookies, etc., all of which I cleared (including the server cache). How do I know that? Because when people share a story to Twitter using the JetPack share button at the bottom of the post, I can see that image is blank on Twitter. If people share using something like Buffer, no issues (granted, Buffer allows you to pick any image it finds on the page). And all the images are under 1Mb.
    I’m not a programmer but also not a newbie. It started happening with the 16.9 upgrade. I can see my Twitter notifications and the blank images started happening around that time.
    It’s also missing the twitter:image meta property when you look at a post’s source code. It has all the other tags but that one. Please read my original post above because you seemed to have missed key items (such as the missing tag). Thanks.

    Thread Starter Boston Tom

    (@tneveu)

    Update: When I manually select an image in the backend (in the Yoast box under Social) for Twitter, the twitter:image tag shows up on the frontend with the URL to the image I picked. It’s not using the image chosen for Facebook, or even the first image in the article (the default in the Yoast settings). I always pick the Facebook image because it grabs the low-resolution thumbnail image in the article that’s set for 350 px wide. Looks terrible on Facebook. But Twitter isn’t using that pic and just leaving it blank, despite showing in the preview with the hi-res Facebook pic. Does any of this make sense?

    Plugin Support Michael Tina

    (@mikes41720)

    Hi @tneveu

    Since Yoast SEO 14.0, if you check the changelog here, we no longer output the twitter:image tag if there is already an og:image meta tag specified in the frontend output and they’re not specifically set to something else.

    Would you be able to share a URL of where this issue is occurring so we can view the page source and try to check it on the Twitter Card Validator just to ensure that Twitter is able to pick up the meta data?

    Also, just to clarify, the Twitter card preview isn’t working as expected when using the JetPack share button, but when you manually share the URL on a new Tweet, does it load the preview as expected?

    Thread Starter Boston Tom

    (@tneveu)

    Hi Michael,
    Well, it does output the twitter:image tag if you manually select an image in the backend via the Yoast SEO ‘box’ under the Social tab. If I don’t manually set it, it doesn’t output the image tag for Twitter. I always manually select the Facebook image, otherwise it will grab the first image in the article, which is just a thumbnail, and it looks terrible when posting to Facebook.

    Regardless of whether I select the image myself, manually sharing to Twitter shows the image. And the validator shows it correctly. It’s only when sharing using the Jetpack twitter button does the image not appear unless I manually select the Twitter image.

    I can’t figure out how to hide a link I want to share and I can’t edit my original support question to add the link via the hidden link field.

    Plugin Support Michael Tina

    (@mikes41720)

    Hi @tneveu

    Yes, if you manually set an image in the Twitter section of the social tab of the Yoast SEO meta box, it will output the twitter:image tag. Otherwise, if you don’t manually set it, it won’t output that tag, but Twitter will still be able to detect and use the og:image tag and use that for the card preview.

    If we understand it correctly, when you share the link to Twitter, it shows the correct card preview. But when you use the Jetpack Twitter share button, it doesn’t show the correct preview?

    Just to clarify, it may be a conflict with Jetpack or some sort of functionality or feature from their end. We can only assure that the Yoast SEO plugin is working as intended because it is outputting the correct open graph and twitter tags (as evidenced when manually sharing the link on Twitter itself, or on the Twitter Card Validator).

    We don’t have any permissions to be able to edit your thread. You may want to reach out to the WordPress.org forum support mods for further assistance and see if they can modify it to include a link.

    Thread Starter Boston Tom

    (@tneveu)

    If we understand it correctly, when you share the link to Twitter, it shows the correct card preview. But when you use the Jetpack Twitter share button, it doesn’t show the correct preview?

    Yes! It only happens with the JetPack Twitter share button. The other issue is that Yoast grabs the first image in the article (from the settings, which is fine), but it’s always a thumbnail, so I have to manually select the hi-res image for Facebook and Twitter. There’s also no way to copy and paste the URL to the high-res image so I have to pick the image twice (once for FB, once for TW). In All-in-one-SEO, you can copy the hi-res URL when you select your thumbnail picture and paste it into the Facebook and Twitter URL fields without having to jump through all these hoops. And if it’s an older image, I have to search for it each time. Make sense?

    Plugin Support Michael Tina

    (@mikes41720)

    Hi @tneveu

    If it only happens with the Jetpack Twitter share button, there may be a conflict with both plugins, or something else with your setup. If this occurs with a default WP theme, and only Jetpack and Yoast SEO as the plugins enabled, it might be a valid bug report. We have steps here if you would like to raise this issue on GitHub – https://yoast.com/help/how-to-write-a-good-bug-report/

    For the og:image tag, it uses the following hierarchy and fallbacks:

    • A user-defined image “Facebook image” in the Social tab of the Yoast meta box.
    • A user-defined “Featured image” for the page (only for posts).
    • A prominent image from the page’s content.
    • The “Social default image” from the template in Search Appearance.
    • The site’s fallback/default social image (set at SEO > Social > Facebook > Default image).
    • While there’s no way to use a URL to set the image, we would expect that if you don’t set the specific image in the social section, it would fall back to the featured image, and then go to a prominent image from the page’s content.

    Thread Starter Boston Tom

    (@tneveu)

    Thanks for the info! Sadly, I don’t have time to disable an actively running site to troubleshoot this but I’ve seen these blank-image tweets being sent from other sites that use Yoast (I check the page code). Most website owners may not even be aware that the Jetpack Twitter share button doesn’t include an image unless you manually specify it in the backend. Can you replicate that issue?
    Also, I leave the social default image blank in the settings. Because it’s a news site, I have to have a different image for each article, not some generic one.
    Right now the default image for FB and TW is the First Image found in the article (i.e., A prominent image from the page’s content). I don’t use WP’s Featured Image feature.
    For the JetPack Twitter button to work, I have to manually choose the hi-res image because the first image in the article is a thumbnail with a width of 350px. Much too small for FB whether you use JetPack or some other sharing program.
    Unfortunately, I can’t simply copy the hi-res URL when I select the thumbnail image for the article and simply paste it into the Facebook and Twitter fields as I could with All-in-one-SEO ( Will that feature be something you’ll be adding?). I have to manually select the hi-res image each time because Twitter won’t see the image when using the JetPack TW share button.

    Plugin Support Md Mazedul Islam Khan

    (@mazedulislamkhan)

    Thanks for following up with us. You have identified multiple concerns so we will address each one separately below. Let us know if we’ve missed any of your concerns or if you have follow-up questions.

    Twitter doesn’t show an image when sharing through the Jetpack Twitter button
    While we are unable to confirm why exactly Twitter doesn’t show an image when sharing a page through the Jetpack Twitter social button, we can confirm that it’s not specific to the Yoast SEO plugin.

    Why? Yoast SEO is responsible for generating social open graph metadata. We both can confirm that Yoast SEO is generating the social open graph metadata correctly as expected for you. So, there might be something wrong with either Twitter or Jetpack Twitter button that can’t detect the image which already appearing in the twitter:image or og:image meta property on the relevant page. You may need to look for a custom solution as well to see if you could hook into the Jetpack social button to use a particular value when sharing.

    We are afraid to say that we are not familiar with such customization, nor do we know the exact filter that you may need for that.

    Having an URL field to manually copy and paste the image links
    We understand that you’d prefer to have an input field to manually copy and paste the high-resolution image link rather than selecting the image each time from the WordPress media library.

    We can see how that could be helpful for some folks. If you have a spare moment, please do feel free to submit a proper feature request directly at our GitHub development repository so our development team can consider this.

    That said, we are glad that manually selecting a high-resolution image for Twitter (specifically) using the Yoast SEO meta box social option fixes the issue with the Jetpack Twitter sharing button for you.

    Thread Starter Boston Tom

    (@tneveu)

    Hi there,
    Thanks so much for all the time you’ve vested in this. I guess I spoke too soon. It appears that selecting a hi-res image for Twitter didn’t fix the problem. Users using the Twitter share button are still posting tweets with blank images, even though it’s specifically specified. The page source code shows the twitter:image tag with the URL to the image.
    This is what it shows when you look at the page source code (For privacy reasons, I’ve changed the website name to a fake one.):
    <meta name="twitter:image" content="https://i0.wp.com/domainname.com/wp-content/uploads/2020/10/earth-image.jpg?fit=1127%2C833&ssl=1"/>
    Incidentally, the meta tag for Facebook shows:
    <meta property="og:image" content="https://domainname/wp-content/uploads/2020/10/earth-image.jpg"/>
    Both images were manually selected on the backend via the Yoast panel. Please note the URLs are different. Removing the Twitter image also removes the twitter:image tag with the same results: a blank image when sharing to twitter.
    I’ve tried clearing the server cache, my browser’s cache, the WP cache, nothing seems to help. Should I start a new topic since I can’t edit the original one to show you hidden info?

    Plugin Support Md Mazedul Islam Khan

    (@mazedulislamkhan)

    Thanks for following up with us. Let us clarify how the Yoast SEO output the og:image and twitter:image meta tags.

    Whenever you select an image specifically to a post or a page using the Yoast SEO meta box social options for Facebook, Yoast SEO output the og:image meta. It doesn’t output the twitter:image meta at this point as Twitter and other social media fall back to the og:image meta.

    On the other hand, when selecting an image specifically for a post or a page using the Yoast SEO meta box social options for Twitter, Yoast SEO output the twitter:image meta. It doesn’t matter whether you have selected an image for Facebook or not.

    We understand that when you select an image specifically for a post or a page using the Yoast SEO meta box social options for Twitter, you don’t see the twitter:image meta at all. If that’s the case, it needs further investigation at this point and we can’t perform such an investigation in the public forum. In that case, you’ll need to have an active premium subscription to receive private support emails.

    Let us know if you have any further questions or whether we have missed anything.

    Thread Starter Boston Tom

    (@tneveu)

    Thanks so much for your time and help. Much appreciated!

    Plugin Support Michael Tina

    (@mikes41720)

    Hi,

    We hope you understand that we’d need to investigate this further, which we are unable to do so over these public forums. We hope you consider a Yoast SEO Premium subscription, as we also do have a lenient 30-day refund policy if you are unhappy with the support or plugin features.

    We’ll be closing this thread to keep the forum overview. Thanks.

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.