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'/>
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 have an error what I can't understood why with facebook meta...
This is the page: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmikrobusz-berles.com%2Fhir%2Fkedvezmenyek%2F2012-12-05%2Fteli_mikrobusz_berles_kedvezmenyesen_utazasi_iridaknak.html
This is my facebook meta.
<meta property="og:title" content="Téli mikrobusz bérlés kedvezményesen utazási iridáknak"/>
<meta property="og:image" content="http://mikrobusz-berles.com/upload/images/m1.png"/>
<meta property="og:site_name" content="mikrobusz-berles.com"/>
<meta property="og:description" content="<p>
A kedvezmény időtartama: 2012. Nov. 1-től 2013. Márc. 1-ig.<br />
<br />
Síutakat szervező utazási irodák jelentkezését várjuk partneri együttműködés céljából. A weboldalunkon feltüntetett áraknál is kedvezményesebb bérlési lehetpséget kínálunk, további részletekér vegye fel velünk a kapcsolatot!</p>
"/>
It's included between HEAD HEAD tags.. But facebook says :
Meta Tags
In Body: You have tags ouside of your . This is either because your
was malformed and they fell lower in the parse tree, or you
accidentally put your Open Graph tags in the wrong place. Either way
you need to fix it before the tags are usable.
What should I do? What's wrong?
the metatags should be on the <head> part of your site
apparently you don't have one
you can see what facebook sees on your site here
edit:
after looking in your page's source code - you don't have an opening <html> tag (right in the beginning of the page - after the DOCTYPE decleration
moreover - you have some junk printed in the start of the page, try removing it
THE PROBLEM:
I am trying, without much success, to implement open graph image on site: http://www.guarenty-group.com/cz/
The homepage is completeply bypassing the og:image tag, where internal pages are reading all images from the site and place og:image as the last option.
Other social networks are working fine on both internal pages and homepage.
THE CONFIGURATION:
I have no share buttons or alike, all I want is to be able to share the link via my profile.
The image is well over 300x300px: http://guarenty-group.com/img/gg_seal.png
Here is how my head tag looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guarenty Group : Pojištění pro nájemce a pronajímatelé</title>
<meta name="keywords" content="" />
<meta name="description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání." />
<meta name="image_src" content="http://guarenty-group.com/img/gg_seal.png" />
<meta name="image_url" content="http://guarenty-group.com/img/gg_seal.png" />
<meta property="og:title" content="Pojištění pro nájemce a pronajímatelé" />
<meta property="og:url" content="http://guarenty-group.com/cz/" />
<meta property="og:image" content="http://guarenty-group.com/img/gg_seal.png" />
<meta property="og:description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání [...]" />
...
</head>
THE TESTING RESULTS:
In order to trick the cache i have tested the site with http://www.guarenty-group.com/cz/?try=N, where I have changed the N every time. The strange thing is that images found for different value of N is different. Sometimes there is no image, sometimes there is 1, 2 or 3 images, but each time there is a different set of images.
But, in any case I could not find the image specified in the og:graph!
MY QUESTIONS:
https://developer.linkedin.com/documents/setting-display-tags-shares is saying one thing, and the personnel on the support forum is saying "over 300" Does anyone know What is the official minimum dimension of the image (both w and h)?
Can an image be too large?
Should I use the xmlns, should I not use xmlns or it doesn't matter?
What are the maximum (and minimum) lengths for og:title and og:description tags?
Any other suggestion is of course welcomed :)
Thanks in advance, cheers~
This answer I found on LinkedIn forums might be of help to you:
Guys, I've spent a whole day trying different things. What worked for
me is using the mata [sic] tags as following:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{Your content}" />
Just try to add prefix to every tag (not to html tag), then re-sign in
with your LI account to clear the cache...
Post your results.
I found this simple fix which worked for me after lots of complicated solutions which didn't work:
LinkedIn
The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.
This is done by adding a made-up parameter to the link. It doesn’t affect your webpage, but it does force the metadata to be re-fetched.
Example:
Original link: //beantin.se/consultant-resume
"New" link: //beantin.se/consultant-resume?1
I was having the same issue last night. Spent hours researching solutions and I tried the solutions recommended by others in this post but to no avail. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this actually worked.
All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what code to include, what is missing, and how to fix it.
Here is the website to use Post Inspector:
https://www.linkedin.com/post-inspector/
LinkedIn is also caching previews. If OpenGraph image was incorrectly cached at some point before, try defeating the cache with a query parameter on a shared link, e.g. https://your-website.com/?1.
Just a little late lol,
But I came across this exact issue, figured out that linkedIn was pulling the meta tags from the final landing page.
My website that i was trying to link to had an instant redirect, adding the og tags to the page where it was redirected to fixed the issue.
Make sure your og: tags are part of the head tag.
I ran into this recently, spent a huge amount of time working on it with all the types of solutions above. I was working with someone else's HTML and finally figured out that the html was simply missing the head tag, while it did have the closing tag for head.
Linked In is apparently not scanning page text for the og tags, but processing the page dom, and if the dom objects aren't properly coded, they won't process. If you have issues with unmatched tags or unclosed tags, this could be your issue if everything else is not working.
I did not need to add prefix to the meta tags or add og image height and width tags once the html was fixed. Linked In processed it fine once the html was fixed.
If you don’t want to add a fake query string parameter to your LinkedIn URLs—as suggested in e.g., #Kym's answer—a simple solution is just to sign out and then sign back in.
For me solution was to put all the <meta> tags (without prefix) inside <head> tag.
For other social networks like Facebook, Twitter or Google you don't even need to have <head> tag. (because it it optional in HTML5 specs)
PS. There is a new nice way for testing <meta> tags on your website: https://metatags.io/
After researching for a day, I found that meta tag with attribute property should be used instead of name.
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
Ref: https://ogp.me/
In my case I did exactly this and it worked fine (on my page of course).
Put these four lines in the head:
<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">
BUT, pay attention that if you have more than one head in your page, these lines need to be inserted in the first head otherwise it will not work.
I also had prefix="og: http://ogp.me/ns#” in the html
I got it finally working by adding the full image path:
<meta name="image" property="og:image" content="https://hasan.life/images/preview.png">
This is worked for me.
Somehow this problem happens if you don't set your open graph tags properly.
Instead of this:
<meta name="image" property="og:image" content="{content}" />
Try this:
<meta name="image" property="og:image" content="{content}" />
<meta property="og:image:secure_url" content="{content}" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />
I've tried for more than half an hour and I found this one which worked 100% correctly
Source: https://www.linkedin.com/help/linkedin/answer/a521928/making-your-website-shareable-on-linkedin?lang=en
• You can also check your Open graph credentials on https://www.opengraph.xyz/
<meta name="title" property="og:title" content="Enter your title here">
<meta property="og:type" content="Enter any tyoe like Article or Website">
<meta name="description" property="og:description" content="Enter description here">
<meta name="image" property="og:image" content="Enter image URL here">
<meta property='og:url' content='Enter website URL here'/>
I have followed every single piece of advice I have found to try to get this to work but all of it has been to no avail. Can someone tell me why my description/thumbnail doesn't show up? Thanks. Below is my code and the link to the site:
Meta Tags:
<meta name="title" content="La Vita è Bella, because life is beautiful" />
<meta name="description" content="Drawing on Italy’s most famous export – great-tasting, healthy, colourful food – La Vita é Bella brings families together to experience mealtimes the Italian way." />
<link rel="image_src" href="http://www.lavitaebella.co.uk/images/imageforfacebook.jpg" />
Actual Link:
<img src='../images/share/s-fb.png' />
http://www.lavitaebella.co.uk/
Thanks in advance for any help.
--2nd EDIT--
Please note that this answer doesn't work any more and is out of date. Please try the above answer.
-- ORIGINAL ANSWER--
Got it sorted. Had to use a url that is chock full of craziness:
<img src='../images/share/s-fb.png' />
--EDIT--
As some extra information, I can't remember where I originally found this information but here's what the s=100 part means:
The basic approach is you are providing a link to http://www.facebook.com/sharer.php?s=100 which is the basic share page (typically this is shown in a popup).
But I tried changing the numbers and it still goes to the same place.
As for the &p, it's just html code for &p and I think this is the array that Facebook dissects to get at the information.
To those (like me) for whom the other answer did not work:
In the <head> and </head>section, add
<meta property="og:url" content="https://www.mathnuggets.com/" />
<meta property="og:image" content="https://www.mathnuggets.com/images/fb-logo.jpg" />
<meta property="og:title" content="Math website for your gifted student" />
<meta property="og:description" content="Challenging word problems for gifted elementary students" />`
Then go to FB Linter and enter your URL there to refresh FB's cache of your page.
^^^ Refreshing the cache is important.