I am using addthis toolbar in my website,
And when I click tweet on it, it shares a link of the image I am looking at.
I want to tweet the image itself,
The image is dynamic - not a static one
and i've put a meta tag in the head of the page
<meta property="og:title" content="Daily Puzzle 08/24/2014 | Chess Puzzle 144 | NA - Zukertort, London 1872 | TheRookBook.com" />
<meta property="og:description" content="<p>Zokertort wins by a wonderful sacrifice and a sequence of right check moves.</p>" />
<meta property="og:image" content="https://www.therookbook.com/images/viewboard.png?id=144"/> <----this
<meta property="og:url" content="https://www.therookbook.com/viewboard.jsp?id=144"/>
<meta property="og:type" content="article" />
is this possible ?
Related
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.
I use shortcodes on my WordPress site to help display reference information from my articles from a BibTeX file. For example, the article information at the top of my post is generated this way, using a shortcode of the form [bibtex key="id"], where id is the reference id in the BibTeX file. I am using the papercite plugin.
When I tweet this post, however, using the URL above, what I get instead is the shortcode text itself, instead of the shortcode output. See:
https://twitter.com/JDHamkins/status/1306124193357074433
Why is Twitter using the shortcode text here, and how to I get it to use the output text instead?
If you look at the source HTML, it has the lines
<!-- Jetpack Open Graph Tags -->
...
<meta property="og:description" content="[bibtex key=”HamkinsSolberg:Categorical-large-cardinals”]" />
...
<!-- End Jetpack Open Graph Tags -->
So it looks like the Jetpack WP plugin doesn't process the shortcodes.
I'd suggest to add an introductory sentence at the top of the post, before the [bibtex] line. Like maybe a 1-sentence summary of the abstract?
Update: Apparently the Yoast SEO Plugin can be used to solve the issue, see https://randomneuronsfiring.com/jetpack-publicize-setting-the-image-and-text-shown-on-twitter-and-facebook/
It will be because Twitter uses the <meta property="og:..."> tags in the header rather than using the page text:
<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Categorical large cardinals and the tension between categoricity and set-theoretic reflection" />
<meta property="og:url" content="http://jdh.hamkins.org/categorical-large-cardinals/" />
<meta property="og:description" content="[bibtex key=”HamkinsSolberg:Categorical-large-cardinals”]" />
<meta property="article:published_time" content="2020-09-16T06:50:00+00:00" />
<meta property="article:modified_time" content="2020-09-16T06:50:04+00:00" />
<meta property="og:site_name" content="Joel David Hamkins" />
<meta property="og:image" content="http://jdh.hamkins.org/wp-content/uploads/Categorical-cardinals-Venn-diagram.jpg" />
<meta property="og:image:width" content="504" />
<meta property="og:image:height" content="306" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:site" content="#JDHamkins" />
<meta name="twitter:text:title" content="Categorical large cardinals and the tension between categoricity and set-theoretic reflection" />
<meta name="twitter:card" content="summary" />
JetPack offer some help — https://jetpack.com/tag/open-graph/ — on how to manually alter what their open graph plugin does, but it may take some work
Some website retrieved information in telegram when send link and some website doesn't like this:
So my question is there any structure for website to load information in telegram ?
The Open Graph protocol enables any web page to become a rich object in a social graph like Facebook, twitter, telegram, Skype and ...
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Simply use meta tag with name description:
<head>
<meta name='description' content="some content"/>
</head>
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.
Here are the meta tags for twitter cards :
<meta name="twitter:card" content="gallery">
<meta name="twitter:site" content="#site_creator">
<meta name="twitter:creator" content="#site_creator">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:image0:src" content="http://placekitten.com/200/200">
<meta name="twitter:image1:src" content="http://placekitten.com/300/300">
<meta name="twitter:image2:src" content="http://placekitten.com/350/350">
<meta name="twitter:image3:src" content="http://placekitten.com/150/150">
<meta name="twitter:domain" content="YourDomain.com">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine">
<meta name="twitter:app:name:googleplay" content="Vine">
<meta name="twitter:app:url:iphone" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:ipad" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:googleplay" content="http://vine.co/v/93582sxlkjf">
<meta name="twitter:app:id:iphone" content="id592447445">
<meta name="twitter:app:id:ipad" content="id432984038404">
<meta name="twitter:app:id:googleplay" content="co.vine.android">>
If I do not place following meta tags , gallery card does not work.
<meta name="twitter:image2:src" content="http://placekitten.com/350/350">
<meta name="twitter:image3:src" content="http://placekitten.com/150/150">
I need to place two images only, Can you please help me to solve this ?
Thanks in advance.
Did you try to fake it out by providing place holders with either an empty content link (content="") or else linking to images that are really tiny (like 1x1 pixel or something)?
Gallery Card was deprecated on July 3, 2015 and has been mapped to the Summary Card with Large Image.