Silas Wolf

Show all posts
An 'Open' sign
Tweet

Open Graph - What is it?

The Open Graph Protocol is there to present your URLs in a user-friendly way on social media. With proper use, you can enhance your social media presence. In this post, you'll learn everything you need to know about the Open Graph Protocol.

Key takeaways

  1. The Open Graph Protocol allows you to present your URLs in a user-friendly manner on social media
  2. Depending on the platform, there are various considerations for content creation
  3. Setting up and using Open Graph is simple
  4. There are many different tools that can help

The Open Graph Protocol (OGP) is designed to make your URLs appear user-friendly on social media. With proper usage, you can enhance your social media presence by displaying relevant information effectively on platforms like Facebook, Instagram, LinkedIn, Twitter, and Pinterest.

In this post, you’ll learn everything you need to know about the Open Graph Protocol. Additionally, I’ll provide you with knowledge about using basic Open Graph tags that will help improve your website.

What is Open Graph?

Open Graph Meta-tags on your website assist crawlers in capturing important content for social media. Open Graph was originally developed by Facebook and helps present your content attractively on social media: with fitting images, meaningful headlines, and strong descriptions.

Precisely Controlling Content’s Appearance on Social Media with Open Graph

On social media, you have a lot of control: you can post images that look exactly as you want. You can then provide these images with a juicy description that gives your followers even more information. This works well until you share a link to your website, such as your latest blog article: Oh dear, what is this? It doesn’t look good at all! No image is displayed, the title doesn’t fit your target audience, and the description doesn’t encourage clicking the link. But you actually want your link to look like this: Screenshot of the Twitter Card

With an image, title, and description that perfectly match your target audience and platform. Without these compelling contents, potential viewers scroll past and click on your competitors’ content.

Open Graph tags, or ”OG tags,” come to the rescue! They turn your website into an element of the social graph, an object that social media networks can read. Links to your website can then be presented in an illustrative manner: people who see your post become curious immediately and are more inclined to Share, Like, comment, or click on the link.

Furthermore, this illustrative representation leads to greater transparency. Users know exactly what to expect behind the link - this builds trust and reassures them.

Important: Without OG tags, some social media platforms will try to read your website and piece together suitable representations. Ultimately, your URL will not be displayed the way you want it to be.

Adding Open Graph tags is very simple - they are integrated into the head element of your website. This doesn’t change anything for regular visitors to your website! Only the appearance on social media changes.

How to Implement Open Graph Tags on Your Website

Metadata, including Open Graph information, is stored in the head element of your website. If you’re using WordPress, you can easily adjust this information with a plugin like RankMath or Yoast SEO. Alternatively, you can directly modify the HTML head element of your website. If you need assistance, it’s best to consult a developer.

The meta tags in the head element could look like this, for instance:

<head>
  <meta
    property="og:image"
    content="https://www.silaswolf.com/blog/headless-wordpress.jpeg"
  />
  <meta
    property="og:title"
    content="Headless WordPress - What is it and how do I get started?"
  />
  <meta
    property="og:description"
    content="Headless WordPress is a relatively new way to use WordPress as a Content Management System. This article covers all the pros and cons, along with helpful tips."
  />
  <meta
    property="og:url"
    content="https://www.silaswolf.com/en/blog/headless-wordpress/"
  />
  <meta property="og:type" content="article" />
</head>

In this example, the title, image, description, type, and URL are specified.

Need help setting up your Open Graph content?

Feel free to reach out to me! I'm happy to help.

Contact now

Using OG tags, you determine the type of content (e.g., “Blog article”), define a title, write a brief description, and include a suitable image. You can find further information easily on the official website of the Open Graph Protocol.

The Most Important Open Graph Tags

You now know precisely that Open Graph tags are a good idea to increase the “Conversion Rate” on social media. A polished presentation of your content leads to a better user experience and an overall professional image. There are many Open Graph meta tags, but for effective representation on popular social media platforms like Facebook, LinkedIn, or Twitter, the four standard tags are sufficient:

  • og:title - The title of the content. Choose it in a way that strongly motivates users to click on the URL.
  • og:image - A URL to an image that fits well with your content.
  • og:type - The type of content: a blog article, a website, a video, or an audio content.
  • og:url - Provide the appropriate URL for the content.

There are many other tags that you can find on the official Open Graph Protocol website.

Open Graph on Different Platforms

Depending on the platform, you need to consider some things when adding your Open Graph tags. Here’s a brief overview.

OG Image Dimensions

The desired dimensions for Open Graph images differ based on the platform. The table below provides the most important information:

PlatformDimensions
Facebook1200 x 630 px
Twitter1200 x 675 px (minimum), 4096 x 4096 px (maximum)
LinkedIn1200 x 627 px
Pinterest1000 x 1500 px (2:3 aspect ratio)

Also of interest:

  • Try to use minimal to no text on your images.
  • 1200 x 630 px is often the best choice.
  • Aim to keep your images under 8 MB.

Open Graph Title and Description

Your title should be around 60 characters long. The Open Graph description works best with 150-160 characters.

Open Graph on X (formerly Twitter)

X (formerly Twitter) uses “Twitter Cards” to display shared URLs. It looks like this:

<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta property="twitter:domain" content="silaswolf.com" />
  <meta
    property="twitter:url"
    content="https://www.silaswolf.com/en/blog/headless-wordpress/"
  />
  <meta
    name="twitter:title"
    content="Headless WordPress - What is it and how do I get started?"
  />
  <meta
    name="twitter:description"
    content="Headless WordPress is a relatively new way to use WordPress as a Content Management System. This article covers all the pros and cons, along with helpful tips."
  />
  <meta
    name="twitter:image"
    content="https://www.silaswolf.com/blog/headless-wordpress.jpeg"
  />
</head>

It’s best to include both Twitter Card tags and the standard OG meta tags. This way, you can guarantee that your shared URLs look good everywhere.

Tips and Tools for Open Graph

There are many tools that can help you work with Open Graph. These tools primarily include checkers, testers, and generators. Here’s an overview:

Conclusion

In this article, you’ve learned how to use the Open Graph Protocol to enhance your social media presence. Thank you for reading until the end! Feel free to let me know how you liked the article and what questions you still have.