What Are OGP Tags?
If you’re wondering what are OGP tags then this is the article for you. Open Graph Protocol tags improve social media engagement by controlling how content appears when shared on supporting platforms.
Table of Contents
It might be easier to show the result of including Open Graph Protocol tags (OGP tags) on a post when the URL is shared on a website or application that supports the OGP protocol — in the following example, we’ll use the WhatsApp messaging application and post two URLs: one without OGP tags, and one with OGP tags.
A URL To A Webpage Without Open Graph Meta Tags
The picture below shows the result of posting a URL to the WhatsApp messaging application without any Open Graph metadata included on the webpage — this gives us almost no information, other than what’s included in the URL, about what the URL points to — we can guess given the URL path, in this case, but not all URLs will be so easy to parse, plus there’s a better way to do this and that’ll be made clear in the next section.
We can do better than this using Open Graph Protocol tags and we’ll look at the difference in the next section.
A URL To A Webpage With Open Graph Meta Tags
The image below, on the other hand, demonstrates what happens when I share the URL to the article entitled How to Fix the og:image Open Graph Meta Tags are Missing Critical Issue on WhatsApp, which supports the OGP meta tags. Instead of seeing a raw URL with no context around it WhatsApp renders part of the content using data included in the OGP tags set on this page.
This WordPress website, and others that I manage, use the All In One SEO Pack Pro and one of the features this plugin delivers is social media integration for Facebook and Twitter that can be applied to each post or page, and I make sure that these settings are configured every time I’m developing content.
As we can see with the two pictures above, one stands out and the other doesn’t.
This is important for obvious reasons and since we want every opportunity for our content to perform well, using Open Graph tags is an easy win and one which we want to take advantage of.
On the right-hand side of this page I’ve included one more example regarding where Open Graph Protocol tags are supported and that’s on the LinkedIn Professional Networking website.
The image on the right includes a preview of this article which, when shared on LinkedIn, stands out much better than a raw URL ever would.
In the next section we’ll give a crash course introduction to Open Graph Metadata Tags.
Open Graph Meta Tags Crash Course
As stated already, when it comes to Digital Marketing we want to take advantage of every opportunity to develop content that performs well in search engines as well as on social media and OGP tags help specifically when it comes to sharing content on social media platforms and is specific to Off-Page SEO and should be viewed as a requirement for any serious content engineering effort.
OGP metadata tags improve the visibility of your content when shared on social media websites and applications that support the protocol.
As demonstrated in the previous section of this article, recipients of links that point to pages that include OGP tags will see an eye-catching rich snippet instead of a raw URL.
This can lead to a higher click-through rate that indirectly improves Search Engine Optimization (SEO).
What is the Open Graph Protocol?
Open Graph Protocol (OGP) is a set of metadata tags that are added to the HTML code of a web page. The Open Graph Protocol was introduced by Facebook in 2010 and allows web developers to control how their content appears when shared on social media platforms such as Facebook, LinkedIn, and others, including applications such as WhatsApp and Skype, which both support Open Graph Tags.
As of July 2023, there are four required OGP tags and many optional tags available covering image, music, and video content and supporting structured metadata properties as well.
The OGP tags define specific information about a given web page, such as its title, description, image, and URL, which can be used by social media platforms to generate rich and engaging previews when the page is shared. By incorporating OGP tags, website owners can have more control over how their content is presented on social media platforms and applications that support the protocol, increasing the likelihood of attracting users’ attention and encouraging them to click through to the website.
The Open Graph Protocol and Social Media Marketing
Open Graph Protocol metadata tags offer significant value in the realm of social media marketing due to their ability to control how content appears when shared on platforms like Facebook, Twitter, LinkedIn, and applications such as WhatsApp, Skype, and others.
Below I’ve included several benefits that OGP metadata tags deliver as it pertains to social media marketing.
Open Graph Protocol Tags Deliver Visual Consistency
Open Graph Protocol tags allow website administrators the ability to define the image, title, and description that appear when content is shared on supporting platforms — this ensures that your brand’s visual identity remains consistent across various social media channels thus promoting brand recognition as well as trust.
OG Tags Facilitate Enhanced Engagement
OG tags help to create visually appealing and informative previews, increasing the likelihood of users clicking a link — this should lead to higher engagement rates, and more likes, shares, and comments.
OGP Tags Convey Cohesive Branding
By adding OGP Tags, you control how your content is presented, thus ensuring that it aligns with your brand’s messaging and tone — this consistency strengthens your brand’s image and voice in the minds of users.
Open Graph Tags Deliver A Better User Experience (UX)
Clear and relevant titles, descriptions, and images provided by Open Graph tags make it easier for users to understand the content they are about to engage with thereby improving their overall experience.
OG Tags Facilitate Optimized Sharing
OG tags enable you to craft content specifically for sharing purposes. You can select the most compelling image and craft a description that highlights key points, encouraging more shares and driving traffic to your website.
Open Graph Tags Positively Influence The Click-Through Rate (CTR)
Open Graph Tags positively impact Click-Through Rates (CTR) for shared links. When users see an appealing preview, they are more likely to click on it, thereby increasing the traffic directed to your webpage.
Open Graph Metadata Tags Are Cross-Platform Compatible
Open Graph metadata tags are supported by various social media platforms thereby ensuring that your content looks appealing and informative across multiple channels — this consistent appearance enhances your content’s effectiveness when sharing links.
Open Graph Protocol tags are a crucial component of social media marketing as they enable you to curate the presentation of your content, leading to improved engagement, brand recognition, and user experience, ultimately contributing to your overall marketing success.
Open Graph Protocol and Twitter
Note that Twitter supports both the Twitter Cards Specification as well as OGP tags. If a link is shared to a page that has Twitter Cards then Twitter will use that metadata however if Twitter Cards are not available, Twitter will use OGP Tags if they’ve been set on the page.
In the image below we can see the Twitter Card settings being rendered prior to a message being posted.
In the next section we’ll take a look at some Open Graph Protocol tag examples.
OGP Tag Examples
Below I’ve included several essential OGP tags along with a brief description regarding their purposes and I’ve noted where each is a required property. The complete list of OGP tags can be found on the Open Graph Protocol website.
og:title (REQUIRED)
The title tag is required and acts as the headline when the content is shared on social media and applications that support OGP tags.
<meta property="og:title" content="What Are Open Graph Protocol Tags? đ¤" />
See the OGP metadata section for more details about the og:title tag.
og:description (OPTIONAL)
The description tag is optional and provides a brief description of the content on the web page. It appears as the text accompanying the shared link.
<meta property="og:description" content="Discover the power of OGP đˇī¸" />
See the OGP metadata section for more details about the og:description tag.
og:image (REQUIRED)
The image tag is required and points to the image that represents the content when shared. The selected image will be displayed as a thumbnail alongside the link and we can see this in the picture above.
Free SEO Consultation
<meta property="og:image" content="https://thospfuller.com/wp-content/.../some-image.png" />
See the OGP metadata section for more details about the og:image tag.
og:url (REQUIRED)
The URL tag is required and defines the canonical URL of the web page, ensuring that the shared link leads to the correct page.
<meta property="og:url" content="https://thospfuller.com/.../some-post/" />
We’re going to spend more time on the og:url than on other properties mainly because we can enhance the value of the og:url by including Urchin Tracking Module (UTM) tracking codes.
The Urchin Tracking Module is still supported in Google Analytics 4 as well.
I came across the idea of adding Urchin Tracking Module tracking codes when I happened upon the Prerender article entitled 5 Easy Social Media Optimizations With Massive Impact.
What is the Urchin Tracking Module?
The Urchin Tracking Module is a system for tracking and analyzing the effectiveness of online marketing campaigns and traffic sources.
UTM parameters are typically appended to the end of a URL in order to provide additional information about the source, medium, campaign, and other details associated with a click or visit. UTM parameters are used by analytics tools, such as Google Analytics, to collect data about website traffic and user behavior.
By using Urchin Tracking Module parameters, marketers and website owners can gain insights into which marketing efforts are most effective, which platforms drive the most traffic, and how users interact with their content. This data facilitates data-driven decisions, optimization of marketing campaigns, along with a better understanding of user behavior on websites. Google Analytics, in particular, makes extensive use of UTM parameters for tracking and reporting on campaign performance.
Adding UTM tracking parameters to your Open Graph Protocol og:url tag, can provide several benefits for tracking and analyzing the performance of shared links on social media and other platforms including:
Detailed Analytics
Urchin Tracking Module parameters allow you to gather detailed data regarding how users interact with your shared links — for example, it’s possible to track the source, medium, campaign, content, and term associated with each click.
This level of granularity helps you to better understand which specific marketing efforts are driving traffic to your site.
Source Attribution
Urchin Tracking Module parameters can help you to identify the exact source of traffic — for example, you can distinguish traffic coming from different social media platforms such as Facebook, Twitter, and LinkedIn or from specific campaigns such as newsletters or paid ads.
Campaign Performance
By using UTM codes in conjunction with the og:url tag, you can assess the performance of different marketing campaigns. This data allows you to compare the effectiveness of various campaigns in terms of click-through rates, conversions, and other metrics.
Content Tracking
Urchin Tracking Module parameters can be used to differentiate various pieces of content shared from the same URL — for example, if you’re sharing multiple articles from your website, UTM codes can help you determine which specific articles are generating the most traffic.**
A/B Testing
UTM tracking codes can be used to facilitate A/B testing and experimentation — for example UTM tracking codes can be used to create variations of the same link with different UTM parameters in order to test different messaging, images, or calls to action.
The presence of UTM parameters also helps to optimize your social media and marketing efforts.
Custom Segmentation
Urchin Tracking Module parameters can be used to segment and analyze traffic in your analytics tools — for example, with Urchin Tracking Module parameters you can create custom reports and dashboards based on Urchin Tracking Module data in order to gain insights into user behavior and conversion paths.
Goal Tracking
UTM parameters can be associated with specific goals or conversions on your website, such as form submissions, product purchases, or newsletter sign-ups. UTM parameters included in this manner can be used to measure the impact of social media and marketing campaigns against your business objectives.
Cross-Platform Insights
Urchin Tracking Module tracking is by no means limited to social media platforms — for example Urchin Tracking Module parameters can be used across various marketing channels, including email marketing, paid advertising, and more thus providing a holistic view of your marketing efforts.
Data-Driven Decisions
UTM-tagged URLs provide valuable data that can be used to inform data-driven decisions — for example, you can allocate resources more effectively, focus on high-performing campaigns, and optimize underperforming campaigns based on the insights gained.
Improved ROI Measurement
UTM tracking allows you to calculate the return on investment (ROI) for different marketing initiatives accurately — for example, UTM tracking can help determine which campaigns deliver the best results in terms of revenue or other key performance indicators (KPIs).
Adding UTM tracking parameters to your Open Graph Protocol og:url helps to deliver comprehensive data on the performance of shared links. This data is essential for optimizing your marketing strategies, understanding your audience, and making informed decisions in order to improve your presence online.
See the OGP metadata section for more details about the og:url tag.
og:type (REQUIRED)
This tag indicates the type of content, such as article, website, product, etc. It helps social media platforms categorize the shared content correctly.
<meta property="og:type" content="article" />
See the OGP metadata section for more details about the og:type tag.
In the next section, we’ll take a look at how to add Open Graph metadata tags to a webpage.
How To Add Open Graph Meta Tags To A Webpage
In this simple example, we’ll cover how to add open Graph Meta Tags to a webpage manually. Personally speaking, I would much prefer either automating this step entirely or using a plugin to help me manage this process with more finesse than if I were to do this manually.
The approach described below will require extra effort for template pages which are used to generate many other pages — in this case, you may need to figure out what parameters need to be set on the content attribute.
Step One: Open the webpage in your favorite editor.
Using your editor of choice open the file that you need to add OGP metadata tags to.
Step Two: Locate the head section.
The OGP tags need to be placed between the head tags, as shown in the image below.
Step Three: Set the values of all required Open Graph Meta Tags.
There are four required Open Graph metadata tags that must be set :
Step Four: Set the values of all optional Open Graph Meta Tags.
There are many optional Open Graph metadata tags that may be used — in this step, you’ll need to determine which tags you need to set and add them to the webpage.
Step Five: Save your changes
We need to save the changes we’ve made to the webpage. The assumption here is that the page is available on the Internet — if this is not the case then we’ll need to test these changes some other way and we’re not going to cover that at this time.
Step Six: Test your changes using the Facebook Sharing Debugger.
Test your changes using the Facebook Sharing Debugger. In the image below we need to add the URL to the page we’ve modified into the text box and then smash the Debug button.
Step Seven: Fix Any Errors and Retest
The image below shows the result of the test and indicates the page has zero errors and one warning. We need to fix errors however we can usually get away with ignoring the warnings.
There’s a warning and no errors so we’re in a good place — if we can fix this warning then great, otherwise we’re going to ignore it and move on to the article conclusion.
What Are OGP Tags: Article Conclusion
I hope this article has answered the question regarding what OGP tags are and how they can be helpful.
We never know who might post a URL to a piece of content that we’ve developed, so including OGP tags should be considered an easy win and one which should be included with every article we release.
If you’re interested in exploring the full details regarding how to audit and add OGP metadata tags with AIOSEO see the following links:
- The AIOSEO SEO Audit Indicates That Some Open Graph Meta Tags Are Missing
- How to fix the Open Graph Meta Tags are Missing critical error in AIOSEO
Including Open Graph tags in a webpage won’t directly help improve Search Engine Optimization (SEO) however these tags can have an indirect and positive impact on SEO, especially when sharing content on platforms such as LinkedIn and Twitter where the audience is very large and the reach potential is significant.
You must log in to post a comment.