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:
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:
|1200 x 630 px|
|1200 x 675 px (minimum), 4096 x 4096 px (maximum)|
|1200 x 627 px|
|1000 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:
- My Own Tool - easily and 100% free, check your website
- LinkedIn Post Inspector - the LinkedIn Post Inspector
- Facebook Sharing Debugger - unfortunately, you need to sign in with a Facebook account
- Twitter Card Validator - Card validation on Twitter
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.