Open Graph solves an important challenge of social media marketing: it allows webmasters to define exactly how they want their previews to look on various platforms such as social media. Open Graph is an HTML metadata definition developed by Facebook, but other social platforms such as Twitter are also using it.
Open Graph makes it possible to predefine certain tags on one’s own website, which then ensure that the post contains all the important data, including a suitable photo. This means that Facebook and Co. don’t have to guess which data is particularly important and appropriate. Instead, they use the information that the webmaster provides with Open Graph.
When someone shares a link on a social network, that post usually includes a headline, a post image, and the URL. Social platforms generate these automatically from existing data on the website.
For a long time, webmasters had no control over what this preview looked like. Yet it is crucial for success that shared posts and pages also look attractive on social networks. People will only click on a page if it looks interesting and has a compelling headline.
So if you don’t use this option, Facebook will pull the data itself. However, this procedure is very error-prone. This is because webmasters sometimes use the existing options that Facebook would have for recognising important data differently. For example, if a news site uses the H1 more as a structuring element with keyword insertion and hides the headline in the H2, taking over the H1 leads to an unattractive preview. Other websites, however, use the H1 as a headline.
This lack of uniformity makes it difficult for Facebook and co. to always find the right data. In addition, you can also use Open Graph to implement functions that Facebook would not do for you. For example, you have the possibility to create an image carousel by simply using multiple og:image tags.
Open Graph is not only relevant for you if you are very active in social media marketing yourself. Every webmaster should use Open Graph. It gives you control over how your posts are shared on social networks, even if you don’t share them yourself.
You can easily place Open Graph tags in the source code of your website. They belong in the header. All you need to know is what data you can define and how, and then modify the commands to suit your needs.
You start with the following code line:
<html prefix="og: http://ogp.me/ns#">
This way you indicate that you are working with Open Graph and Facebook will find corresponding hints in your source code.
Most webmasters primarily use four Open Graph tags: og:title, og:type, og:url, and og:image.
For example, to place the title of your website, you would use the following code:
<meta property="og:title" content="The title of your website" />.
You can use the other tags in the same way. Many of the older tags are mainly there to further define the data already made with the four main tags or to include other media like video or audio. There are also many more tags, some of which are quite recent and were created specifically to better identify the author and source of a post.
As a result, you usually don’t need all tags. A handful per page is often enough.
- article:published_time Time when the article was published
- article:publisher Source of the article
- article:author Author of the article
- og:determiner Grammatical article before the title
- og:description Description of the website
- og:site_name Name of the online site
- og:locale Country and language specification
- og:image:type Media type of the image
- og:image:width Width in pixels
- og:image:height Height in pixels
- og:image:alt Alternative text to the image
- og:audio:secure_url Secure URL for an audio file
- og:audio:type Media type of the audio file
- og:audio:alt Alternative text to the audio file
- og:video:secure_url Secure URL to a video
- og:video:type Media type of the video
- og:video:width Width of the video in pixels
- og:video:height Height of the video in pixels
If you’re not comfortable with the source code and are using one of the popular CMSs, you can download a plug-in that will help you define and place the Open Graph tags.
If you want to control how your content is displayed, you can use Facebook’s Sharing Debugger. It will show you a preview of how your page would be shared now: perfect for finding and fixing problems. The debugger also helps you by showing you warnings.
When you look at a thumbnail on Facebook, you quickly see which tags are especially important: og:title, og:type, og:image, and og:url. Because these tags are used especially often, they are common sources of errors.
With og:title you can determine the exact title of the preview. As the second thing a user sees after the featured image, it can help determine if they click or not. It gives important clues about the content and arouses curiosity. That’s why you should always use this tag and also spend some time on a good title.
og:image can prevent Facebook from just pulling any image from your website as a thumbnail. This tag is also very important because the first impression is crucial.
With og:type you define what kind of content your page is: A website, a video, a blog post, or something else. You often need to strengthen this definition with other tags, such as the source of your video.
In the og:url you specify the exact URL you want the post to be shared with. This way you avoid unnecessarily long URLs and all shares and likes are assigned to this link. As a rule, these are your Canonical URLs.
Open Graph tags do not have to be fully present. After all, there are over 20 tags, not all of which are always relevant. In principle, you can do without Open Graph tags altogether or define tags that are particularly important to you. Just be aware that you are giving away design control and your posts may not be shared as engagingly as they could be. Facebook can then again only guess at what data to pull from, and accordingly, mistakes are more likely.
If you don’t yet know which tags are really important to you, it can be useful to experiment with Facebook’s sharing debugger. This way you can find out which tags have what effect and which ones you should integrate for each of your subpages. If you use one of the more popular CMSs, you can also have plug-ins automatically to create Open Graph tags.
You then only have to check whether the transferred data corresponds to your wishes. Such plug-ins not only save you a lot of work, but they are also a good reminder for this small task, which can easily be forgotten.
Facebook’s Open Graph debugger used to issue a warning if both reference types led to a different URL. However, this has not been the case for several years. So there are a few exceptions where it makes sense to deviate between both URLs.
It makes sense, for example, if a company operates internationally and has different language variants of one and the same URL. In this case, the Canonical URL contains an identification of the language in each case, but the Open Graph URL is sensibly always the same. This works because Canonical URLs point to the content of a page, while Open Graph URLs point to an object.
Paginated and filtered results are another reason why the two URLs might differ. Then, the Open Graph URL would contain the filtering options, while the Canonical URL would point to the non-paginated or unfiltered version.
