What Is Open Graph and Why Should You Include It on Your Website?
Open Graph is a protocol that makes your website look more engaging when shared on social media. It lets you define the title, image, description, and URL for each link. This increases visibility, drives organic traffic, and makes your content stand out.
Nowadays, it’s very common to share information from a website, application, or even an activity through your preferred social network. Whether it’s on Facebook, Twitter, or LinkedIn, sharing articles, songs, videos, or any digital content is part of our daily lives—and essential for driving organic traffic. But how do social networks detect exactly what kind of digital content is being shared? They use the Open Graph protocol for this.
In this article, we’ll go over what the Open Graph protocol is, what it’s used for, and why it’s recommended to include it on your website.
What is Open Graph?
Open Graph is a protocol developed by Facebook in 2010 to improve integration between websites and Facebook. As mentioned on the official Open Graph site, the protocol allows websites to become rich objects in a social graph. In artificial intelligence terms, rich objects are entities that can’t be fully described or represented but about which statements can still be made.
What does this mean in practice? The Open Graph protocol helps social networks like Facebook (and today Twitter, LinkedIn, and even WhatsApp) display shared content as objects that are easy for these platforms to interpret and present. Essentially, you’re giving your website specifications that are primarily detected by social networks and used when publishing or sharing links or URLs.
How does Open Graph work?
It’s quite simple: all you need to do is make sure your site’s code includes basic metadata. These are lines of code using the <meta> tag, which must be placed within the <head> of your website.
Don’t worry—if your site is built on a CMS like WordPress, you can use a plugin to easily add these tags without touching any code.
The four required properties to make your site a rich object are:
- og:title – The title of your website.
- og:type – The type of object, e.g., website, music, video, etc.
- og:image – The URL of an image that should represent your website.
- og:url – The URL that identifies the object.
For example, here is the Open Graph code from the BlueTide website:
<!-- OpenGraph --> <meta property="og:url" content="https://bluetideconsulting.com/"/> <meta property="og:title" content="Desarrollo y Diseño Web Panamá | BlueTide Web Consulting"/> <meta property="og:image" content="https://bluetideconsulting.com/assets/img/socialmedia.jpg"/> <meta property="og:description" content="Servicios de desarrollo y diseño de páginas web en HTML5, WordPress, e E-Commerce. Servicios de SEO, Google AdWords, y licencias G Suite. Ubicados en Panamá. "/> <meta property="og:type" content="website"/>
As you can see, we even have a dedicated image specifically for Open Graph.
If you’d like more information, we recommend checking out the official Open Graph site.
Why include Open Graph on your website?
When developing a website, it’s important to clearly define your site strategy. Do you want to sell, capture leads, or increase your brand presence? If one of these is your goal, chances are your strategy will involve one key element: sharing content.
Whether it’s blog posts, videos, or even the homepage of your website, sharing content remains one of the most effective ways to increase organic and relevant traffic. The Open Graph protocol ensures that when a link is shared on social media, the title, description, URL, and even the image you choose appear correctly to represent the shared content.
You’ve probably noticed that when you share certain website links or YouTube videos on a social network, they show up with an eye-catching preview object. That’s Open Graph in action!
It’s the difference between sharing a link on Facebook like this:
- Without Open Graph: plain, unattractive URL.
- With Open Graph: a visually engaging link with title, description, and image.
Or the difference between sharing a video on WhatsApp like this:
- Without Open Graph: plain link.
- With Open Graph: preview with thumbnail and details.
Which one grabs your attention more?
The takeaway
Open Graph not only makes your links more appealing when shared, it also displays the most important and relevant information to the user before they even click. A user can quickly understand what a website, article, or video is about, which helps filter audiences who are genuinely interested.
At BlueTide, we make sure to include the Open Graph protocol in every website we develop. We believe in being ethical and transparent when sharing information, and Open Graph provides users with a quick snapshot before they decide to visit a shared link.
Recommended Articles
- How Companies Are Improving Their Websites with Artificial Intelligence — About how to use AI to modernize digital presence.
- 10 Reasons Why Your Business Needs a Website — Key arguments about the value of having a solid website.
- Personalized Marketing: What It Is, Strategies, and Real Examples — Useful strategies that complement how to present shared content on social media.
