Imagine the following situation: you posted a link to your website on Facebook, but instead of a nice preview with your logo and an attractive headline a random image and truncated text appeared. A click on such a link is unlikely. This happens because the social network does not know how your page should look. The solution to this problem has existed for more than ten years — the Open Graph protocol.

Based on our observations at BUSINESS SITE, companies that ignore Open Graph markup lose between 20% and 40% of potential traffic from social networks. At the same time, implementing this protocol takes only a few hours and does not require large investments. In this article I will explain what Open Graph is, why it is critically important for your business, and how to implement it correctly to turn every link into a powerful customer acquisition tool.

What is Open Graph: basics and history

chto takoe open graph osnovy i istoriia h2 img 1 Open Graph what it is and how to use it to promote a website

Open Graph is a microformat standard developed by Facebook in 2010 to solve one simple but pressing problem. When people shared links on social networks, platforms didn’t know which image to show, which title to use, or how to describe the content. The result was unpredictable and often unsuccessful.

The Open Graph protocol allows you to explicitly specify how your page should appear when published on social networks. This is done through special meta tags in the HTML code that contain information about the page: title, description, image, content type, and other parameters.

Today Open Graph is supported not only by Facebook, but also by Twitter, Pinterest, Telegram, WhatsApp, Viber and many other platforms. This has turned the protocol from a niche tool into a universal standard for managing metadata in social networks and messengers.
When we worked with an online store in the electronics sector, the BUSINESS SITE team discovered that without Open Graph markup social networks chose random images from the product page for the preview: often these were payment system logos or banners. After implementing the correct markup, link click-through rates increased by 34%, and traffic from social networks nearly doubled.

Implementing Open Graph: Risks and Benefits

vnedrenie open graph riski i vygody h2 img 2 Open Graph what it is and how to use it to promote a website

Many entrepreneurs think that Open Graph is a detail that can be neglected. This is a serious mistake that can be costly.

Without Open Graph markup the following happens: when someone shares a link to your page on Facebook or sends it in Telegram, the platform tries to determine on its own what to display. It may pick the first image it finds (often a banner or logo), truncate the title if it’s too long, or not show the description at all. The result looks untidy and unprofessional.

This is not just a cosmetic issue. Incorrect preview display directly affects your site’s behavioral metrics. Users are less likely to click on unattractive links, which reduces traffic. In addition, social networks use behavioral signals (clicks, reposts, comments) to determine content relevance. If your link looks unappealing, it will get fewer interactions and the algorithm will show it less often.

Implementing Open Graph markup solves all these problems. You get full control over how your link appears on social networks. This allows:

  • Increase click-through rate. An attractive image, a clear headline, and an informative description encourage users to click the link.
  • Improve behavioral metrics. More clicks mean more traffic and better signals for search engines.
  • Strengthen the brand. Controlled display creates a consistent and professional image for your company.
  • Increase social signals. Attractive previews receive more reposts and comments, which boost organic reach.
BUSINESS SITE’s experience has shown that companies that implemented Open Graph markup see an average increase in social media traffic of 25–40% within the first month. This doesn’t require additional advertising spending: only proper configuration of technical parameters.

How Open Graph Affects Click-Through Rate and Behavior

kak open graph vliiaet na klikabel nost h2 img 3 Open Graph what it is and how to use it to promote a website
Click-through rate: one of the most important metrics in digital marketing. It shows what percentage of people who saw your link clicked on it. Open Graph directly affects this metric.

When a user sees a link on a social network, they make a decision in a split second. Their attention is drawn to the image, then they read the headline and the description. If all of this looks attractive and relevant to their interests, they click. If not, they scroll past it.

Open Graph allows you to optimize each of these elements. You choose the most attractive image (not a random one chosen by an algorithm), write a clear and intriguing headline, and craft a description that answers the user’s question. The result: a significant increase in click-through rate.

But Open Graph’s influence on behavioral factors goes further. Search engines, including Google, track how people interact with your site after following a link. If a user clicked a link in a social network but immediately returned (bounce rate), that is a negative signal. If they stayed on the page, read the content, and completed a desired action, that is a positive signal.

Open Graph affects the first moment of interaction. If the preview promises one thing but the page offers something completely different, the user will leave. If the preview accurately reflects the page content, the user will stay. This creates a positive cycle: better preview → more clicks → fewer bounces → better behavioral signals → higher ranking in search engines.
When the BUSINESS SITE team worked with a travel agency, we noticed that their links to tours on social networks received few clicks. The reason was simple: the preview showed the agency’s logo instead of a beautiful image of a beach or mountains. After implementing Open Graph markup with the correct images for each tour, click-through rate increased by 47%, and average time on page increased by 2 minutes.

Open Graph and metadata: what are they?

open graph i metadannye chto eto h2 img 4 Open Graph what it is and how to use it to promote a website

There is a deeper level at which Open Graph affects your site. It is the concept of the semantic web, the idea that information on the internet should be structured so that it can be understood not only by humans but also by machines.

