Search code examples
twitter

Sharing on Twitter does not show thumbnail of the image


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.


Solution

  • 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.