Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sharing on Twitter does not show thumbnail of the image

Tags:

twitter

I want the users to share a page of my website on Twitter. I've a button as follow:-

<a href="http://twitter.com/intent/tweet?text={{title}}&url=http://{{request.get_host}}/ad/{{slug}},{{id}}" target="_blank"></a>

My meta tags are as follow:-

<meta property="og:type" content="website" />
<meta property="og:title" content="{{title}}" />
<meta property="og:description" content="{{description}}" />
<meta property="og:image" itemprop="image primaryImageOfPage" content="http://{{request.get_host}}{{images.0}}" />
<meta property="og:url" content="http://{{request.get_host}}/ad/{{slug}},{{id}}"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="{{request.get_host}}"/>
<meta name="twitter:title" property="og:title" itemprop="title name" content="{{title}}" />
<meta name="twitter:description" property="og:description" itemprop="description" content="{{description}}" />

This is what I get after I click the share link. My expected(ideal) result should be like this. What am I missing?

This is the page that I want to share.

like image 766
PythonEnthusiast Avatar asked Nov 24 '16 14:11

PythonEnthusiast


People also ask

How do you get thumbnails to show on Twitter?

Click on a video within your library to see the Select thumbnail button. You can either select a frame from the video itself, or upload an image file from your local computer. If uploading a custom thumbnail file from your computer, please ensure its aspect ratio is the same as your video content.

How do you change picture preview on Twitter?

To change the featured image in the social post, hover over the Twitter card and click Change to photo post. This allows you to select or edit other images associated with the content, replace the featured image with your own custom image, or remove the featured image altogether.

Why do some links not preview on Twitter?

The link preview is controlled by the author of the web page you're sharing, and by Facebook/Twitter/LinkedIn. The website author adds specific meta tags to the website, and Facebook/Twitter/LinkedIn depends on those meta tags in order to render the link preview.


1 Answers

I just checked your page in the Twitter Cards Validator and it indicates that the twitter:description field is missing. From what you've posted, it is there, but you've added additional content to it (property="og:description" itemprop="description") which means the Cards crawler is unable to parse it correctly. On top of that, I just checked your site, and the value of twitter:description is actually blank, so this will not work. I guess content="{{description}}" is returning a null value, so you should look into that as well.

like image 164
Andy Piper Avatar answered Oct 02 '22 15:10

Andy Piper