Using Open Graph – how to work with metadata

</> AI-friendly version

Open Graph is a metadata markup protocol developed by Facebook to optimize the display of web pages on social networks. This technology allows you to control exactly how your content will look when shared on social networks, turning ordinary links into attractive visual cards with an image, title and description.

Open Graph metadata plays a key role not only for social networks, but also for SEO promotion. They help search engines better understand the structure and content of your content, which has a positive effect on ranking in search results. When users share your pages on Facebook, Twitter, LinkedIn or other platforms, properly configured OG tags ensure that previews with relevant information are displayed correctly.

Without using Open Graph, your links may display incorrectly – with random images, truncated titles, or no visual support at all. This lowers CTR (click-through rates) and reduces organic traffic from social media, which negatively impacts overall SEO and audience engagement.

What is Open Graph and why is it needed

Open Graph is a web page markup protocol developed by Facebook in 2010 to standardize the representation of content on social networks. This protocol allows webmasters to control how their pages appear when shared on Facebook, Twitter, LinkedIn, Telegram and other platforms.

The main purpose of Open Graph is to turn any web page into a full-fledged social graph object. When a user shares a link to your page, social networks read the Open Graph meta tags and generate an attractive preview with a title, description and image.

The Open Graph protocol works through special meta tags that are placed in the section of an HTML document. Each tag begins with the prefix og: and contains specific information about the page. For example, og:title defines a title, og:description defines a description, and og:image defines a preview image.

Interaction with social networks happens automatically. When a user embeds a link in a post or message, the social platform sends a request to your page, reads the Open Graph meta tags and generates a preview card. Without these tags, social networks try to determine the content to display on their own, which often leads to unpredictable results.

Using Open Graph is critical for social media marketing. Correctly configured meta tags increase the clickability of links by 20-30%, improve brand recognition and increase audience reach. Cards with quality images and interesting headlines get more attention in news feeds.

The protocol supports different types of content: articles, videos, music, books, profiles and others. Each type has its own set of specific meta-tags, which allows you to describe the content as accurately as possible. Це особливо важливо для медіа-ресурсів, інтернет-магазинів та новинних сайтів, де правильне представлення контенту безпосередньо впливає на трафік та конверсію.

Basic Open Graph meta tags

The Open Graph protocol uses special meta tags to convey structured information about a web page. These tags are placed in the section of an HTML document and define how the content will appear when shared on social networks.

The most important is the og:title tag, which sets the title for the preview card. This title can be different from the main title of the page, which allows you to optimize it specifically for social networks. The recommended length is up to 60 characters for correct display on all platforms.

The og:description tag contains a short description of the page content. It plays a key role in attracting user attention and increasing clicks. The optimal length of the description is 150-200 characters, which ensures full display of the text without clipping.

Візуальна складова представлена тегом og:image, який визначає зображення для попереднього перегляду. A correctly selected image significantly affects the attractiveness of the link. The recommended size is 1200×630 pixels for optimal display on different devices.

Additional meta tags include og:url for canonical URL, og:type for content type, and og:locale for locale. Properly setting up all tags ensures a professional look for preview cards and increases the effectiveness of sharing content on social media.

Benefits of using Open Graph for the site

Implementation of the Open Graph protocol gives your site significant advantages in promoting content in social networks. The main advantage is a significant improvement in the visibility of publications when shared on Facebook, Twitter, LinkedIn and other platforms.

When a user shares a link to your content, social networks automatically generate an attractive preview with a title, description and image. This dramatically increases clickability compared to regular text links. Studies show that posts with properly configured Open Graph tags get 30-40% more clicks.

For marketing, this means expanding your organic reach without spending extra on advertising. Each repost of your content works as a mini-advertisement with a visually attractive design. Brand visibility grows naturally through user sharing.

Additional benefits include control over exactly how your content looks when shared, the ability to A/B test different headlines and images for maximum clickability, and improved brand awareness through a consistent visual presentation. Open Graph also has a positive effect on behavioral factors, which indirectly improves the site’s SEO performance.

How to correctly configure Open Graph on the site

The correct setup of Open Graph begins with the correct addition of meta tags to the HTML code of your site. These tags are placed in the section of each page and ensure the transfer of structured data to social networks.

Basic Open Graph tags for adding to HTML include four mandatory parameters. The first is og:title, which defines the title of the post. The second – og:type indicates the type of content. The third – og:image contains the URL of the preview image. The fourth – og:url provides the canonical address of the page.

Here are basic examples of meta tags for a standard web page:

In order to properly set up images, it is recommended to use additional tags with dimensions. This helps social networks display previews correctly:

When adding tags for blog articles, you should use a specific article content type and additional properties:

It is important to follow the correct sequence when adding meta tags. First, the main Open Graph tags are placed, then specific to the type of content, and at the end – tags for specific platforms such as Twitter Cards or Facebook-specific parameters.

After adding all the necessary tags, be sure to check the correctness of the settings through official validators of social networks. Facebook Sharing Debugger and Twitter Card Validator will help you find errors and see how your content will look when shared.

Use of Open Graph in popular CMS

Modern content management systems greatly simplify the process of implementing Open Graph metadata on your site. Most popular CMSs offer both built-in solutions and advanced capabilities through specialized plugins.

