Open Graph
Open Graph
The Open Graph protocol (OGP) is a standard published by Facebook in 2010 with which a website defines, through meta tags in its source code, how its links appear as a preview card in social networks and messengers - with which title, which text and which image. Without that information the network picks for itself.
| Short form | OGP; markup happens through meta tags with the prefix og: |
|---|---|
| Introduced | 2010 by Facebook, used across platforms today |
| Most important tags | og:title, og:description, og:image, og:url, og:type, og:site_name |
| Image format | 1200 × 630 pixels; minimum 200 × 200, keep the aspect ratio |
| SEO effect | none directly - the tags work through clicks from social networks |
What is the Open Graph protocol?
The Open Graph protocol (OGP) is a standard published by Facebook in 2010 through which content is displayed in social networks. With the Open Graph protocol webmasters can define how certain links are displayed. For that purpose the Open Graph protocol provides numerous meta tags that are inserted into the source code of a website.
True to the motto sharing is caring, one thing holds: a website whose presentation has been optimised through Open Graph meta tags gets shared more often on Facebook, X and the rest.
What are Open Graph tags and why do they matter?
When a URL is shared by visitors in a social network (Facebook, for instance), only a preview is displayed. If Facebook finds no indication on the website of which content should be shared and displayed, it picks suitable headings, text passages and an image on its own. One important detail: preview bots read the HTML head only and execute no JavaScript. If the tags are set in the browser first, the preview stays empty - see JavaScript SEO.
With so-called Open Graph tags site operators can specify which content should be shown in the preview on Facebook. A tag is essentially a label with which certain content of a website can be marked. A Facebook tag works similarly to the labels of schema.org, which mark content that should appear in the rich snippets on Google. The most important tags are:
og:title - defining the title of the URL
This title tag is used to give the network a title. That title can, but does not have to, match the actual title of the website. It can be chosen freely, which makes it possible to adapt the title to the expectations of the social media audience.
The og:title can have a maximum length of around 95 characters. A shorter title of about 50 characters is recommended, though. Beyond that length a line break occurs, and a line break usually affects readability negatively. The title tag can be placed in the source code like this:
meta property="og:title" content="Buy visitors on eBesucher"
og:site_name - defining the name of the site
This Open Graph tag can be used to give the social networks a site name for display. The tag is useful when the page is a subpage of a larger website. Without the tag the social network derives the site name from the URL. The following og:site_name tag returns eBesucher as the site name.
meta property="og:site_name" content="eBesucher"
og:description - a short description for social networks
The og:description tag lets the webmaster adapt the short description of the content for the social networks. A maximum of around 300 characters can be used for the description on Facebook. Depending on how long the title and the URL of the website are, less space is available. A text length of at most 200 characters has proven itself for the og:description tag. That way you can make sure the content is practically always shown in full. Unlike the meta descriptions of web pages, the content of the Open Graph tag has no significance for search engine optimization. That means keywords important to the website have no effect on SEO here.
og:type - website, article or video?
The og:type tag declares the object type, for example "website", "article" or "video.movie". Depending on which object type is declared, further properties of that object may have to be given as well.
og:image - the most important OG tag
The Open Graph image tag is one of the most important meta tags. It defines the preview image and is therefore responsible for how the post looks. A meaningful image is an essential part of the preview of a website and should make viewers curious about its content. Setting the preview image is recommended, because otherwise the network picks an image from the website arbitrarily. The image itself does not have to be present on the website. The tag is inserted into the source code of the page like this, for example:
meta property="og:image" content="https://example.com/og.png"
Open Graph image - the optimal format for preview images
1200 × 630 pixels counts as the optimal format for the preview image (og:image) on Facebook. At that size the image is displayed by the social networks above the title and the description. Important alongside the definition of a preview image is the accompanying alt tag. That tag contains a description of what can be seen in the image. The text is displayed when images are disabled in the user's browser, and it is used by screen readers. Whenever a specific Open Graph image is given, the og:image:alt tag should therefore always be given as well.
If no image of that size exists, the image can also be posted at 600 × 315 pixels. What matters is that the aspect ratio stays the same. If it does not, the image is cropped and only shown in part. The minimum size of an Open Graph image is 200 × 200 pixels, but it is not recommended.
og:url - specifying the URL
The og:url tag defines the URL and therefore the web address of the page being shared. This tag is always used when different addresses are used for pages with identical content, which is frequently the case in online shops. With the og:url tag you can make sure the right page is always linked.
The Open Graph debugger - checking shared content
With the Sharing Debugger provided by Facebook you can check whether the shared website content is displayed correctly on Facebook or in Facebook Messenger. The second important function of the debugger is clearing old content from the Facebook cache. Once a page has been shared on Facebook, the platform stores all content in a cache. Changes to that content - a new preview image, for instance - are not adopted automatically. Only with the debugger can outdated content in the Facebook cache be cleared so that the updated content is stored and displayed afterwards. The button for it in the debugger is called Scrape Again. A Facebook account is required to use the debugger, and the page has to be online before it can be checked.
Optimising OG tags with Open Graph plugins
As with so much on the web, Open Graph tags are not a static matter. It is worth checking images, descriptions and titles regularly. Standards can change or become outdated quickly. Beyond that, the success of Open Graph meta tags is easy to measure through the click rate. Social networks offer their own statistics here with which interaction, click rate and so-called engagement can be measured. For content management systems (CMS) such as WordPress there are dedicated plugins for managing Open Graph meta tags. A WordPress plugin or a Joomla plugin is usually free of charge and is recommended especially for less experienced webmasters. Incidentally, the same design rules apply to the preview image as to classic banner advertising: a clear message, no cluttered motif.
