What is OpenGraph?
Open Graph Meta Tags is an important social media marketing tool: Webmasters can use it to define exactly what the respective preview should look like. Open Graph is an Internet Protocol and was developed by Facebook. Other social platforms such as Twitter are now also using it.
Typically, when users share a link on the social network, that post includes the headline, featured image, and URL. Social media platforms generate these automatically from the existing data on your website.
In the past, website owners and webmasters had no control over how this data was previewed. However, it is crucial for the success of a website that shared posts and pages also look attractive on social networks. Users will only click on the website if it is attractive and has a concise headline.
This is where OpenGraph comes into play. Various tags can be used to define certain statements on your own website. These ensure that the page or post contains all the important data, including suitable photos. So Facebook and Co. don’t need to look for “some data” on the site themselves. Instead, the data that the webmaster considers important is used explicitly.
If you do not provide this data, Facebook will collect the data itself. However, the method is very unreliable and incorrect or faulty data is often tapped.
With Open Graph you can also do things that Facebook would not use for you. Therefore, every webmaster should use the opportunity to use their own Open Graph tags. It is up to you to influence how your posts are shared on social networks.
What are OpenGraph meta tags?
Open Graph Meta Tags are code snippets. You control how URLs are displayed when shared on social media. They are part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter.
You are in the area of a website. All tags with og: in front of a property name are Open Graph tags. Here’s an example of what that looks like:
<meta property="og:type" content="website" />
<meta property="og:title" content="WordPress & WooCommerce Agentur JoeWP" />
<meta property="og:description" content="WordPress Agentur JoeWP | WP Agentur ✅ Profitieren Sie von 19 Jahren Erfahrung in WordPress und WooCommerce Shops und Google PageSpeed Optimierung" />
<meta property="og:url" content="https://joewp.com/" />Why are Open Graph Tags important?
People are much more likely to see and click on shared content with optimized tags. This generates more traffic in social media traffic to your website.
There are the following reasons for this:
- They make content more eye-catching on social media feeds.
- They show users at a glance what the content on your site is about.
- They help Facebook understand what the content is about. This helps increase your brand’s visibility through search.
Which Open Graph tags should be used?
Facebook lists Open Graph Tags in its official documentation, along with dozens of object types. They don’t all have to be used. We’ll show you the most important ones so Facebook understands the basics of your Page.
So here are the key Open Graph tags:
The title of your website
<meta property="og:title" content="WordPress & WooCommerce Agentur JoeWP" />Recommended course of action:
- Add the tag to all “shareable” pages.
- Write a short and concise description. There is no limit to the number of characters, but you should stay between 60 and 90 characters. If your title is longer than 100 characters, Facebook will limit it to 88. It’s better to have fewer than 55 characters because it will ensure that your title will be visible on both desktop and mobile.
- Use the plain title.
The URL of the content
<meta property="og:url" content="https://joewp.com/" />Recommended course of action:
- Use the canonical URL.
Image – The URL of an image for the social snippet
Note that this is perhaps the most important Open Graph tag as it takes up most of the social feeds.
<meta property="og:image" content="https://joewp.com/wp-content/uploads/2022/02/open-graph-1200x600-1.jpg" />Recommended course of action:
- Use custom images for “shareable” pages (e.g. homepage, article, etc.)
- Use your logo or other branding image for the rest of your pages.
- Use images with an aspect ratio of 1.91:1 and a minimum recommended size of 1200 x 630 pixels for optimal viewing on all devices.
Type – The type of item you are sharing. (e.g. article, website, etc.)
<meta property="og:type" content="website" />Recommended course of action:
- Use “article” for articles and “site” for the rest of your pages.
- If applicable, further describe object types (optional).
Description – A brief description of the content
<meta property="og:description" content="WordPress Agentur JoeWP | WP Agentur ✅ Profitieren Sie von 19 Jahren Erfahrung in WordPress und WooCommerce Shops und Google PageSpeed Optimierung" />Recommended course of action:
- Complete the title to make the snippet as engaging and click-friendly as possible.
- The tag defines the short description of your content, but should be longer than 200 characters. However, there is no real limit. You can display up to 300 characters, but it’s better if you limit this to 200.
Locale – Defines the content language
<meta property="og:locale" content="de_DE" />Recommended course of action:
- You should only use it for non-American English (en_US) content. Facebook assumes that content without this tag is written in this language.
How to set up Open Graph tags in WordPress
Install the Yoast SEO plugin. For a post or page, go to the Yoast editor in the WordPress dashboard. Find the “Social” tab and then the “Facebook” tab.
Fill in the fields appropriately to set the og:title, og:description, and og:image tags.
Manual setting is not required for the og:url tag. Yoast does this for you. Yoast also adds other useful tags like image dimensions.
TIP: If you don’t set up an Open Graph image and the post contains a featured image, Yoast will use that by default. It also adds other Open Graph and Twitter Card tags that don’t require manual setup like: site name, image dimensions, etc.
It also makes sense to set a site-wide og:image tag. This appears when a shared URL doesn’t have a custom tag set.
You can find the option to do this in Yoast’s settings.
Yoast > Social > Facebook
Make sure the toggle is set to Enabled, then upload an appropriate image.
How do I manually add Open Graph tags to a page?
If you like to operate with website code, adding Open Graph tags is possible by pasting them into your website area. Be careful to avoid syntax errors. In WordPress you can also use various plugins.
In order to place Open Graph tags in your website’s source code, all you need to do is know what data you can define and then customize the commands to your own liking.
You start with the following line of code:
<html prefix=“og: http://ogp.me/ns#“>This shows that you are working with Open Graph and that Facebook will find corresponding information in your source code.
The four main Open Graph tags used by most webmasters are: og:title, og:type, og:url, and og:image.
For example, to include the title of your website, use the following code:
<meta property="og:title“ content=“Der Titel deiner Website“ />How to test Open Graph tags
If you want to control how your content is displayed, you can use Facebook’s Sharing Debugger. This will show you a preview of how your page would now be shared. This allows you to find and fix problems. The debugger will also show you warnings.
Here are the recommended tools:
The tools all work the same way. You pull tags off the page and show what they look like when shared. By testing, you can rule out problems occurring in live operation.
TIP:
Use og:image:width and og:image:height tags to ensure a perfect snippet when someone shares it for the first time. In WordPress, Yoast adds them automatically. This is their syntax:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
How to check the Open Graph tags
If you already have a website with a lot of pages and you’re not sure which ones are already using Open Graph tags, you can use a tool to check pages in bulk. Here is the appropriate test tool:
Official Open Graph Debugger tools to validate your tags
Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
LinkedIn: https://www.linkedin.com/post-inspector/
Pinterest: https://developers.pinterest.com/tools/url-debugger/
Conclusion
OG tags are important for your social media presence, but you don’t have to spend a lot of time on them. Focus on understanding the basics. Add tags, check social media previews and debug.
