Twitter: Twitter cards not showing image after tweet post

Question

I am trying to share the tweet using twitter share button and using twitter cards for post image with my link and i am using :

<meta property="og:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg">
<meta property="og:title" content="SOME TEXT">
<meta property="og:description"SOME DESCRIPTION">
<meta name="twitter:site" content="THIS IS CONTENT">
<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content="TWITTER CONTENT">
<meta name="twitter:description" content="TWITTER DESCRIPTION">
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg">

and for share button using this:

<a class="twitter-share-button"href="https://twitter.com/intent/tweet?text=Hello%20world">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

but this code only sharing text and link on twitter not with image.

can any one tell me whats wrong with my code?

Have you got the solution ? – Midhun P Jan 09 '19 at 05:18 — Midhun P, Jan 09 '19 at 05:18

score 11 · Answer 1 · answered Jan 08 '18 at 20:30

11

I just solved this issue by changing the tag name:

<meta name="twitter:image:src" content="https://example.com/img/my_image.jpg">

It seems the documentation is showing twitter:image instead of twitter:image:src.

answered Jan 08 '18 at 20:30

eFox

685
8
17

2

twitter:image is the correct usage. Adding :src had no effect whatsoever, – Andrew West Apr 03 '19 at 08:55
It had that effect for me when I had the issue, and it's worth a try for those who has this issue with only `twitter:image` as was the case for me. – eFox Apr 04 '19 at 11:12
github uses `twitter:image:src` – bric3 Apr 23 '20 at 23:31
This is the solution. Thank you! – Houman Jan 20 '21 at 21:46
Can confirm.. This solution works perfectly. Thank you! – Amrut Prabhu Apr 29 '21 at 11:12
Only `twitter:image` will be sufficient. Just wait 10 minutes if you don't see image immediately. – R. Gurung Jan 05 '22 at 19:21
May 2022 and this is the correct answer. I'm actually running both tags now to be safe. Not sure why it works for some websites and not others. – Ryan Hartman May 20 '22 at 14:33

score 4 · Answer 2 · answered Mar 23 '21 at 05:16

4

First, try to use complete path from http or https for example: https://webpage.com/my_path_image.jpg

Check directly in the following links:

Twitter: https://cards-dev.twitter.com/validator

Facebook: https://developers.facebook.com/tools/debug/

answered Mar 23 '21 at 05:16

Antonio Moreno

881
8
9

1

Using absolute paths was the fix for me. I was using a relative path earlier that worked just fine on Discord, Telegram, LinkedIn, and most SEO checker tools. Except Twitter and Slack. Using absolute paths worked. – Jayant Bhawal Jun 13 '21 at 20:34
Twitter validator told me my title was invalid if present. It wasn't present, but adding it fixed this problem for me. – Michael Hinds Sep 08 '22 at 10:05

score 4 · Answer 3 · answered Sep 30 '21 at 15:06

If you are still pulling your hair out trying to figure out why Twitter card images are not displaying for pages on your site despite having the correct dimensions and meta tags first try hosting the image on an external server i.e. a public Amazon S3 bucket.

For reasons I have yet to discover the Twitter agent / card validator would not return the image from my server (docker containers behind NGINX proxy) even though all other Twitter and OG Graph online testers returned the image correctly.

As soon as I hosted the image elsewhere the cards worked perfectly.

Twitter: Twitter cards not showing image after tweet post

3 Answers3