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.
Related
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/
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
I need to share images from web links with text to Twitter and LinkedIn.
I am able to add text, but I am not able to add images.
I am using Kentico CMS and I have written the web part transformation as below. But the image is not shown on the Twitter and LinkedIn plugins.
Attached here with the transformation below.
Added the Twitter and LinkedIn result without images.
Can any one guide me with sharing to Twitter and LinkedIn feeds with images?
Thanks
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://twitter.com/intent/tweet?url=<%=Server.UrlEncode(CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL)%>
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString())%>
&text=<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>"
onClick="return popup(this, 'notes')">
<img src="<%# Eval("twittericon") %>" alt="twitter icon" />
</a>
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.linkedin.com/shareArticle?url=<%=CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL%>
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString()) %> <%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("BlogDescription").ToString()%>" onClick="return popup(this, 'notes')">
<img src="<%# Eval("linkedicon") %>" alt="linked icon" />
</a>
First of all, I do not think Twitter and LinkedIn expose a way of sharing an image alongside the text just by adding a parameter to the share URL.
For Twitter, you could set up Cards, such as a Summary Card, and add meta tags to your website. By adding a twitter:image meta tag, you can tell Twitter which image to use.
Similar applies to LinkedIn - you would need to use Open Graph meta tags, as there is no way to provide an image as part of the share URL.
Regarding the transformation you wrote - make sure you are rendering the correct data, as using CMS.DocumentEngine.DocumentContext.CurrentDocument inside a transformation would retrieve data from the current document that is being viewed, as opposed to data of the repeated item. For rendering data of the repeated item, you can use the Eval method.
This:
<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>
Would become this:
<%#Eval("Title")%>
For all my sites I use a Head HTML Code webpart on the page template of the pages I want or need to have this Open Graph (OG) data on. Here's a sample of what I put in it to dynamically populate some of the data.
<meta property="og:site_name" content="Kehren Development - Kentico MVP & Experts" />
<meta property="og:url" content="{% CurrentDocument.AbsoluteURL #%}" />
<meta property="og:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{% BlogPostTitle %}" />
<meta property="og:description" content="{% StripTags(BlogPostSummary) %}" />
<meta property="article:publisher" content="https://www.facebook.com/bkehren" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% BlogPostTitle %}">
<meta name="twitter:site" content="#kehrendev">
<meta name="twitter:creator" content="#bkehren">
<meta name="twitter:description" content="{% StripTags(BlogPostSummary) %}">
<meta name="twitter:url" content="{% CurrentDocument.AbsoluteURL #%}">
<meta name="twitter:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg">
<meta name="twitter:domain" content="{%RootDocument.AbsoluteURL#%}">
This will be rendered on the page anytime a blog post is viewed. You can set these properties on the webpart to only display for those page types. There are other meta tags you can use or different fields you can set but this will get you started.
Now you can still use the share links you have but only populate the share link with the actual article link and maybe an encoded description, the OG tags will pickup the rest.
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 ?
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.