Twitter Product Card - Multiple Pages - twitter

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.

Related

Twitter card image doesn't show up

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?

Twitter is not showing thumbnail for my page

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.

Product image did not render when sharing link of product on Twitter first time

The product share on Twitter for the first time not render the product image.
I have set the <meta> tag with og:image value.
But twitter not show this image first time.
I have code below meta tags.
<meta name="twitter:card" content='summary_large_image'>
<meta property="og:image" content="https://www.example.org/image.jpg">
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
Try adding something like this:
<meta name="twitter:image" content="http://euro-travel-example.com/thumbnail.jpg">
More details here: https://css-tricks.com/essential-meta-tags-social-media/
Also, you can use this to preview your twitter card: https://www.bannerbear.com/tools/twitter-card-preview-tool/

Twitter summary card with large image not working

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

Twitter product card next steps after validation

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.

Resources