
How To Make Social Media Previews Look Great With Open Graph Settings đ
Ever notice that the preview image on something someone has linked to just doesnât sit right? Perhaps youâve uploaded something to your site and every time you share it on Facebook, the preview is all wrong.
Before you start throwing your laptop at the wall, take a deep breath. You just need to change your open graph settings.
What are open graph settings?
Open graph protocols are the settings you use to tell social networks how you want your pageâs information to be displayed. You can select certain, optimised images to feature on certain platforms, or change how headlines and descriptions appear when shared across networks.
This isnât going to directly affect your on-page SEO, but it will dramatically change your social engagement. In short, it means that you can look as professional as possible when people share your content.
So how do I change the settings?
If you use a CMS such as WordPress, itâs really easy to change your open graph meta tags using a good plugin like Yoast. These plugins will often enable you to set site-wide meta tags as well as individual page ones for your blog.Â
Youâll also be able to change your settings for individual platforms. After all, if Facebook, Twitter, and LinkedIn use different optimal dimensions, then you should optimise for them!
If you canât use a plugin with your site, you need to set your OG tags by adding them into the <head> section (before the </head> tag).
This may be a little tedious for large sites, but it gives you a lot of control in the long run. It also means that you donât have to rely on plugins which can break, slow down your site, or potentially be a pain to manage.
Youâll often need to specify a few things for each page. So this means including at least a title tag, a description, and an image. These are things that youâll likely be doing already, just not in an open graph format.
To specify your OG meta tags, find the right ones below, fill in the right information, and copy & paste them into your HTML.
What types of open graph tags are there?
All the major platforms recognise open graph tags because they make the user experience much better. These ones primarily apply to Facebook, but are also applicable to Twitter and LinkedIn. You can actually set open graph tags specifically for Twitter, but thatâs as simple as using âtwitter:titleâ rather than âog:titleâ â and if you donât have specific Twitter ones, itâll still pull the OG settings.
og:title
<meta property=âog:titleâ content=âthe best title in the worldâ/>
Ideally, youâll have already optimised your page and article title for SEO purposes – much the same will apply here! Sometimes, however, you need to make your social title different to your on-page title. Make sure to keep it to 88 characters, as Facebook will truncate it.
You can often see this happen with news stories, where the publisher will use a more click-baity open graph title in order to draw people from social channels, while keeping the on-page title more traditionally respectable.Â
og:url
<meta property=âog:urlâ content=âhttps://www.bestdomain.co.ukâ/>
Using this tag acts as a social canonical tag for your page – this is great if youâre using tracking parameters in your social links.
og:type
<meta property=âog:typeâ content=âblogâ/>
As you may have guessed, this tag indicates the type of content on your page, or the type of page it is.
It could be website, article, blog, city, company, or anything from quite an extensive list.
og:description
<meta property=âog:descriptionâ content=âYouâre about to learn all about the best aspects of the topic this blog is all aboutâ/>
You could copy and paste your pageâs meta description here; itâll display as a description of your page on the social previews. Similarly to the title, however, you may want to consider changing it to be more appropriate for a social audience rather than the SEO-focused meta description.
og:image
<meta property=âog:imageâ content=âimage urlâ/>
You donât actually have to use an image thatâs used on your page as your open graph image. This is especially helpful if your on-page imagery is more decorative than click-grabbing.Â
You can use your open graph image to make your post stand out. Just be sure to keep any copy short, sweet, and centred in order to avoid clipping.
og:locale
<meta property=âog:localeâ content=âlanguageâ/>
While American English is the default, sometimes itâs useful to specify a local language for your page.
og:site_name
<meta property=âog:site_nameâ content=âBest Siteâ/>
This tag indicates that the page youâre sharing forms a section of a broader network of pages.
og:audio
<meta property=âog:audioâ content=âaudio urlâ/>
If you want to highlight an audio file such as a song or podcast, you can specify the audio URL.
og:video
<meta property=âog:videoâ content=âvideo urlâ/>
Similar to the tag above, if you want to highlight a video on social media then specify
Still canât find the tag youâre looking for? You can get a complete list of meta tags here.
Open Graph for Twitter
Like we mentioned, most of these are the same for Twitter. However, if Twitter is an important platform for you then it will be worth optimising for it. Be sure to include a âtwitter:cardâ tag when optimising for Twitter. Itâs similar to the âog:titleâ tag but there are seven options: Photo, video, app, product, gallery, summary, and large version summary.
Want to know more?
Reach out and say hello. Come experience the GIANT side.
Blog
What is it like being an Account Manager at Sleeping Giant Media?
What is it like being an Account Manager at Sleeping Giant Media? Here at Giant...
Giant Wednesday
What is Local SEO?
Digital Marketing, technology & business insights, how to's and explainer...
Follow Us
Sign Up For More
Stay up to date with the latest happenings, learnings, events & more with our GIANT Newsletters.
Contact Us
Top Floor, The Civic Centre, Castle Hill Avenue, Folkestone CT20 2QY.
Copyright © 2022 Sleeping Giant Media. All Rights Reserved.