I read these 2 doc pages: summary and
summary-card-with-large-image, but I don't really see the difference.
Example:
<meta name="twitter:card" content="summary" /> <!-- or summary_large_image -->
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
What is the actual difference betwen both at the end? The rendering looks identical:
You're quite right and I'll make a note to update these documentation pages. A summary card usually has a small image on the left of the text in the timeline - this variance in the docs may be the result of using embedded Tweets. Both examples in the documentation show what I'd expect a summary card with large image to render as.
As suggested by #AndyPiper, this is probably a documentation problem. Here is the result of a content="summary", screenshot from Twitter in Chrome browser (desktop):
Related
I wonder how to get the summary card (shown below) using Tweepy?
Thanks.
Dan
the summary card is shown in the circle
The Twitter Card is generated by Twitter when a Tweet (or a Direct Message) includes a URL.
Using Tweepy you can get the content of the Tweet including the URL, in both the t.co form (used by Twitter) and the original one:
'urls': [{'url': 'twitter tiny url', 'expanded_url': 'https://www.example.com',
In order to be able to generate the Twitter Card preview the web page must include specific META tag
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#beppecatanese" />
<meta name="twitter:title" content="My GitHub space" />
<meta name="twitter:description" content="View my GitHub space." />
<meta name="twitter:image" content="https://github.com/gcatanese" />
The Twitter Card is not always correctly generated, I am explaining this here if you are interested
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#nytimes">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - Thenter code heree guest list and parade of limousines with celebrities emerging from them seemed more suited ">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
I have used all the above meta tags, but still the image appears only as a summary card rather than displaying a summary card with large image.
I've been testing your code on a test page, html only. Everything worked fine for me. Here is also the Tweet generated with only the meta tags inside.
Looks to me more, there are other problems inside the html that might cause wrong interpretation of your meta tags.
The Card validator is displaying my summary card correctly, however, when I actually try to share it buy clicking the "twitter-share-button" it does not display a twitter card, it only shows a regular tweet.
This what the validator says:
Your site is whitelisted for summary_large_image card
INFO: Page fetched successfully INFO: 18 metatags were found INFO:
twitter:card = summary_large_image tag found INFO: Card loaded
successfully
These are the tags I'm using:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#username">
<meta name="twitter:creator" content="#username">
<meta name="twitter:title" content="Some Title">
<meta name="twitter:description" content="Some description.">
<meta name="twitter:image" content="http://example.com/images/dog.jpg">
This is the html:
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Testing Testing Testing">
Tweet</a>
For anyone strugling with tyhe same issue, I'm responding to my own question.
Here's what I found out:
1. First off, keep in mind that the card only shows in the final posted Tweet - not in the Tweet composer window. However, in my case, it wasn't showing in the final posted tweet either.
2. You have to include the link to the page you want to share after the text parameter. Additionally you need to encode its URL value. So, instead of text=http://example.com use text=http%3A%2F%2Fexample.com. If you go to http://www.w3schools.com/tags/ref_urlencode.asp you can make this encoding convertion automaticaly.
3. I've been told that sometimes there is a delay as twitter's crawler caches your site, which would explain why the card doesn't show in the final posted tweet in your fist attempts to share it. In my case it took 48 hours, after which, clicking the share button will post the card immediately.
Hope this my be helpful to someone else...
This is the current twitter card data I have inside <head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#tradukka">
<meta name="twitter:title" content="Currency exchange: United States Dollar (USD) - Argentine Peso (ARS)">
<meta name="twitter:description" content="Currencies exchange updated in real time: United States Dollar (USD) - Argentine Peso (ARS) / 1 USD...">
<meta name="twitter:image" content="http://tradukka.com/meta/359ac65be829e896c12a3126fa9c71d0.jpg">
<meta name="twitter:image:width" content="750">
<meta name="twitter:image:height" content="370">
<meta name="twitter:url" content="http://tradukka.com/currency/usd/ars">
If I send a tweet with that link, all the information is being shown in the tweet, except the image:
I also tried using the card validator:
...it fetches everything except the image.
Also, I already tried using twitter:image:src as well. The domain is whitelisted. Any ideas on why the image is not being displayed inside the tweet?
The issue was caused by robots.txt. Make sure that the twitter bot is allowed to crawl the directory containing the twitter images (in this case, /meta).
I am also facing the same problem.
The solution is just switching from summary card with large image to summary.
To apply this you have to edit the script
"meta content='summary_large_image' name='twitter:card'"
as
"meta content='summary' name='twitter:card'"
This solves the problem, but I don't know why the large image type cards are not working.
Looking to set up a Twitter product card integrated through Shopify -- while the product info is populating in the validator preview and the got confirmation that the card was approved, there is no next step available. The help article that shopify provided instructs to use "catalog view" as next step however I haven't been able to access. Any insights?
https://docs.shopify.com/manual/configuration/store-customization/social-media/twitter/taking-advantage-of-twitter-cards
EDIT: If you're already able to view the proper card in the validator tool, then all that's left is to tweet out a link and see if it works!
--
It looks like Twitter has changed their Card Application & Validation pages since that Shopify article was written.
According to https://dev.twitter.com/cards/types/product, just copy and paste this code into your twitter-card snippet, and update it with your information.
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="#iHeartRadio">
<meta name="twitter:creator" content="#iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">
Once you've done that, you can go back to the Validator Page (https://cards-dev.twitter.com/validator) to check that everything works the way it should.