Open Graph: what it is and how to use it on your site
By Tiago CostaUpdated on July 2, 2026
Open Graph is a set of meta tags that define how your link looks when shared on social media. The main ones are:
- og:title, the card title;
- og:description, the short description;
- og:image, the preview image;
- og:url and og:type, the address and the type of content.
What Open Graph is
Open Graph is a protocol created by Facebook in 2010 to standardize how web pages present themselves when they are shared on social networks. Before it, each platform guessed in its own way what to show from a link, and the result was unpredictable.
In practice, Open Graph is a group of meta tags that sit in the head of the page's HTML. They do not appear to people reading the content, but they are read by social networks to build the preview card with title, description and image. All of them follow the og: prefix, for Open Graph.
How Open Graph works: the main tags
The protocol has a handful of essential tags. With them, you control each part of the card that will appear in the feed:
| Tag | Function |
|---|---|
| og:title | Sets the title shown on the card, which can be different from the page's title tag. |
| og:description | The short description of the card, in the spirit of a meta description. |
| og:image | The preview image, the element that grabs the most attention in the feed. |
| og:url | The canonical URL of the shared content. |
| og:type | The type of content, such as website, article, product or video. |
There are also supporting tags, like og:site_name and og:locale, and extensions for specific content (articles, videos, products). But the five above already cover the vast majority of cases.
Open Graph and SEO: the relationship
It is worth clarifying one point: Open Graph is not a direct ranking factor. The og: tags do not make your page rise on Google on their own, and the search engine has its own signals, such as the title tag and the meta description, to build the result in search.
The relationship is indirect, but real. A link with a well built card, a clear title and an attractive image gets more clicks when it is shared. More clicks and more shares mean more visibility, more visits and more chances of someone linking to your content. In other words, Open Graph takes care of the social storefront, and that storefront indirectly feeds SEO.
og:image: the image that decides the click
Among all the tags, og:image is the one that most influences the click. It is the large image that appears on the card, and it takes up most of the visual space in the feed. A few precautions make a difference:
- use the ratio of 1.91 to 1, with 1200 by 630 pixels as a safe reference;
- provide the full, absolute URL of the image, starting with https;
- avoid text that is too small, which vanishes in the thumbnail;
- describe the image in the og:image:alt tag, in the same spirit as good alt text.
If you do not set an og:image, the social network will pick any image from the page, or none, and the card loses strength. Setting the right image is the detail that most improves the look of the shared link.
Open Graph, Twitter Cards and other networks
Open Graph was born at Facebook, but it became a de facto standard adopted by LinkedIn, WhatsApp, Telegram, Slack, Pinterest and many other platforms. In practice, marking up Open Graph solves the preview in most of the places where your link will be shared.
X (formerly Twitter) has its own set, the Twitter Cards, with tags such as twitter:card and twitter:title. The good news is that X falls back to Open Graph when it does not find its specific tags. That is why the recommended minimum is to always have a complete Open Graph, and to complement it with Twitter Cards only when you want finer control on that network.
How to implement and test Open Graph
Implementing Open Graph is simple: just add the meta tags to the head of each page, ideally with unique values per URL, and never the same ones for the whole site. Many CMS platforms and SEO plugins generate these tags automatically from the title and the featured image.
After publishing, always validate. The networks have official debuggers: Facebook's Sharing Debugger, LinkedIn's Post Inspector and third party preview tools. They show how the card will look and help clear the cache when you update an old image.
Finally, it helps to reinforce the same signals with schema markup, which describes the content to search engines. Open Graph takes care of social networks and schema takes care of search, and the two together keep your content well presented everywhere.