WordPress remains the leader in the ease of configuration of the Open Graph. Yoast SEO and All in One SEO plugins automatically generate the necessary meta tags for each page. They allow you to customize images, titles and descriptions directly in the post editor. For more detailed control, you can use specialized plugins such as Open Graph and Twitter Card Tags or WP Open Graph.

Joomla also has powerful tools for working with Open Graph. The JFBConnect and Easy Frontend SEO extensions provide comprehensive solutions for setting up social meta tags. Joomla 4 has improved built-in capabilities for basic Open Graph setup without additional extensions.

Other popular CMS like Drupal, TYPO3 and ModX have their modules and extensions for Open Graph. It’s important to choose a solution that integrates with your content management system and provides a user-friendly interface for customization. Most modern plugins support a preview of how the publication will look on social networks, which greatly simplifies the optimization process.

Open Graph metadata correctness check

After configuring Open Graph tags, it is critical to check their correctness. Even minor errors in markup can lead to incorrect display of content in social networks.

The primary testing tool is the Facebook Sharing Debugger. This free service allows you to see exactly how Facebook interprets your meta data. Just enter the URL of the page and the debugger will show all found Open Graph tags, a preview of the post and possible errors.

LinkedIn also offers its own Post Inspector to check tag settings. Especially useful for B2B sites, where correct presentation in professional networks is important. The tool detects problems with images and text descriptions.

Twitter Card Validator helps to check the display in this social network. Although Twitter supports Open Graph, it has its own specific tags that should be tested separately.

For a comprehensive check, use the Open Graph Preview browser extension or online tools like OpenGraph.xyz. They show how the content will look on different social networks at the same time.

Regular checking after content updates ensures that your posts always look attractive when shared on social media, increasing organic traffic and audience engagement.

Guidelines and best practices for using Open Graph

Effective use of the Open Graph protocol requires compliance with certain recommendations and best practices. Proper meta-data optimization provides an attractive display of your content in social networks and has a positive effect on the site’s SEO performance.

Optimizing images for Open Graph

Use images with a recommended size of 1200×630 pixels for best display on all platforms. The image format must be JPG or PNG with a file size of up to 5 MB. Make sure important information is in the center of the image, as different platforms may crop the edges differently.

Writing effective headlines and descriptions

The title og:title should be short and meaningful, the optimal length is 60-90 characters. The og:description should clearly convey the essence of the content within 155-200 characters. Avoid using special characters that may not display correctly on different platforms.

Best practices for different types of content

For articles, always indicate the author and date of publication through the corresponding article tags. Video content needs additional metadata: duration, quality and a direct link to the file. For e-commerce products, be sure to add information about the price and availability of the product.

SEO optimization and Open Graph

Although Open Graph tags do not directly affect search engine rankings, they improve CTR through social media, which has a positive impact on overall traffic. Synchronize Open Graph meta data with core SEO tags for consistency of information.

Recommendations for localization

Use og:locale tags to specify the language of the content. For multilingual sites, add alternate versions via og:locale:alternate. This will ensure the correct display of content for users from different regions.

Regularly check and update Open Graph tags, especially after content changes. Use validation tools to detect errors and ensure correct display on all platforms.

Avoiding common mistakes when working with Open Graph

Setting up Open Graph correctly is critical to successfully promoting content on social networks. Let’s consider the most common SEO mistakes when working with meta tags and ways to correct them.

• Duplication of meta tags. The presence of several identical og:title or og:description tags results in incorrect display. Solution: Use each tag only once per page.
• Incorrect image sizes. Images smaller than 1200×630 pixels do not display well in the feed. Fix: Always use recommended sizes for og:image.
• Missing required tags. Missing og:title, og:type, og:image, or og:url makes the markup incomplete. Solution: Be sure to add all Open Graph base tags.
• Incorrect URLs. Relative paths instead of absolute URLs cause parsing errors. Fix: Always specify full URLs with the https://.
protocol
• Incorrect character encoding. Unescaped special characters break markup. Solution: Use HTML-entities for special characters.
• Ignore validation. Lack of validation leads to hidden errors. Fix: Test pages regularly with Facebook Debugger and other validation tools.

Avoiding these common mistakes will ensure your content is displayed correctly on social networks and improve overall audience engagement rates.

Optimizing images and descriptions for Open Graph

Correct optimization of images and text ads determines the success of displaying your cards in social networks. Visual content is the first thing that attracts users’ attention in the news feed, so its quality is critically important.

For Open Graph images, it is recommended to use JPG or PNG format with a size of 1200×630 pixels. This ratio of 1.91:1 ensures optimal display on all platforms. The minimum size is 600×315 pixels, but larger images look better on high-resolution screens.

When creating visual content, it is important to place key elements in the center of the image, as different platforms may crop the edges. Avoid small text – it will become unreadable in reduced cards.

Optimizing descriptions requires a balance between informativeness and brevity. The ad should contain 55-60 characters for the title and 110-120 characters for the description. This guarantees full display of the text without clipping.

Use contrasting colors and clear fonts for text elements on images. Test different versions of the cards through social media debuggers to make sure they display correctly before publishing.