Using a Custom Image Size In WordPress SEO Open Graph Tags

WordPress SEO is an essential plugin for any WordPress site. Although WordPress in general is pretty great for SEO, this plugin handles a ton of methods for improving your site’s SEO, from generation XML sitemaps to suggesting keywords for your content.

One area where the WordPress SEO plugin really shines is with Open Graph tags, which define how your content is shared with certain social networks, most notably Facebook. The WordPress SEO plugin will automatically generate the following Open Graphs tags for each page of your site:

If you have a Featured Image set for the post or page, the plugin will also generate an og:image tag. However, by default the URL of the original image will be used. This can prove to be problematic if the original image is very large, or has uncommon proportions. If you have defined a custom image size in your theme using add_image_size() you may wish to use that size instead. Thankfully, the WordPress SEO plugin applies a filter, wpseo_opengraph_image_size, to the value used when grabbing the image URL for the open graph tag. Add a hook in your theme’s functions.php file similar to the following:

In this example I’ve set the image size as ‘large’, which will be contained to 1024×1024 pixels. You can use any image size you want, but keep these requirements in mind from the official Facebook Developer blog:

Images must be at least 200×200 pixels for desktop web and ideally, 600×600 pixels or greater for the best experience across devices.

Images may not appear in the new design if they are smaller than 200×200 pixels, and rectangular photos may be cropped.

Image requirements include:

  • 4 Megapixel limit
  • 5MB limit
  • direct links to the image only
  • only JPG, PNG, GIF, or BMP file formats

Facebook Paper

Paper is a new app designed to “Explore and share stories from friends and the world around you.” That sounded awfully similar to Facebook as a whole, so I wondered what set this app apart from the social network that it belongs to?

Content

In addition to a revamped view of your News Feed, Paper provides a variety of other “Sections”, such as Planet, Home, and Ideas. It’s not immediately clear how these channels are curated or by whom, but there is clearly a big focus on promoting content from outside your social circle.

Publishing

You can also use Paper to post to Facebook, and there are some differences in the interface as compared to the regular Facebook mobile app. The option to select an “I’m Feeling” status, as well as the ability to create and add to Photo Albums is missing.

When posting in Paper, you can see how your post will look as you add text photos and video. While there aren’t any layout tools, I feel that Paper is taking a cue from products such as Storehouse and Exposure, which focus on crafting visual stories.

Interactivity

Paper has a very fluid user interface that’s intuitive and fun to use. Clearly great care and time have been invested in this app, with many of the features and interactions prototyped beforehand with software of their own design. Facebook has opened-sourced this toolkit, called Origami, which works in conjunction with Apple’s Quartz Composer.


I can picture using this app to access Facebook while on my phone, but as much as I like Paper, I can’t help but feel like it’s a Facebook branded version of Flipboard, albeit with an arguably more advanced UI. Maybe Paper is just an avenue for Facebook to explore new design directions, and ways of expanding their reach. But I don’t see the logic behind separate Facebook, Facebook Messenger, and Facebook Paper apps all availbable on the same platform, with largely overlapping feature sets.

Related Reading