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

Burlington Open Device Lab

Burlington’s Union Street Media recently threw open the doors on a public device testing lab. This is a great resource for web and software developers in Vermont.

Thanks to Union Street Media and the individual device donors for making this incredible asset available to the Burlington tech community.

Visit the Open Device Lab website for the location and a list of available devices.

Vermont Design Awards

Last night AIGA VT hosted the first annual Vermont Design Awards at the Karma Bird Gallery in Burlington. This curated design exhibition kicked off the first ever Vermont Design Week, which includes lectures, studio tours, designer-led panels, and community events.

There were over 200 submissions to the Design Awards in categories such as Video, Websites, and Publication Design. The judges whittled down the entries to a selection of 50 pieces which are on display throughout the week.

Our work for Photon Medical Communications was selected to be put on display, alongside great work from many other talented Vermont designers, such as Dave Barron Design, HMC Advertising, Dubko, DesignPartner, and many more.

To find out more about Vermont Design Week, read this overview from Seven Days, or visit the Vermont Design Week website.

Great Jobs in Vermont

Vermont has a burgeoning tech community, and there are plenty of exciting businesses that are currently hiring. However, our Green Mountain state still suffers from the perception that there are few jobs available.

The state recently launched a website designed to “bring more awareness to Vermont-based companies and job openings,” according to Vermont Governor Peter Shumlin.

However, the site, as currently implemented, suffers from major technical shortfalls, and misses the mark on highlighting Vermont-based companies.

I was recently interviewed by Annie Russell of VPR on some of the issues with the site.

New Food Integrity Campaign Website

I am very excited to announce the launch of the new Food Integrity Campaign website. I developed this site in conjunction with Vernal Creative, based on designs by Ben S. Johnson.

The Food Integrity Campaign is a branch of the the Government Accountability Project, which supports a community of whistleblowers, truth-tellers and advocates to safeguard our food.

This is an area I am very passionate about, and I’m proud to help this organization spread their message.

Facebook Share Dialog No Longer Accepts Custom Parameters

The Facebook share dialog is a service that Facebook provides which makes it easy to share links from a website on a user’s timeline. Essentially it is a webpage hosted by Facebook, which loads the link to be shared, and allows the user to add a comment before posting.

The share dialog URL is: https://www.facebook.com/sharer/sharer.php.

To share a link, you append a query parameter “u” as follows: https://www.facebook.com/sharer/sharer.php?u=https://okaypl.us/

You can see in the screenshot above that the dialog pulls in the page title, description, and thumbnail image automatically.

In the past, web developers were able to customize those elements by adding additional query parameters to the share dialog URL:

• p[title] = Custom Title
• p[summary] = Custom Description
• p[images][0] = Custom Thumbnail Image

There are still many page online that describe how to use these additional parameters to customize the share dialog. However, earlier this year Facebook began ignoring all additional parameters beyond the URL to be shared.

All of the shared content is now pulled from the page’s Open Graph tags. For instance if you want to change the title or description, you must edit the page’s og:title or og:description meta tags, respectively.

For example, take a look at the Open Graph tags for this site’s home page, and you can see how they correlate to the content pulled into the Facebook Share dialog above:

If you are a developer, you should double check that your pages have proper Open Graph meta tags. For WordPress website, I highly recommend the WordPress SEO plugin, which will do the heavy lifting for you, while still allowing you to customize the tags on a per-page basis.

New Offices at the Karma Bird House

We moved into our new office this week at the Karma Bird House in Burlington, otherwise known as the Burlington Grocery Co. building.

The new space is bright, wide-open, and inspiring. Excited to be sharing the building with so many local creative forces like Ursa Major and Budnitz Bicycles.

Onward and upward!

Today In AZ Microsite for Expect More Arizona

Expect More Arizona is an organization working to ensure a world-class education system for all students. They raise public awareness, mobilizing Arizonans to support the building blocks of education.

They recently launched their “Today In AZ” campaign, which suggests small steps you can take every day to further their mission of quality education in Arizona. I had the opportunity to work on this project in conjunction with Park&Co.

The concept for the site was a yearly desk calendar, and we were able to bring the design to life using 3D animated page turns, and full screen background images that change to reflect the context and audience for each post. I leveraged the HTML5 History API to update the URL and maintain state between pages, while the animation provided a quick distraction as we load new content dynamically with AJAX.

Burlington Writers Workshop

This past weekend I had the opportunity to speak to a local group of writers, artists, and small business people about the benefits of WordPress. It was a great experience, and I really enjoyed sharing my knowledge with this passionate group from my community.

I was joined by Alexis Dubief, who gave an excellent talk about “Being Awesome Online”, which included practical advice for building your audience, and marketing yourself.

My presentation gave a high-level overview of the WordPress open-source Content Management System, and highlighted some of the differences between a self-hosted WordPress site and and the “freemium” service WordPress.com.

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

• Facebook engineer Jason Barrett Prado on the development process
• MG Siegler of ParisLemon’s initial thoughts
• The design power-couple behind Facebook Paper, Mike Matas and Sharon Hwang