milknbizz Tech Surgery #2 - Topic 1: The thumbnail created when you share a link on social? That’s Open Graph.
Here's the first blog from our second milknbizz Virtual Tech Surgery. There were quite a few questions and some lengthy discussion about the images that accompany those all important posts on social media....so here it is, the lowdown.
Open Graph (OG) was created by Facebook in 2010 to turn links shared on the platform into interactive objects. They encouraged website owners to add a few lines of data to each page, and in turn Facebook created a rich thumbnail when the user shared a link. Many social sharing apps have now adopted Open Graph into their platforms, including LinkedIn, Google+, Instagram, Whatsapp and Twitter (Twitter have their own format but will fall back on OG).
Adding Open Graph meta data to your website does not directly affect your SEO, but it will influence the Click Through Rate (CTR) of your social media links. There are three reasons to optimise you OG tags:
1. When used with an appropriate description and image, you can communicate what your content is about.
2. They make your content more noticeable in social media.
3. They help Facebook (and others) understand your content, which can improve your visibility in social search.
So what OG tags do I need to add?
There are five main tags needed for social media platforms to understand your content:
This one is self explanatory, and serves a similar purpose to the meta title tag on your page (displayed in the tab on your browser). The title should be compelling, just like your page title. To keep your title consistent across different social platforms, keep it between 55 and 60 characters. You can go up to 90 on Facebook, but other platforms may truncate you. Don't include your site name in here, that can be included in the og:url
This is how you set the canonical URL for the page (we will be covering canonical URLs in a future post). It helps consolidate all related/connected data, such as likes - across all duplicate pages. One thing to note, is that Facebook only displays the domain name, not the full URL. For example, if the link I am sharing is https://www.tideymitchener.com/blog/awesome-content - only www.tideymitchener.com will show up in the OG.
This is probably the most important of the tags. It occupies the most space on the post, and good images always make content stand out. Use a custom image on the pages you want to share, else social platforms will pick a random image from the page, which may not be the one you want. To keep your image looking great across platforms, use a high quality image with dimensions of at least 1,200 pixels wide by 627 pixels high. You can go bigger, but always keep the aspect ratio at 1.91/1. Also, make sure you keep the file size below 5MB. Some platforms are ok with images up to 8MB, but it's better to err on the side of caution. If you supply an image of less than 400 by 209 pixels, you will land up with a much smaller thumbnail that does not cover the width of the post, making it less noticeable.
This refers to the type of content that you are sharing. There are a lot of options when it comes to types, but the most commonly used are 'article' and 'website'.
This is a brief description of your content and it's very similar to the meta description tag you are using for SEO. In terms of length, it's best to keep this to 60-100 characters to keep consistency across social platforms.
Hopefully this blog will give you some insight into how to craft compelling Open Graph content. In a future post, we will be covering how to implement OG into your CMS (Wordpress, Wix, Weebly, Squarespace). Any questions please leave a comment below.
Look out for our next blog, where we will be looking at how to create a landing page sign up form with Mailchimp - see you then!
Charlotte and Dylan