Search engines, social networks and other platforms constantly analyze content. They try to understand what a page is about, what types of content it may be, which entities are mentioned. The better the information is structured, the more accurately a machine understands it.

Open Graph is one way of structuring information. When you specify og:title, og:description, og:image and other tags, you give platforms explicit information about the page. This is much more reliable than making the algorithm guess.

Standardizing metadata through Open Graph has several advantages:

  • Improved SEO. Search engines understand your content better, which can lead to higher rankings.
  • Better user experience. When information is structured, it’s easier to find and use.
  • Compatibility. Open Graph works across all platforms, ensuring consistent display of your content everywhere.
  • Future readiness. As the internet evolves and new platforms emerge, Open Graph remains a relevant standard.
Practice shows that sites with correct microdata (including Open Graph) achieve better results in search engines. This is especially noticeable for content that is often shared on social networks: articles, videos, products.

Open Graph tags for a website

open graph tegi dlia saita h2 img 5 Open Graph what it is and how to use it to promote a website
Now let’s move on to practice. Which exact tags do you need?

There is a set of mandatory Open Graph tags that should be present on every page of your site:
  • og:title – the page title that will be shown in the preview. It is not the same as the tag in HTML. You can use a shorter, more engaging text. Recommended length: 50–60 characters.
  • og:description, the page description. This is the text that will appear under the headline in the preview. The length should be 150–160 characters. The description should be informative and appealing, answering the question: “Why should I click this link?”
  • og:image – the URL of the image that will be shown in the preview. This is the most important element because people first notice the image. Recommended dimensions: 1200×630 pixels (aspect ratio 1.91:1). Make sure the image loads quickly and looks good on mobile devices.
  • og:url: the canonical URL of the page. This is the address where people can find your page. Use the full URL with the protocol (https://), not a relative path.
  • og:type, the content type. This can be “website”, “article”, “product”, “video.movie” and others. Choosing the correct type helps platforms interpret your content properly.
  • og:site_name, the name of your site or company. This helps users understand where the link comes from.
  • og:locale – the language and region of the content. For example, “uk_UA” for the Ukrainian language. This is important for international sites.
Here is what a basic implementation looks like in HTML:
When we worked with a pharmaceutical company, the BUSINESS SITE specialists found that they used the same og:image for all product pages. That was a big mistake. After we set up unique images for each product, the click-through rate of product links increased by 56%.

Additional Open Graph tags

In addition to the required tags, there are additional tags that help optimize the display of your content in specific situations.

  • og:image:secure_url: this is the image URL for HTTPS connections. If your site uses HTTPS (which it should), specify this tag. Some platforms require a secure URL for images.
  • og:image:width and og:image:height: the image dimensions in pixels. Specifying these parameters helps platforms load the image faster because they already know how much space to allocate.
  • og:image:type: the image’s MIME type (for example, “image/jpeg” or “image/png”). This helps platforms determine the file format.
  • og:video, the URL of a video if your page contains video content. It can be a link to a YouTube video, Vimeo or your own server.
  • og:audio – the URL of an audio file if you distribute podcasts or music.
Here is an extended example:
The practice of BUSINESS SITE has shown that specifying image dimensions (og:image:width and og:image:height) speeds up preview loading by 15–20%. This may seem minor, but on social networks, where loading speed affects content visibility, it matters.

How to implement Open Graph on a website?

There are several ways to implement Open Graph markup. The choice depends on your platform and technical capabilities.

Method 1: Using plugins for WordPress

If your site runs on WordPress, this is the simplest option. There are special plugins that automatically generate Open Graph tags based on the page information.

Popular plugins:

  • Yoast SEO
  • All in One SEO
  • Rank Math
  • The SEO Framework
Installing a plugin takes a minute. After activation you can configure Open Graph tags directly in the WordPress interface. Plugins allow you to set default tags for the whole site and override them for individual pages.

Method 2: Manually adding to the code

If you use another CMS or a custom site, you need to add the tags manually. This is done in the

section of the HTML document.
For each page you need to add tags with information about that page. If you have many pages, this can be automated using scripts in PHP, Python or another programming language.

Method 3: Using an API to generate images

For large sites with thousands of pages (for example, marketplaces or product catalogs) it is recommended to use an API to automatically generate Open Graph images.

There are services that allow you to create images on the fly based on page data. For example, you can create an image template (with a logo, background, fonts), and then the API will insert the product name, price, and other information.

When we worked with the online store «Akon», the BUSINESS SITE team implemented an API for generating Open Graph images. This made it possible to automatically create unique previews for each product without manual work. Result: the click-through rate on product links increased by 38%, and the implementation time was only 2 days.

Checking Open Graph markup

After implementing Open Graph markup, you need to make sure everything works correctly. Special tools are used for this.

  • Facebook Sharing Debugger, the main tool for checking Open Graph. You enter the URL of your page, and the tool shows how that page will look when published on Facebook. If there are errors, the tool will indicate them.
  • Twitter Card Validator, a similar tool for Twitter. It shows how your link will look on Twitter.
  • LinkedIn Post Inspector: for inspecting how it appears on LinkedIn.
  • Telegram Web Preview, for checking in Telegram (although Telegram uses the Open Graph standard, its implementation is slightly different).
The checking process is simple:
  • Open the Facebook Sharing Debugger (facebook.com/tools/debug)
  • Enter the URL of your page
  • Click ‘Debug’
  • Review the result and fix any errors

The tool will show which tags were found, which are missing, and how the preview will look. If something is wrong, fix the tags and repeat the check.

BUSINESS SITE specialists recommend checking Open Graph markup for all important pages of your site: the homepage, product pages, blog posts, landing pages. This will take a few hours, but will ensure correct display everywhere.

Open Graph for social networks: support and integration

Open Graph is supported by most social platforms, but each has its own specifics.

  • Facebook and Instagram: full Open Graph support. All main tags are used.
  • Twitter: uses its own Twitter Cards standard, but also supports Open Graph as a fallback. It is recommended to use both standards for maximum compatibility.
  • Pinterest supports Open Graph but has its own preferences for image sizes (vertical images work better).
  • Telegram: uses Open Graph to generate previews when links are sent in chats.
  • WhatsApp and Viber also use Open Graph for displaying previews.
  • LinkedIn: supports Open Graph but may use its own tags for optimization.
Here is an example of integrating Open Graph with Twitter Cards:
When we worked with a bank, the BUSINESS SITE team noticed that their links looked different across social networks. After optimizing Open Graph and Twitter Cards for each platform, the display became consistent and professional.

Open Graph and AdSense recommended content blocks

If you use Google AdSense to monetize your site, Open Graph can help improve the performance of recommended content blocks.

Recommended content blocks show links to articles from your site (or other sites in the AdSense network). The quality of these recommendations depends on how well Google understands your content.

Open Graph markup helps Google better understand what each page is about. This leads to more relevant recommendations that get more clicks.

Additionally, when recommended content is displayed on social networks (if a user shares a link), correct Open Graph markup will provide an attractive preview, which will increase click-through.
In practice, sites with correct Open Graph markup see an increase in the CTR (click-through rate) of recommended content blocks by 15–25%.

Open Graph and other micro-markups

Open Graph doesn’t work in a vacuum. For maximum effectiveness, it should be combined with other micro-markup standards.

Schema.org is a structured data standard developed by Google, Microsoft, Yahoo and Yandex. It is used for marking up various types of content: articles, products, events, organizations, etc.

Open Graph and Schema.org address different tasks. Open Graph optimizes display in social networh, Schema.org helps search engines better understand the content. Together they provide complete control over metadata.

Here’s an example of combined markup for an article:
When we worked with the travel agency “AnyTour”, the BUSINESS SITE team implemented both Open Graph and Schema.org markup for the tour pages. Result: tour articles started appearing in rich snippets in Google, which increased CTR by 42%.

Best practices and common mistakes

Based on BUSINESS SITE’s experience, here are the most important recommendations for implementing Open Graph:

  • Use unique images for each page. This is the most common mistake. Companies use the same image for all pages. Result – boring and uninformative previews. Each page should have its own image that reflects its content.
  • Optimize image sizes. Recommended size for most platforms: 1200×630 pixels. Make sure the image loads quickly (optimize it for the web) and looks good on mobile devices.
  • Write compelling titles and descriptions. Don’t just copy the title and description from the HTML. Write specifically for social networks. The title should be intriguing, the description informative and prompting clicks.
  • Use the correct content types. Choose og:type according to the type of your page: “article” for articles, “product” for products, “website” for the homepage, etc.
  • Check markup regularly. Especially after site updates or structural changes. Use the Facebook Sharing Debugger and other tools.
  • Don’t forget about og:url. Use the canonical URL to avoid duplicate content issues.
  • Combine Open Graph with other markup. Use Schema.org for search engines and Twitter Cards for Twitter.
  • Automate the process. If you have many pages, use plugins or APIs to automatically generate Open Graph tags. This will save time and ensure consistency.

Conclusions and recommendations for Open Graph

Open Graph is not just a technical detail. It is a powerful tool that affects the visibility of your content in social networks, link click-through rates, behavioral factors and, ultimately, traffic and sales.

Implementing Open Graph markup is one of the most effective investments in SEO and marketing. It requires minimal costs (especially if you use plugins), but delivers significant results.

Here’s my practical advice: start with the homepage and the most important pages of your site (landing pages, popular articles, top products). Implement Open Graph markup, test it with tools, and look at the results. If you see an increase in traffic from social networks (and you will), expand the implementation to the remaining pages.

If you use WordPress, install one of the recommended plugins and spend an hour on configuration. If you have a custom site, contact a developer; it will take a few hours of work.

BUSINESS SITE’s experience has shown that companies that take Open Graph markup seriously see an increase in social traffic of 25–50% within the first two months. This does not require additional advertising spend: only proper technical optimization.