When you share a URL on a social site like Facebook, Twitter, LinkedIn, etc., that social site crawls the webpage in background to read the meta tags and structured data markup (aka Open Graph meta tags, Twitter Card meta tags, Schema JSON-LD, Schema microdata, etc.).
Social sites like LinkedIn generally require an image, a title, and a description to display a share. A few social sites like Pinterest and Twitter can also display additional information for products, recipes, mobile apps, videos, and more.
Until recently, the LinkedIn crawler read only Open Graph meta tags to get the webpage image, title, and description, but recently they’ve started reading oEmbed data as well, and if oEmbed data is available, LinkedIn prefers those values over the Open Graph values.
Pop quiz! Did you know?
1) WordPress creates thumbnails automatically?
WordPress uses the larger / full-size image you upload to create smaller thumbnail images (see your WordPress Settings > Media page for the complete list of sizes).
For example, a photo gallery page will show small thumbnails of the larger / full-size images you uploaded. Themes will often include the featured image you selected in a predefined image size and location in the webpage.
2) All images must be sharpened after resizing?
This is such a standard process that Photoshop, for example, automatically applies a default amount of sharpening when resizing any image — you must specifically uncheck an option in Photoshop to avoid sharpenning an image during the resize process!
3) WordPress does not sharpen resized images?
All social and SEO plugins – except one that I know of – use the full size image URL from the WordPress media library when adding image meta tags to the webpage (ie.
twitter:image, etc.), and/or adding images to Schema JSON-LD markup for the webpage. This can be problematic for several reasons…
- The image resolution may be too small.
- The image resolution may be too large and the file size too big.
- The aspect ratio (width or height) may exceed a maximum value.
- The image displayed on the social / search site is center cropped.
Most social and SEO plugins can use a post’s featured image, or offer a way to select a custom social image, but do little else to make sure an image is suitable for social sharing – they assume the article author / editor is aware of each social site’s image requirements (minimum and maximum image resolution, aspect ratio, and maximum image file size) and has selected an appropriate image. For example, Facebook requires that all images be larger than 200x200px, preferably 600x315px, or (even better) 1200x630px for high-resolution displays like retina laptops and phones, have an aspect ratio no wider / taller than 3:1, and less than 8 MB in size. Twitter and Google also have their own requirements, which are different than Facebook’s.
Using a social or SEO plugin that creates resized images from the originals you upload, and checks those resized images to make sure they conform to the requirements of each social site, is only part of a complete Quality Assurance solution. All too often, themes also include a few basic social meta tags in their templates (they shouldn’t, but they often do), that prevent social crawlers from reading your webpage meta tags correctly – some meta tags should never be duplicated (Facebook, for example, can reject all meta tags because of a single duplicate), or the theme may include the full size featured image before all other meta tags, so the wrong image will be used for social shares (this is fairly common). If your social or SEO plugin does not check for duplicate meta tags, you may never realize that you have a problem.
A new add-on for WPSSO Core called WPSSO Tune WP Image Editors is the fastest and easiest way to improve your social and SEO images — simply activate and regenerate your thumbnail images (aka resized images), and you’re done! :-)
How does it work?
Have you noticed that after carefully adjusting an image in Photoshop, you upload it to your site and WordPress creates small images that seems a bit “fuzzy” — nothing like the nice sharp original?
The reason is that after resizing any image, that image must be sharpened – always, but WordPress doesn’t do any sharpening, so the resized image remains a bit “fuzzy” — probably not what you want for a featured image or share on social sites! ;-)
The WPSSO Tune WP Image Editors add-on takes care of this — it automatically applies a reasonable amount of sharpening to all JPEG images resized using the default WordPress ImageMagick editor.
Pinterest has published several methods that website owners can use to provide information for their Rich Pins format, including the standard Open Graph meta tags. Open Graph meta tags generally include the title, description, one or more images, but can also include product details, author information, etc. This past week I found a serious incompatibility between Pinterest’s support of the ‘article:author’ meta tag, and that of Facebook (the leading proponent of the Open Graph standard).
For the past year I’ve been working on NGFB, a WordPress plugin that adds Open Graph, Search Engine Optimization (SEO), and Twitter Card meta tags to webpage headers. It’s one of those things that all websites need, but few website owners actually know what meta tags are or look like. There are a lot of plugins for WordPress that add meta tags to webpages, but not all are created equal. ;-) This article will explain what meta tags are, why they are useful, and what makes one set more complete than another. But first, we need to get everyone on the same page…