open graph images - best dimensions for linkedin/ facebook etc. ?

i am nearly finished with the social sharing plugin for elgg that i am coding.

one of the remaining issues to be fixed is to ensure that the metatag for open graph images is inserted in a way that the recipient sites can use. this though, is not as simple as i imagined.

facebook provides a debugging page for opengraph data here:
https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fwww.infiniteeureka.com%2F

as you can see that the debugging data for my site's homepage says:

Provided og:image is not big enough. Please use an image that's at least 200x200 px.

except that the image i am using IS larger than 200x200.

then, when i looked at linkedin's advice page for this issue here: https://developer.linkedin.com/documents/setting-display-tags-shares

they say that: LinkedIn Today requires images to be at least 80 x 150 pixels.

Note: Facebook also uses Open Graph tags, but does not require og:image sizes as large as LinkedIn. If you use the image size required by LinkedIn Today, the image is scaled down to work for Facebook.

Tips: A few suggestions that'll help with the image quality. When presented in the feed, the image, regardless of what you've uploaded is always sized 180x110. Our algorithm crops the image too. So, the original image -

  • Should be smaller than 180x110

so there is contradiction here.

i am unclear on how to correctly size the images.

in addition to this - i discovered that we need to use a seperate image tag if our site is an https site:

http://ogp.me/#structured

og:image:secure_url is to be used in place of og:image

so.. i did that.. and still my chosen images are being rejected and not used by google+ and facebook.. the only error message i have seen is the facebook debug page message about the image size. so.. 
anyone know how to resolve this?

thanks

 
  • Below code works fine for posting avatars as the image in FB, linkedin and Google+. A bit trouble with LinkedIN  since they do not use square images, as you mentioned and ELGG avatars are mostly squared.
     
    It gets even more complicated if you want to use content specific images, like you can do with video and photos. Then you need some different code. For youtube it is fairly simple, check a page of a video and see what the og:image is for a specific video. With photos (tidypics) could be hard since there is no standard output defined.
    Even if you would differentiate LinkedIn images from the rest with a different metatag. How do you determine how to crop an existing image. Only a human can see if it really is suitable and not some chopped of head.
     
    <meta property="og:image" content="<?php if(($user->name) && ($context != 'index')) {
       echo $user->getIconURL('large');
       } else {
       $mainpage_image = elgg_get_plugin_setting("mainpage_image","metatags");
       echo elgg_get_site_url() . "_graphics/". $mainpage_image;
       }
       ?>" />
  • i have already coded support for the various entity types in elgg and they are all working ok - see this tidypics image here:
    https://www.infiniteeureka.com/photos/image/6346/feeling-real-emotional-energy

    if you share to facebook or other sites (that support shared images) the correct images are located.

    e.g. https://www.facebook.com/sharer/sharer.php?u=https://www.infiniteeureka.com/photos/image/6346/feeling-real-emotional-energy


    the issue is that for some other images (such as my site logo - the image is rejected for unknown reasons):
    e.g. https://www.facebook.com/sharer/sharer.php?u=https://www.infiniteeureka.com/

    i haven't noticed any problem with the dimension ratios yet (non-square / square images) - but i have not yet tested extensively.

  • Hmm, the easy part should be the site logo, since you are in control of the dimensions. I have no problem with that. I do like you code where it takes content specific dimensions into the tag !

    Posting medium or tiny images to LinkedIN is also not working since medium is 100x100 and that does not fit 80x150. You can resize with any dimensions you want , but that does not guarantee it still looks proper.

     

  • before i added this plugin my site logo was being displayed on facebook ok (although, of course, the site logo was being used for all pages - whereas now the more context appropriate images  are used). so i am unsure of what the challenge is with the logo not appearing in facebook.. i have just joined the facebook developer group - so i will ask them in there.

    the og dimension tags are optional in the spec so they are commented out in my plugin currently as i experiment. i may code full support for them if it helps to do so.

    i currently have the plugin set to use large or master icons from elgg, depending on the situation. this is fine for most plugins - except videolist which does not have properly coded icon handling and always outputs medium icons presently.

  • Facebook debug tool reports that og:image is not specifically provided. This is in your source and it is not recognised. Get rid of the <!--  -->

    <!--<meta property="og:image" content="https://www.infiniteeureka.com/_graphics/spiral205.png" /> -->

  • that line was commented out because the og:image tag is for http sites only.. my site is https.

    i thought i tested this previously with both tags activated and both pointing to the https image.. and there was no change.

    however, i just tested it again, intending to show you that this approach fails.. and now the image is shown ok (even though facebook debugger still complains that the image is too small - when it isn't!!).

    google+ & linkedin are still not picking up the image though.

     

  • ah google+ now works ok.. must have been a caching delay at their end..
    linkedin still does not.

  • You are a bit stubborn aren't you?. Fix the <!--  --> for  width and heigth,type  and add a og:description and your fine. I'll flush the cash for you if you get your code ok.

  • ;)

    the width, height and type fields are optional and every page i have read stated that they are not used or not needed by fb etc.. however, i will activate them if other routes are not successful.

    maybe the lack of description is an issue, yes.. i didn't notice it was missing from the homepage.

  • Yes, publishing should be fine without description. It is inferred. So the image really should be incorporated in all networks now. Depending on how they are able to read width and height or again use inferred values. They should be able to do that, since I do not declare them and LinkedIn and Google still recognise them allways.