Thursday, 2 October 2014

Ah, you mean graffiti drawn with a device that applies ink from its nib (Oh pen graff)

Part of today I was trying to fix the open graph tags on one of my sites. You can find the open graph documentation here: The Open Graph Protocol, which gives the following tags as being required for every page:

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".

Now, for me, I have lots of pages that don't have an image. This is for a Wordpress blog, and I'm pretty sure the Yoast SEO plugin's solution for when an explicit image is not set, is to add og:image tags for all images in the page. The Jetpack plugin for Wordpress apparently adds a link to a blank image hosted on Wordpress.com if there are no images found.

Searching for how other websites deal with this issue is rather difficult, at Google just returns results dealing with how to add og:image tags, rather than what to use as the value when you don't have an image. However, I did find this page: Default OpenGraph Image for Jetpack. This suggests just using a standard default image, which was the only solution I could think of too.

Checking for the best size for a default image, I found Facebook Content Sharing Best Practices: 4. Optimize your image sizes to generate great previews gives a size of at least 1200 x 630 pixels. So I just made a pic that large with my logo and a picture that I often use to represent the site as an avatar / social media profile background. Then I can modify my theme to use that as the default og:image for non-singular pages, or when a featured image hasn't been set.

No comments: