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. og:image, 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.
For example, Facebook requires an image of at least 200x200px, images for the Google Article Rich Card must be larger than 696x279px, and WhatsApp recommends images of 300x200px or larger. Facebook also ignores images with aspect ratios over 3:1, and Google will ignore images that exceed 2.5:1.
Facebook displays shared links differently depending on the available image resolution – shared links will include a small thumbnail if the image is too small, and shared links with larger images may appear fuzzy on high-resolution displays if the image is not at least 1200x630px (Facebook’s recommended image size).
Most social and SEO plugins allow you to select a different full size image URL for Facebook and Twitter, but this means manually editing / resizing / saving each custom image before uploading it – and then maintaining these custom images in your media library.
Let WordPress Manage Image Sizes
WordPress includes image resizing / cropping features, so why not let WordPress handle the job of creating alternate image sizes from the original? This is what WordPress was designed to do. ;-)
WordPress comes with a few basic predefined image sizes that can be customized under the WordPress Settings > Media page. There are also many plugins that will let you add new image sizes and/or edit / adjust / crop individual image sizes in the media library.
WPSSO Core – the exception I mentioned previously – provides additional image sizes for Facebook, Google, Pinterest, Twitter, etc. You can even customize the image size when editing a post / page to change the image size and/or cropping area – for example, if you wanted to crop a portrait image from the top instead of the center, to keep the subject’s head in the image. :)
In order to minimize the number of different image files created, WPSSO Core comes with only two additional image sizes – 600x315px cropped (center/center), and 800×1600 uncropped.
Many site owners have (unfortunately) uploaded small images to their WordPress media library, so to avoid excessive warnings and error messages, WPSSO Core defaults to 600x315px cropped for Facebook / Open Graph images. If your full size images are wider than 1200px, you should change the 600x315px default to 1200x630px, as recommended by Facebook (and the SSO > Setup Guide). ;-)
To minimize the number of image files created by WordPress, you may also want to match existing image sizes from your WordPress Settings > Media page. For example, here are the WPSSO Core image sizes used for surniaulula.com and wpsso.com:
Cropped or Uncropped?
The difference between cropped and uncropped image dimensions is important to understand.
When resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions required, and the excess width or height is trimmed. The resulting image will match the required dimensions exactly (having sacrificed parts of the image).
When resizing without cropping, the original aspect ratio is preserved and no parts of the image are sacrificed. The image will be resized so both the width and height fit within the designed size — so only one side of the image has to match the required size.
