Twitter: Twitter cards not showing image after tweet post
Asked Answered
T

4

12

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?

Tasiatasiana answered 19/1, 2017 at 10:58 Comment(1)
Have you got the solution ?Keaton
E
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.

Eolanda answered 8/1, 2018 at 20:30 Comment(7)
twitter:image is the correct usage. Adding :src had no effect whatsoever,Kohima
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.Eolanda
github uses twitter:image:srcClassic
This is the solution. Thank you!Arsyvarsy
Can confirm.. This solution works perfectly. Thank you!Togliatti
Only twitter:image will be sufficient. Just wait 10 minutes if you don't see image immediately.Ecumenism
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.Selfrising
S
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/

Sisco answered 23/3, 2021 at 5:16 Comment(2)
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.Notation
Twitter validator told me my title was invalid if present. It wasn't present, but adding it fixed this problem for me.Santosantonica
S
4

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.

Snapp answered 30/9, 2021 at 15:6 Comment(0)
R
0

I found out that the solution is providing the full path for the image.

As mentioned in the above comment, twitter:image is correct, and we don't need to set twitter:image:src.

Revegetate answered 13/5 at 9:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.