I am trying to get the summary with large image preview of the Twitter card on my website.
Website-link
But all I am getting is a small preview with no image
tweet-preview
This is the code section:
<!-- twitter-card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#SPEEDO">
<meta name="twitter:title" content="SPEEDO">
<meta name="twitter:description" content="SPEEDO is a web application that, in certain instances, analyses your internet connection's speed.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/ParamPragyan/SPEEDO/main/card.png">
I have tried resizing the image and altering the meta tags multiple times with no results.
Related
I'm trying to create a card for twitter but when I use Twitter Card Validator I get Unable to render Card preview with no errors.
My meta tags looks like this:
<meta property="og:title" content="Honey Drops NFT Calendar"/>
<meta property="og:description" content="List your NFT drops on Ethereum, Solana, Polygon, Near, BSC. Totally free! Never miss upcoming NFT event, drop or giveaway with Honey Drops."/>
<meta property="og:image" content="https://www.dropbox.com/s/d0itak8f29khy0d/LOGO%201.png"/>
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Honey Drops NFT Calendar"/>
<meta property="twitter:description" content="List your NFT drops on Ethereum, Solana, Polygon, Near, BSC. Totally free! Never miss upcoming NFT event, drop or giveaway with Honey Drops."/>
<meta property="twitter:image" content="https://www.dropbox.com/s/5adyp4i59z58o1a/twitter2.png"/>
What should I do?
I am trying to add a thumbnail when a user shares a page of my site. According to the documentation, it is necessary to define some parameters for the card i.e. image, title, description, etc. I am using the snippet on the page, however, when I share the card, my image does not show up.
This is my current <head>
<!-- Twitter open-graph tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="#twitter_user">
<meta name="twitter:site" content="#twitter_user">
<meta name="twitter:image:alt" content="Site name">
<meta name="twitter:image" content="https://examplesite.com/static/landing/img/img.png" />
<meta name="twitter:title" content="{% trans 'Site Title' %} - Site" />
<meta name="twitter:description" content="{% trans 'Site description' %}" />
<meta name="twitter:url" content="https://www.examplesite.com{% url path %}">
I am using the absolute path, i.e.: https://examplesite.com/img/img.png (adding my domain to load the image), also using the HTTPS protocol, with an image in PNG format of 80kb and 1200x630px.
When I want to validate my site with this tool, I get this result, in which the image is not visible and also, according to the log, not all the defined parameters are detected.
<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.
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.
I have a product which has 3 pages:
http://www.example.com/myproduct
http://www.example.com/myproduct/more
http://www.example.com/myproduct/images
I want to add a product twitter card:
<meta name="twitter:card" content="card">
<meta name="twitter:site" content="#mytwitter">
<meta name="twitter:title" content="My Product Title">
<meta name="twitter:description" content="Product Description goes here...">
<meta name="twitter:url" content="http://www.example.com/myproduct">
<meta name="twitter:image" content="http://www.example.com/product.jpg">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="PRICE">
<meta name="twitter:data2" content="San Franscisco, CA">
<meta name="twitter:label2" content="LOCATION">
What I want to achieve is that the product image, description, price, and location should be shown from all 3 pages when the user shares any of the pages.
My questions is how can I achieve this, and is it better to use <meta name="twitter:url" content="http://www.example.com/myproduct"> for all 3 pages, or use the canonical url of each page.
In order to display the same Product Card for any of the three pages of your product, all you have to do is simply making sure you provide the same markup tags on all of them.
In fact, you don't even have to specify any twitter:url tag in Twitter Cards. The URL the user will be redirected to when clicking is automatically the one that has been shared in the Tweet.