How to display your blogs in social media!

How to include your images when sharing your posts to social media.

Social sharing can help build traffic for a website and further marketing performance goals. For a user, finding valuable and intrinsically interesting content can be helpful, fun and is at the heart of what the web is about. Social media is important because it offers companies like yours a way to connect one-on-one with its target audience and nurture those audience members into customers. And, writing blogs and articles can help you connect with your audience, your customers, boost your SEO and rankings, and bring in business.

There is nothing more frustrating, and frightening, then when this goes wrong! Especially when you don't know what to do, or how to fix it.

So, here's the fix!

Open Graph meta tags are the solution.

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (although you can set separate Twitter versions with their own tags).

You can find them in the <head> section of a webpage. Any tags with og: before a property name are Open Graph tags.

Why are Open Graph tags important?

People are arguably more likely to see and click shared content with optimized OG tags, which means more visitors to your site via your social media platforms.

There are three reasons for this:

They make content more eye-catching in social media feeds.
They tell people what the content is about at a glance.
They help Facebook understand what the content is about, which can help increase your brand visibility through search.

Which Open Graph tags should you use?

Facebook lists 17 OG tags in their official documentation, plus dozens of object types. We’re not going to discuss all of these. Only four are required for Facebook to understand the basics of your page, and there are a couple of others that sometimes help.

Let’s go through these.

og:title
the title of your page
<meta property="og:title" content="Read my fab article about og:tags!" />
og:url
the address of the page
<meta property="og:url" content="https://www.bvswebdesign.co.uk/articles/how-to-display-your-blogs-in-social-media/" />
og:image
The URL of an image for the social snippet.
Note that this is perhaps the most essential Open Graph tag because it occupies the most social feed real estate.
<meta property="og:image" content="https://cdn.sanity.io/images/x3094v2o/production/68098d0262afff89591f250723caa4a0fd746f28-1500x1000.jpg" />
og:type
the type of content you're sharing
<meta property="og:type" content="article" />

These snipptes of code go in the <head></head> section of your HTML, and ensure your content is shared in a way you can control. This website uses Javascript technology to ensure the og:tags are dynamically populated on each page, ensuring as little work as possible to do that.

In WordPress, most SEO tools will have the option to set the og:tags. For example, Yoast has this setting on each page, so you can control it manually.

How to test and debug Open Graph tags

Now that you’ve deployed all the tags, you need to make sure they’re working as expected and are ready for sharing.

For that, use these tools:

They all work the same. They pull tags from the page and show how it looks when shared.

Testing also helps prevent issues where OG tags aren’t displayed or pulled correctly.

Let's work together

We’d love to hear from you! Send us a message using the form opposite, or email us. We’d love to hear from you! Send us a message using the form opposite, or email us.