Over the last weekend, I installed Twitter Cards on my Blogger blog, however, when I post a link to a post on Twitter, the preview image seems a bit blurry.
https://twitter.com/DailyNickNews/status/986395296350527488
https://twitter.com/DailyNickNews/status/986395007216209920
https://twitter.com/DailyNickNews/status/986394831470637056
When I open the image in a new tab, I get a URL such as
https://pbs.twimg.com/card_img/986394838189924352/9Nw874O_?format=jpg&name=600x314
However, the actual image size displayed is much smaller. In the above example, the image is 392x205.
The code I’m using is:
<b:comment> Twitter Cards for Blogger XML </b:comment>
<meta expr:content='data:view.featuredlmage ? "summary_large_image": "summary"' name='twitter:card'/>
<meta content='https://4.bp.blogspot.com/-qANmiWyhUFg/WtPAtPo65NI/AAAAAAAA5Yw/CJoYJyvpUKMrKEGHxtj0vTLS_x9AJWyDQCLcBGAs/sl600/nickelodeon-logo-nick.png' property='og:image/>
<meta content='# Daily NickNews' name='twitter:site'/>
<meta content='# Daily NickNews' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl.canonical' name='twitter:domain'/>
<meta expr:content='data:view.url.canonical' name='twitter:url'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription ? data:view.description : ""' name='twitter:description'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredlmage' name='twitter:image:src'/>
</b:if>
I’m a novice at Twitter Cards and have no idea what to change. The top META tag already says ‘summary_large_image’.
I've tried changing the value of the last META tag to twitter:image from twitter:image:src, however, nothing changed.
The issue is with the data tag data:view.featuredlmage which picks up the image size as set via the post editor. To make sure that the image size picked up by Twitter is always the largest, modify the code as follows -
<meta expr:content='resizeImage(data:blog.postImageUrl,1600)' name='twitter:image:src'/>
Related
I saw a lot or request about rich link preview in Telegram, but this is specifically about "how to get a BIG/LARGE image" in the preview.
Let's take this article on my site as example. It already has all of the OGs:
<meta property="og:title" content="Questa settimana su TLI (08 dicembre 2018)" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://turbolab.it/immagini/12483/max" />
<meta property="og:url" content="https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812" />
<meta property="og:description" content="Non hai tempo di leggerci tutti i giorni? nessun problema! ecco a te il riepilogo di quanto proposto da TurboLab.it nel corso della settimana in conclusione." />
<meta property="og:locale" content="it_IT" />
<meta property="og:site_name" content="turbolab.it" />
Result: it works when the link is posted on Telegram, but the image is small and floated right even if the og:image (this) is 1000 px wide. I'd like to have it big, on it's own line.
Check this out (first entry is my site, the one I want to fix: note the small image, floated right. 2nd and 3rd is the result I want as shown by a YouTube video and a Mashable article).
The 3 URLs used in the image above are:
https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812
https://www.youtube.com/watch?v=y6eHY537Cao
https://mashable.com/article/xiaomi-48-megapixel-camera/?europe=true&utm_cid=hp-r-1#cR2kG7X_naqO
richpreview.com isn't helpful, because it preview the image as "small" on all of the theree (one, two, three).
Strange thing is: it works as expected on Facebook. There, I get big, wide images. It's perfect on Twitter too.
What am I missing?
Adding twitter meta tags fixed the issue for me
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{IMAGE URL}" />
Telegram bases its preview images on Twitter sharing cards markup. You're missing the summary_large_image content. You need to add the following in addition to what you have:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://turbolab.it/immagini/12483/max">
Once you've updated your markup, paste the share link in to Telegram's Webpage Bot and choose Update Preview to clear Telegram's image cache and view the enlarged image.
Consult Summary Card with Large Image on Twitter Developers for more info.
To further enrich your results with large images you could also create a Telegram Instant View. Note however Instant Views only appear for designated templates chosen by Telegram itself.
Example custom Instant View Template:
# enable for items in the post section
?path: /post/.+
# define required elements
title: //*[#itemprop="headline"]
body: //*[#itemprop="articleBody"]
# if cover exists, define images
?exists: //head/meta[#property="og:image"]/#content
cover: //head/meta[#property="og:image"]/#content
image_url: $cover/self::img/#src
Example meta tag for to allow joins to your channel from the Instant View:
<meta property="telegram_channel" content="turbolabit">
You may lose some visibility of your visitor metrics but your users will have a better experience reading and enjoying your site from within Telegram which translates into brand recognition.
You're missing the Open Graph protocol prefix-attribute in your html tag:
<html prefix="og: http://ogp.me/ns#">
Learn more about the Open Graph protocol at ogp.me.
I've been working on a blog (blogger) for a friend, and she want's the shared posts to show the post title and not the blog title... How can I accomplish this?
I've already tried to delete the title tag...
<meta property="og:title"/>
But the result is the same... What line of code should i delete or add?
Now, I only have this 4 lines of og code
<meta content='http://lostinthegoodlife.blogspot.com/' property='og:url'/>
<meta content='http://3.bp.blogspot.com/-rVflDp3_oW8/VajTpnLQAxI/AAAAAAAAAig/stX7spBEFts/s320/rita2.jpg?t=12345?' property='og:image'/>
<meta content='567' property='og:image:width'/>
<meta content='567' property='og:image:height'/>
It's my first time editing code on blogger and i'm not really familiarized whit it... So could anybody help?
Step 1: Ensuring correct title of the article
Go to your template editor and paste this(Make necessary changes where applicable in the below code)
<b:if cond='data:blog.url == "http://www.YOOURBLOG.BLOGSPOT.COM/2014/12/YOUR ARTICLE URL.html"'>
<meta content='Can you guess what do these World Maps Indicate ?' property='og:title'/>
<meta content='http://www.YOOURBLOG.BLOGSPOT.COM/2014/12/YOUR ARTICLE URL.html' property='og:url'/>
<meta content='The Best thing on the Internet,today!' property='og:description'/>
<meta content='https://lh5.googleusercontent.com/-XO6XJlYyh6M/VbONBkKs8CI/AAAAAAAANbk/Dt-wbrYGSwY/w1200-h628-no/map%2Bquiz.jpg' property='og:image'/>
</b:if>
Step 2: Ensuring FB cache is cleared
Go to
https://developers.facebook.com/tools/debug/
Click on debug
Then click on Fetch New scrape information.
Linkedin show different 3 image when trying to share. Here is then head tags
<meta property="og:site_name" content="OkyTalk">
<meta property="og:title" content="OkyTalk ">
<meta property="og:type" content="website">
<meta property="og:url" content="https://okytalk.com/teachers/profile/displayProffesional">
<meta property="og:image" content="https://okytalk.com/media/okytalk/img/share.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="470">
<meta property="og:image:height" content="246">
Any Ideas how to show only one ? Others share(facebook, twitter, google+) works fine.
Things certainly have changed since 2015! For instance, the entire company of LinkedIn has been bought by Microsoft, and almost all the old documentation for LinkedIn on LinkedIn.com just 404's. I'm going to post in case others still have this problem.
To quote from the Microsoft LinkedIn Share Documentation, you want your share URL actually to be...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Your og: tags appear to be correct, and they should be properly interpreted today, in 2020. It seems that they were only officially supported in 2017, two years after your question. Take a look at the LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn. These should work...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Don't forget, once you're all coded and done, you can test your page! Take the URL of your site (example.com, not linkedin.com/share?site=example.com), and input it into the LinkedIn Post Inspector.
Here's an online demo I created with 20+ share services (100% no monetary income, it is designed as a test site). Take a look at the source code, and see how it's making the LinkedIn URL work with og: tags.
Hope all this info helps someone!
LinkedIn are picking up the images in the img tag for some reason unlike Facebook etc.
The workaround is to change the images in the img tags on the page you are sharing to set the images in CSS and change to img tag to a div.
Add a style like:
#howitworksstudent{
background: url(https://okytalk.com/media/okytalk/img/how-it-works-student.png);
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
and change your img tag to:
<div id="howitworksstudent"/>
Not ideal but gets you around the problem. I have tested this and was able to recreate your initial issue so I know it works.
Hope that helps.
I am working on a new site ATM which features a traditional image + div with post text structure. When a user adds a link to this site in a Facebook status update, Facebook only shows the link and no text or image from the site. Know I would like to know which content Facebook loads from a site if a user added a link to a status message? Which html tags are selected and how can I change my HTML so that an preview image and text is loaded by Facebook.
Other website:
My website:
Better late than never...
It's in the Facebook documentation:
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the element in your HTML code. If you don't tag your page, Facebook Share will grab the title of your page as specified in the tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the element in your page:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
So an example news story could have the following:
<meta property="og:title" content="Smith hails 'unique' Wable legacy"/>
<meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.
The title and description tags are the minimum requirements for any preview, so make sure to include these two.
The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.
I'm having a problem with my facebook like button and the webpage. The webpage contains banners and random images as well as the article image, now facebook have removed the share button, though it still works, but with the current like button. Facebook chooses the image automatically, and sometimes it chooses the banners instead of the article image. Is there any alternate way instead of adding properties to the article images? Like exculding all the images but the article image.
This answer isn't necessarily helpful for "excluding" specific images, but you can control what Facebook scrapes off of your page via Open Graph protocol with meta tags. For example:
<meta property="og:title" content="This is my title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.mysite.com/redirect/" />
<meta property="og:image" content="http://www.mysite.com/logo.jpg" />
<meta property="og:site_name" content="I'm on Facebook!" />
<meta property="og:description" content="Hello World!" />
This will force Facebook to reference http://www.mysite.com/logo.jpg to use as thumbnail.
Additionally, my blog post on the related subject matter might help you: http://weblogs.asp.net/kon/archive/2011/06/07/trick-facebook-scrapping-of-facebook-tab-url.aspx
I had the same problem. Kon has a good suggestion, but I'd rather have Facebook use the article image and not the logo, so what I did is put all logos and ad banners as background-image through CSS.
Something like this:
<span style="background-image: url('IMAGE OF AD'); width:Xpx; height:Xpx; display:block;"></span>