In this tutorial, you will learn about the open graph protocol, what it is and how you should apply it to a webpage. In 2010, Facebook introduced the Open Graph protocol. The open graph protocol defines a set of meta-data tags that you can add within your webpage markup that will tell search engines, Facebook, and now other social media sites how to render a link to your page when it's linked to or shared. The protocol includes meta-data for properties like title, description and image. By leveraging open graph, you can make your pages stand out on social media sites and increase the likelihood that people will click on the link. When someone links an article that you created, you do not want it to look like a dog's dinner on LinkedIn, or, Twitter. Not having open graph tags on your page can consequently affect your social click-through rates and conversion rates, so it's something that you should spend a few hours on to get right.
Even though Facebook introduced this standard, all of the other major platforms, Twitter and LinkedIn, all recognize the open graph protocol. Twitter has defined its own set of meta-tags for Twitter Cards, but if Twitter robots cannot find any Twitter-specific meta-data it will use any open graph tags. Using the open graph standard means that you will be ready for anything 😎 Now you understand what it is, let us look at how you add it!
The Open Graph Tags Demystified
Open graph defines a number of meta-data properties that you can add within the head section of your web page mark-up. These properties include:
og:title: Defines the title that will be displayed. If Facebook doesn’t find the og:title tag on your page, it uses the normal page title tag instead. A title needs to be compelling, just like a good post title. There is no limit on the number of characters, but it’s best to stay between 60 and 90. If your title is longer than 88 characters, Facebook will truncate it!
og:url: Defines the URL that will open when the link is clicked.
og:type: Defines the type of page being shared, blog post, video, picture, etc... I won't cover all the options as the list would be too long, however, you can go here for more information.
og:description: Defines the description, again very similar to the normal HTML description tag. This is used to describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook. (So, don’t spend too much time figuring out how to sneak in keywords.). Again stating the obvious, it’s a good idea to make it compelling because you want people to click on it. You are not limited to a character count, but it’s best to use around 200 letters. In some cases, depending on a link/title/domain, Facebook can display up to 300 characters, but I suggest assuming anything above 200 letters could be truncated
og:image: Defines an image that will be rendered within the link. This is probably the most important tag, because as we all know, a picture is worth a thousand words. If you don't set this then Facebook will pick what to show from your page, whether that be an unwanted ad banner, an image that looks terrible, or simply nothing at all. When deciding which image to use, the recommended resolution for an OG image is 1200 pixels x 627 pixels.
On top of the og tags there is also a fb tag:
fb:app_id: Defines your Facebook application Id, used for analytics etc...
If you add these tags onto a page correctly, your pages HTML should look similar to this:
In order to test how your pages will look on social media, you can use the Facebook Crawler tool. Simply, enter a URL into Sharing Debugger and will show which meta tags the crawler scrapes as well as any errors or warnings.
Note: There are a few more 'advanced' tags that I have not covered in this article, however, these aren't really as important. Go to the open graph protocol page to learn more!
It’s surprising how few people use open graph tags with Umbraco. As you can hopefully see, adding the tags is really easy and it can help your pages stand out on social media pages. Happy Coding 🤘
