Do you know what Open Graph tags are?
Open Graphs meta tags work behind the scenes on a website page to make sure that when a link get shared on social, the preview of that link looks great.
I'm sure you've seen people share links on social that don't look great. These links usually have a square image to the left (instead of on top) along with a title and some description copy on the right. A lot of times the image is cropped in a funky way or the image is missing altogether.
Why are Open Graph tags important?
People are more likely to interact with a good looking link. Social media algorithms like interaction. The more people interact with a piece of content, the more the algorithm will show that content to others. And vice versa.
What are the types of Open Graph tags?
Facebook created Open Graph back in the early 2010s. A few years later, platforms like Twitter, LinkedIn and other social networking sites adopted them, as well.
There are four types of open graph tags that are required for a link post:
- Title - This is the social-specific title that is shared with your link. It should be no longer than 60 characters
- Type - This is the type of content. Use “article” for articles and use “website” for pretty much everything else
- Image - This is arguably the most important tag. It is the most visible, you know, since it’s an image. This is the one you should care the most about. More below.
- URL - This is the URL that is being shared on social. Use the canonical tag when possible. More is available on AHREFS.
Another important tag, though not required, is og:description. You get a very limited snippet of text below your image when you share a link on social media. If you use the open graph description tag, you can make sure that text is written to connect with those seeing the link on social media.
There are a number of additional OG tag types, but the above are the most important ones for your social posts.
Open Graph Images
Again, the Open Graph image tag, when used correctly, will make your images look great when shared on Facebook in particular, but also LinkedIn, Twitter, Slack, Post.News, Mastodon, etc.
Open Graph Image Size: 1200x630 px
File Size: <5MB (but you never want an image that big - try to keep it <500kb
You should make this image branded and relevant to your episode. Alternatively, you could just have one site-wide Open Graph image, but that means the same exact image will be shared every time a link to your website is shared.
How Do You Install Open Graph Tags?
If you’re in Wordpress, I recommend installing the free version of the Yoast plugin. Then you can scroll to the bottom of your episode’s post and click on the word “social” in the Yoast SEO box. There you can edit your open graph title, description and image.
If you edit the Facebook area, you should be good pretty much everywhere.
A Note About Twitter
Twitter has its own protocol called “Twitter Cards.” Twitter’s preferred image size is 800px by 418px. If you scale that, it comes to 1200 x 627 pixels (as opposed to 1200x630). If you don't provide Twitter Card tags, Twitter will default to Open Graph anyway. So, unless you want or require completely separate Social Graph content for Twitter, you should be fine with only using Open Graph conent.
Simply go to your page's settings, click "social image" and then click “upload.”
You can edit the Open Graph image in the social sharing settings area of a post.
Once your episode has gone live, click “edit,” scroll all the way down. Click the edit icon next to Advanced SEO settings. Then you can edit your SEO title, description and image - which includes the social sharing image.
If you happen to know anyone with any pull at PodcastIndex, urge them to update the podcast RSS protocol to include open graph images. That way we can automate these images in our feeds.
You spend a lot of time putting out great content. It only makes sense to make sure your web content is as good looking as possible. Make yourself some 1200x630px Open Graph images and make sure they’re on your site.
Links to the things we discussed this episode:
- LinkedIn Post Inspector
- Twitter Card Validator
- Facebook Open Graph Debugging Tool
- Open Graph Meta Tags: Everything You Need to Know
Good Morning, Podcasters! is a product of Snoring Dog Media, LLC. Podcasting Sucks! is a product of Snoring Dog Media, LLC & Jeff Townsend Media.
Fuzz Martin 0:00
Good Morning Podcasters. Let's talk about how to make the links you share on social media look better. Welcome to the 30th episode of the all-new Good Morning, Podcasters! My name is Fuzz Martin. And each week, I bring you three episodes dedicated to helping you get better at marketing, advertising, PR, and social media, as those things relate to podcasting. If you listen to last Friday show, which actually came out on Saturday morning, you'll know that I am getting over the flu. And while I feel a lot better, I'm still not 100%. And that's mostly coming through in my voice. But the show must go on. It doesn't really need to go on. Like you, I could have really taken some time off for rest. And I'm sure you would have been fine with that. But I like podcasting. And I like my routine. So let's get into it.
Fuzz Martin 0:57
Do you know what the term Open Graph means? Open Graphs are meta tags that work behind the scenes on a website page. So when somebody shares a link to a page with proper Open Graphs on social media, those Open Graphs are retrieved. And the preview for that page looks great. When there are no Open Graph tags, the preview usually looks like garbage, you get a little square to the left, usually with an oddly cropped image or a broken image. And then some text on the right, and it just looks ugly and mailed in, people are more likely to interact with a good looking link. And therefore that link is more likely to perform better on social media, specifically in the algorithms, because the algorithms like posts that are getting clicks and likes. The Open Graph Protocol was actually created by Facebook in the early 2010s. And then a few years later, Twitter, LinkedIn and other social networking sites adopted them as well.
Fuzz Martin 1:59
There are four real types of Open Graph tags that are required when a link is shared on social media. The first is the title. So this will be the title of your page as you want it to appear on social media, it shouldn't be any longer than 60 characters. So if you're using a regular title tag on your website, you get your your title there, your social tags should be 60 characters or less so that it doesn't get cropped when you share that title on social media. The type, that's the second kind of OpenGraph tag that's required. This is the type of content usually you'll use website for everything unless it's a article. And if you're using an article, then you'd use the article tag. So it's either article or website. If you're using some plugins like Yoast, or SEO press, they'll give you the option to toggle that. The third required type is image and that's the one we're going to talk about a bit more coming up. But the OpenGraph image is the preview image that people aren't going to see when your link is shared. This one is the most visible, you know, since it's an image, and this is the one you should care the most about. And again, we'll talk more about that coming up in a few moments. And the fourth required tag is the URL tag. So obviously, the URL that is being shared, you should use the canonical tag. And I'll provide a link to AHREFS that you can read more about on how to use the canonical tag with your URL Open Graph tag. One other important tag though it's not required is the OG description tag, you get a very limited snippet of text below your image when you share a link on social media. If you use the Open Graph description tag, you can make sure that the text is written to connect to those seeing that post on social media specifically, there are a whole bunch of other types of Open Graph tags as well. But those that I've mentioned are the most important for your social posts.
Fuzz Martin 4:00
So now let's discuss Open Graph images. Again, the Open Graph image tag when used correctly, will make your images look great whenever your link gets shared on Facebook in particular, but also LinkedIn, Twitter, Slack, post news, Mastodon, MySpace, I got nothing.
Fuzz Martin 4:20
Your Open Graph image should be 1200 by 630 pixels. It needs to be less than five megabytes though, you should never really have images that are five megabytes big on your website page ever. That'll kill your site load speed. So don't do that. Make that as small as you can make it while still having good quality. Your image should be branded relevant to your episode. You can always just have one site wide Open Graph images if this is something that you don't want to do for every single episode, but just know that when you share that it'll be the same image that's shared every time you link to your website is shared but you want to 1200 by 630 The image, I tried to make them customize for each episode that I do. Everything's the same, I just changed the title and maybe swapping a different background image or color.
Fuzz Martin 5:10
So how do you install and edit OpenGraph tags on your website? It really varies from site to site. But if you're in WordPress, I recommend installing the free version of the Yoast plugin, this will take care of that for you. Then you can scroll to the bottom of any new posts that you create. You click on the word social inside the Yoast SEO box. And then you can edit your Open Graph title, description and image in there, if you added the Facebook area This goes for any site, you should be good pretty much on any social media platform. But I forgot to mention this earlier, Twitter has created its own protocol called Twitter cards. It's pretty much the same thing though slightly different Twitter's preferred image size is 800 pixels by 418 pixels. But if you scale that up by one and a half, it comes out to 1200 by 627, instead of 1200 by 630. So you're three pixels off, it'll be okay. Also, if your Twitter card information isn't available, Twitter will just default to your Open Graph tags anyway. So I've only used specific Twitter cards a handful of times in my life, you should be fine with Open Graph standard images, and Open Graph tags unless you really want different image or different texts on Twitter specifically, or if Elon changes something on us, which he is want to do.
Fuzz Martin 6:33
If you're using Squarespace to edit your OpenGraph image, just go to Page Settings, go to social image and then upload. If you're on Wix, you can edit this in the Social Sharing Settings area of a post. It's a bit of a tongue twister. And if you're using podcastpage.io Once your episode has gone live, click Edit, scroll all the way to the bottom of the page. There's a little edit pencil button next to advanced SEO settings. Click that and then you can edit your SEO title, description and image, which includes the social sharing image. I've been starting to ask as many connected people as possible to make updates to the podcast RSS protocol to include OpenGraph images in the RSS feed. So this can be an automated process with websites. We'll see if anybody's listening. Are you listening? Please include the OpenGraph image in our podcast RSS feeds. Thank you.
Fuzz Martin 7:35
You're spending a lot of time putting out great content for your show. It only makes sense that your web content is as good looking as possible. And when you share an episode or your website or an article, from your website on social media, that it looks great, and you're getting good interaction with your page. There are a few things that make me cringe more than when somebody posts a link to their website on social with a broken Open Graph image or even an ugly image. Make yourself some 1200 by 630 pixel Open Graph images and make sure they're properly installed on your site. I've got links to the Facebook, Twitter and LinkedIn post validators and inspectors on GoodMorningPod.com. Or you can check the show notes. That'll do it for today's episode of Good Morning Podcasters. If you found this episode helpful, please consider giving me a five star review on your preferred pod platform. Also, please consider following the show and telling your friends to podcast about GMP. Thanks again. We'll talk to you on Wednesday. Right here on Good Morning, Podcasters!