Making WordPress Posts Look Great on Social Media

Discover the key features of the Open Graph protocol, its common challenges, and how to seamlessly integrate it with your WordPress site.

Highlights
00:00 Introduction
00:52 OG (Open Graph) Tags in Social Media Sharing
02:23 Setting Global and Individual OG Images in WordPress
03:28 Customizing OG Image Sources Programmatically
04:40 Image Formatting and Sizing for Different Social Networks
06:02 Optimizing OG Titles and Descriptions

Links
- The Open Graph protocol: https://ogp.me/

Steffen: 0:00

Hey Dominik. How do you make WordPress posts look great on social media?

Dominik: 0:10

Uh. Tough question. I'm thinking of something funny, but I can't think of anything.

Dominik: 0:15

So, yeah, I mean. So it's actually not that complicated, right? Because I'm usually all of these social networks have certain meta tags that they look for. So whenever you share in the URL, there will be a scraping. The social network will fetch, like this URL that you post and then check for certain meta tags in your content. If you don't have them, it's a bit of a chance. I think it will take maybe the first image that it finds and use like the title of the website that it takes. But actually you want to be in control of that and WordPress, out of the box, doesn't give you anything to control this.

Dominik: 0:52

Usually, most of the SEO plugins that you might use for WordPress will have some functionality to adjust these tags, and the most prominent ones or the most widely used tags are the so-called OG tags. Like it's not what you think it stands for, but it stands for open graph, right? So you have the OG colon image, right? So you have a meta tag property equals OG image and then the content will be the link to your image that you want to show up there. And then there's like side name, type, url and so on, and like description title. These are like the most important ones.

Dominik: 1:36

I think like this was introduced by Facebook and a lot of the social networks have just copied that and used like the same tags so that you don't have to add that for different networks like over and over again. But for Twitter you sometimes do have like additional additional tags that you can use right. So, for example, to define what card size you want this to be or to have like a custom image, because the image format might be a different one or is a different one in Twitter that you can just specify different images and to handle all of that we mostly use WordPress ZEO, like the plugin by host, but there's also like rank math or like some other plugins that will actually have the same functionality.

Steffen: 2:23

Yeah, and there you can set this OG image and the title and the description and sometimes even other data for every post individually. But you can also set that as a global option so that if you do not have specified any image specifically for social network on an individual post, it will just take the global image that you uploaded. However, this doesn't always have to be a great idea, because you might then end up with always having the same image, just like your logo as a preview on a social network, and you might actually want to have something more custom, but at the same time, when you post something or maybe you don't post something like your legal notice, but I think it's still great to have a fallback. So what I typically like to do is I like to add a global fallback option but then, at the same time, make sure that for every individual page or post that I really care about that, then I upload a specific OG image.

Dominik: 3:28

And you can also like I think usually it will also take like the post, like the featured image, right For posts, as like the main OG image if you don't specify one.

Dominik: 3:37

At least I think that's what it does, but you can also change this programmatically, right. So I know it's sometimes a bit hard to bind the correct functionality because the documentation of those plugins are not always the greatest, but usually there's a way, for example, to say I have a custom post type called events and an event doesn't have a featured image, but an event has, I don't know, a location image or like an event image. And then you could implement something like for every image either take the event image if there is one, or take the location image if there is one, and if not, then use the fallback image. Yeah, that's pretty handy usually. So about images, always, as always, those social networks will usually also like crop them, right. So you should do some research, the research, what is the correct image format? And then upload it large enough so that at least, like things don't get scaled up, that you even for retina displays have a large enough image so that it looks good when it's displayed on the social network.

Steffen: 4:40

And additionally, like different social networks do have different image formats that they like to take as a standard, not even just per network, but also some social networks do have multiple formats for posting the same content, kind of like sometimes they take a square, sometimes like more a wide rectangle landscape view. This also depends on the size on the image. But yeah, so it makes a lot of sense when that you take a picture which has enough room around the main element of the picture, if that's, for example, text, or if that's like an object whatsoever, but like to rather have it larger and to have some room around the edges so that anything can get cropped a little bit at least, like 10 or 20%, like a save area around that. I would recommend that.

Dominik: 5:33

Yeah, I think some social networks also have like additional properties to specify different image formats, but I think this is usually not that well integrated into the zeo plugins and for that you would either have to write some some custom logic or look for something that will integrate that, but usually we also.

Dominik: 5:51

It's a lot of work and it's like usually you will be fine with just picking an image that has a little bit of like buffer on the sides and then can be scaled down. Yeah, it's also important to take into consideration how long your headlines are or your descriptions, your meta descriptions, your og descriptions, your og title, because like this together will like make the content look good or not right, and you usually get like In the zeo plugins you get like hints about how big something should be, how long something should be, maximal or minimal, and then it's best like to follow these things, because it can look weird if you have a really long headline and only a bit of text or or just one word. Headline is usually also not so great, so always take that into consideration as well.

Steffen: 6:36

But images are usually the most important part to make your content look good, and sometimes there are issues with those images showing not the right images or not updating, and how do you actually debug this, then? And this is what we're going to follow up?

Dominik: 6:53

in the next episode.

Siegfried, deploy!

Making WordPress Posts Look Great on Social Media

Listen to this podcast on