It appears that Facebook and LinkedIn have differing standards for the og:image.
On Facebook they advise that the image should be at least 200 x 200 pixels (square) see here
However LinkedIn advise 180 x 110 pixels (rectangular) see here
Is there a way to target an og:image to either Facebook or LinkedIn seperately? What's the best way of doing this?
I'm trying to create a default thumbnail for the website home page which will let users share the home page in a nice manner. At the moment LinkedIn is cropping my og:image though Facebook and Google+ are sharing it nicely.
This ought to do it.
<meta property="og:image" content="image-180x110.jpg" /> <!-- 180x110 Image for Linkedin -->
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />
<meta property="og:image" content="image-200x200.jpg" /> <!-- 200x200 Image for Facebook -->
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
Depending on the server environment something like this may work.
<meta property="og:image" content="<?php echo(strpos($_SERVER['HTTP_USER_AGENT'],'LinkedInBot') !== false ? 'image-180x110.jpg' : 'image-200x200.jpg'); ?>" />
Related
I am adding open graph and twitter meta tags to my site. At first I did this:
<meta property="og:image" content="${pdict.category.image.absURL}" />
<meta name="twitter:image" content="${pdict.category.image.absURL}" />
Then I tried consolidating the tags to this:
<meta property="og:image" name="twitter:image" content="${pdict.category.image.absURL}" />
Twitter had no warnings, FB told me I was missing the og:image property, however it still previewed as I would expect in both. Is there any reason why I should not do this?
I already have the social-share button for whatsapp on my webpage, but when you choose a contact to send, it only writes "title_content url" on the writing box. It seams that whatsapp doesn't see the meta tags of the webpage to create a nice box with the image, title and description.
I am using the following open-Graph meta tags and it is working fine with facebook social sharing:
<meta property="og:type" content="website" />
<meta property="og:title" content="{{event.name}}" />
<meta property="og:description" content="{{eventDescription event.information}}" />
<meta property="og:url" content="{{eventUrl url}}" />
<meta property="og:image" content="{{eventImage event}}" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="fb:app_id" content="#####" />
I do not have a icon for my event, so I can't set up the tag:
<link rel="shortcut icon" href="###.ico" type="image/x-icon">
I tried to set it with a .png image but it didn't work. So, what else can I do to whatsapp see my website and render that box with the image, title and description?
I just found out what was happening. When you try to feed information to facebook or twitter crawlers you need a special way to do it. So you have to create a crawler route with filter and dynamic content (as you can see on this tutorial that i created: Tutorial ).
With whatsapp you don't need to worry about server side rendering. When I created my open-graph meta tags direct on the <head>.
Eddited:
Because I need meta tags that work dynamically, I had to stop using direct on the <head>. But the docHead() or any of the packages were not working for me. So I realised that whatsapp can work from server side and use the same og: tags that I already have for facebook.
I just needed to find its user-agent that is WhatsApp/2.17.107 A and add the permition like I did for the other ones on the server side route.
I can't understand why Facebook sharer keeps showing the wrong article's author when sharing articles of my website. (Of course I always use Facebook Debugger before sharing).
Take this article as an example: although it is clearly written by Francesca Aloisio, it keeps showing (when shared) "by Virginia Vigliar".
Facebook Debugger reports:
<meta property="article:publisher" content="https://www.facebook.com/wordsinthebucket" />
<meta property="article:author" content="https://www.facebook.com/francesca.aloisio.397" />
I just can't figure out why.
N.B. I use Wordpress SEO by Yoast.
Why are you having the og values defined twice?
Have a look at below (line 23 to line 47):
<!--Facebook Open Graph-->
<!--FB page title-->
<meta property="og:title" content="Indonesia Makes a Sharp U-turn on Virginity Tests" />
<!--FB description-->
<meta property="og:description" content="Most students in the world may think that in order to get their high school diploma they would have to meet certain requirements: good grades, good attitude towards school, good relationship with teac..."/>
<!--FB url-->
<meta property="og:url" content="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests"/>
<!--FB image-->
<meta property="og:image" content="http://wordsinthebucket.com/wp-content/uploads/2015/02/indonesia-exam.jpg" />
<!--FB type-->
<meta property="og:type" content="article"/>
<!--FB site name-->
<meta property="og:site_name" content="Words in the Bucket"/>
<!-- This site is optimized with the Yoast SEO plugin v2.3.5 - https://yoast.com/wordpress/plugins/seo/ -->
<title>Indonesia Makes a Sharp U-turn on Virginity Tests</title>
<meta name="description" content="Indonesian officials were forced to take a step back on their proposal of introducing virginity tests for high schoolgirls."/>
<link rel="canonical" href="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests" />
<link rel="publisher" href="https://plus.google.com/+WiBTeam/about"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Indonesia Makes a Sharp U-turn on Virginity Tests" />
<meta property="og:description" content="Indonesian officials were forced to take a step back on their proposal of introducing virginity tests for high schoolgirls." />
<meta property="og:url" content="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests" />
<meta property="og:site_name" content="Words in the Bucket" />
Remove either one of them, because this is causing the FB Debugger to show that:
Try adding
<meta name="author" content="[THE_AUTHOR_HERE]">
also plus removing the duplication and then going here: https://developers.facebook.com/tools/debug/og/object/ insert the url and press "fetch new scrape information" and see if that fixes it.
First of all: thank you all for your replies. However in the meanwhile I changed my theme cause I realized that it was an issue related to my previous one: it had a "top post" part at the very beginning of the page and the first post showed in there was seen by the FB sharer as the meta "source".
Regarding the double og values, thank for noticing. My actual theme appearently has its own "SEO". So I just removed it from the header.php file and keep YOAST SEO doing the job.
It seems that Facebook will not allow a music:song to have a og:url that is useful. As a result the link that shows up in a users timeline is dead.
I have even tried making the og:url be equal to the object page(shown below). Basically it is a failing page when called.
Is this due to the whitelist issue?
Or am I missing something in the documentation? How can I make that link that is in the timeline useful? "User listened to track on our Radio." track needs to be a valid link or not shown as a link. User,track and Radio are all made into links by default. Only the track is bad. It links to the facebook_object_page.
<meta property="fb:app_id" content="OurId" />
<meta property="og:type" content="music.song" />
<meta property="og:url" content="https://mysite/facebook_object_page.php?artist=<?php echo $_GET['artist'];?>&product_id=<?php echo $_POST['product_id']; ?>" />
<meta property="og:title" content="<?php echo $_GET['artist'];?>" />
<meta property="og:image" content="http://mysite/images/product_images/products_150/<?php echo $_POST['product_id'];?>.jpg" />
This is a weird problem, never faced before & hope I'll never face it again. Our website worldocricket.com is running on wordpress. Its related to news website so we are using social plugins like facebook's like & twitter's tweet buttons etc..
We created some new pages on our site, they are outside of the wordpress folder but on the same domain & are are connected with wordpress using [wp-load.php]. They all are working fine but when we tried to create facebook like button for one of our new pages; using fb developers tool (like button creator) www.developers.facebook.com/docs/reference/plugins/like/ , it spoiled our lunch.
On adding page url " wwww.worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php " in 'URL to Like' box, it showed like counts in preview, on clicking 'like' & 'send' buttons, it revealed that it is liking/sending the main url of the site ( www.worldocricket.com ) which we don't want to, the url we added (or we want to be shared) was different. I thought that was a temporary problem but even after 24-36 hrs we got the same results.
We added og:title / og:type / og:url / og:image in the header after googling.
<meta property=”og:title” content=”ACC Asia Cup 2012”/>
<meta property="og:url" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php" />
<meta property=”og:site_name” content=”World Of Cricket”/>
<meta property="og:image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg"/>
But it also proved to be useless. We then used fb debugger ( www.developers.facebook.com/tools/debug ), it showed that it is fetching right url but there is wrong Canonical URL. So we used <link rel="canonical" href="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php"> but the result was same. :/
Our website : http://worldocricket.com
We want like button on http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php
Question is : How to get facebook social plugins (like , share , send) working correctly on our site's respective page?
According to the debugger, when the crawler reaches http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php it's finding multiple og:url tags, I've verified this in curl:
<meta property="og:title" content="ACC Asia Cup 2012"/>
<meta property="og:site_name" content="World Of Cricket"/>
<meta property="og:url" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php" />
<meta property="og:image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg"/>
<meta itemprop="name" content="ACC Asia Cup 2012">
<meta itemprop="description" content="Best Cricketing event in Asia organized by Asian Cricket Council (ACC).">
<meta itemprop="image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg">
<meta name="generator" content="WordPress 3.3.1" />
<meta property="og:title" content=""/>
<meta property="og:type" content="article"/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content="World Of Cricket"/>
<meta property="fb:admins" content="1789905767"/>
<meta property='og:site_name' content='World Of Cricket' />
<meta property='fb:app_id' content='189072694472072' />
<meta property='og:locale' content='en_US' />
Make sure you're only returning one set of tags and they're valid