How To Make Social Media Previews Look Great: Open Graph Settings

Home > Blog > How to make social media previews look great with open graph settings

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

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

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

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

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

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

While American English is the default, sometimes it’s useful to specify a local language for your page.

og:site_name

This tag indicates that the page you’re sharing forms a section of a broader network of pages.

og:audio

If you want to highlight an audio file such as a song or podcast, you can specify the audio URL.

og:video

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.