I needed to assign the same featured image to the children and grand-children of top-level pages, so wrote this plugin to hook into the ‘get_post_metadata’ WordPress filter and assign them dynamically. The plugin should be available on WordPress.org shortly. Meanwhile, you can download it here.
The first time Facebook accesses your webpage, it will cache the image and text it finds. Facebook then prefers to use the cached information until it has expired (which could be never). So, before you hit the Facebook Send / Share button for the first time, make sure you’re satisfied with your Post or Page images and text. If you change your mind, and your webpage has not been liked or shared yet, you can use Facebook’s Open Graph debugging tool to refresh Facebook’s cache. If your webpage has already been liked or shared on Facebook, then there’s nothing you can do to change the title, descriptive text, or image that was used.
After publishing a new Post or Page, a ‘Validation Tools’ tab will appear in the ‘Custom Post Settings’ metabox. You can use these links to check the content that is extracted from your webpage by Facebook, Google, etc.
See Facebook’s Maximizing Distribution for Media Content article for more information on open graph meta tags and image sizes. Facebook recommends an image size of 1200x630px, 600x315px as a minimum, and will ignore any images less than 200x200px.
Continuing the earlier theme of Optimizing Images to Save Bandwidth and Speed Page Load, you can also encode small (background) images directly in your stylesheets. For each image / page element encoded within a stylesheet, it means one less HTTP connection for content, which in turn means pages finish loading faster. These images should generally be small and downloadable quickly — what you want to save is the HTTP connection overhead, not the download time (both images and stylesheets are generally cached after downloading). The images should also be encoded within sourced stylesheet files, so the stylesheet files can be cached by the browser. If you encode images within your content (using
<style></style> tags for example), the encoded image will have to be downloaded for every page view, so although you’re saving HTTP connections, your page size has increased. By encoding images in sourced stylesheet files instead, the browser (and content delivery services) can cache the whole stylesheet, including the encoded image(s).
A few weeks ago I mentioned the wesley.pl script from GitHub to optimize images, and how I had modified it to keep (or discard) the EXIF / XMP information. Making sure images are as small as possible is important to save bandwidth and improve page load times (and google rank), so I think it’s worth discussing my image optimization process in more detail.
To improve page load times (and Google ranking), you should make sure all jpeg, png, and gif files are properly optimized. Instead of writing my own script for jpegtran, pngcrush, and gifsicle, I used Mike Brittain’s Wesley.pl script on GitHub. It works great, though I did have to modify it to change the “jpegtran -copy” parameter it uses — I need to keep the EXIF on larger files, and strip it from thumbnails. I posted the diff on the GitHub Issues page.
Update 2012-12-31 : In case Mike doesn’t merge my diff, with the addition of the
--copy=[all|comments|none] command-line argument (see my comment bellow for more info), you can download the patched wesley.pl script here instead.