"GeloCubed" Logo 2

Open Graph Meta Tags — The Definitive Guide for 2023

Commonly confused with Original Gangster (😎), the OG tags are not the original meta tags, nor capable of violence. The Open Graph meta tags are snippets of codes, implemented to make your social media posts more visually appealing and consistent across platforms.

What are Open Graph Meta Tags?

Developed by Facebook’s Open Graph Protocol, OG tags are pieces of code that dictate how your URL’s are displayed on social media. The Open Graph Protocol is used by LinkedIn and Facebook, whilst Twitter uses their version of it, in the Twitter card tag.

You can find the Open Graph tags in the <head> section of the page, denoted by the prefix “og:” for example:

Open Graph Tag example

Why are Open Graph Tags important?

Users are more likely to engage with and remember content that has been optimised with OG tags as they look more aesthetically appealing.

On top of improving user engagement, the OG tags helps social media understand what the post’s content entails, which can help push it to the right people which improves brand awareness and visibility. Ultimately, driving traffic to your site.

OG tags with and without example courtesy of prerender.io
OG tags with and without example courtesy of prerender.io

How many Open Graph Tags are there?

Officially, there are 17 Open Graph tags according to their Sharing Guide not including the other object types available. The 3 main categories for OG tags are:

  • Basic Tags
  • Video Tags
  • Image Tags

Here, we will focus on just the basic tags.

Basic Tags

There are 5 basic tags:

  • og:url — URL tag
  • og:title — Title tag
  • og:description — Description tag
  • og:image — Image tag
  • og:type — Object type tag
  • og:locale — Locale tag

URL tag

This should contain the canonical URL of the page, this way all the engagement data, such as likes and shares, across all duplicate URL’s can be aggregated and stored,

Code snippet example: <meta property=“og:url” content=”/blog/web3-seo-a-golden-opportunity”>

Title tag

This tag needs to display the title of your page. Ideally, keep the title short to prevent truncation, with a focus on clickability and add it to all shareable pages on your site.

Code snippet: <meta property=og:title” content=” GeloCubed | A Web3 Native Marketing Agency”>

Description tag

Should be a succinct description of the content, and should be relevant to the title making the post appealing and intriguing (you can use the meta description if it’s suitable). Once again, keep it quite short to avoid truncation.

Code snippet: <meta property=”og:description” content=”New industries bring about new challenges, and more importantly, new opportunities, and theres a huge one in Web3 SEO!” />

Image tags

The tag should contain the URL of the image for social snippet, and is the most important OG tag as it takes up the most virtual real estate on the post.

You should use custom images for shareable pages, include branding and ensure image dimensions of 1200×630 for a clear picture on all devices.

Code snippet: <meta property=“og:image” content=[enter image address] / >

Type tag

Should encompass the object you are sharing, whether its a a website, article, profile etc. Check out the object list! make sure the object described is relevant to whats being shared.

Code snippet: <meta property=”og:type” content=”website” />

Locale tag

Here we define the language the content is written in. Facebook assumes the content is written in American English (en_US) so its best practice to only use the tag for content thats not written in that language.

Code snippet: <meta property=”og:locale” content=”es-ES” />

Twitter Cards

Twitter cards are similar to Open Graph tags but just have their own versions of the code!

The code is identical but with one tweak: replace “og” with “twitter” (and “card” instead of “type” for the type tag) and thats it, you’re all set!

Duplicate Open Graph tags

An issue that we sometimes see, is pages with duplicate OG tags. Having duplicate Open Graph tags can confuse sites as they wont know which image or title to use, which can lead to them not displaying the intended item and affect the overall post. Make sure you are using only Open Graph tag per object type to ensure full control over what content users see.

How to implement Open Graph tags

If your website doesn’t use a CMS like WordPress, then you simply pass them through the <head> section of the page. To ensure there are no syntax errors, you can generate the snippet using markup generator tools like Metatags.io or Mega Tags.

WordPress implementation

When using WordPress, the easiest way to get Open Graph tags is to install the Yoast SEO plugin! head to the social tab in the page or post editor, and fill in the information and you will have your og title, description and image tags set.

Yoast will set your og:url tag automatically along with other things such as image dimensions. As a best practice, its good to set a site wide Open Graph image tag, to be shown when a custom tag isn’t specified. You can set it under the facebook settings in the social tab.

How to test Open Graph tags

Implementing them is one thing, but making sure they work is another! There are certain tools which allow you to check if the tags are working as intended:

  • Sharing Debugger — Facebook
  • Twitter Card Validator-Twitter
  • Post Inspector — LinkedIn

using these tools you can check whether your tags are functioning properly, and displaying objects how you want, and you can use a tool like Ahrefs to audit your social tags!

Overall,

Open Graph tags are important for ensuring your social media posts appear as appealing and memorable as possible, with the virtual real estate provided. They are a key player in driving engagement and traffic from social posts.

I hope this piece shed a bit of light onto the importance of OG tags, and as ever if you enjoyed the content don’t forget to share!

If you are looking for a web3 native agency to help boost visibility and engagement of your project, don’t hesitate to get in touch with us on TwitterLinkedIn, or through our site!

Table of Contents

Ramsey Shallal

Co-Founder + Strategy

Ramsey has been in the Web3 space for 3+ years, and is leveraging that experience to create generative marketing solutions, that drive organic growth through improved brand experience and authority

Latest Posts

News & Blog

Related articles

LEarn from Experts

Subscribe to get the Latest Industry Insights

Get a Free Audit

Let us understand your requirements and we will ensure that we cultivate an experience that leaves customers feeling good about your project.

Get in touch

Let us understand your requirements and we will ensure that we cultivate an experience that leaves customers feeling good about your project.

The Feedback Loop from Hell

1

Reliance on hype and the performance of the bull market to gain visibility

2

Excessive use of guerilla marketing and other unsustainable practices centred on the short term

4

Weak brand image and foundations makes it excessively difficult to scale organically

3

Lack of focus on building foundations for the long-run.