What Are Open Graph (OG) Tags? Enhancing Your Website's Social Media Presence

Open Graph (OG) Tags are HTML meta tags that determine the preview information displayed when a web page is shared on social media, including title, description, image, URL, and content type. In short, OG tags allow you to control how your site appears on platforms like Facebook, LinkedIn, WhatsApp, X (formerly Twitter), and others. When used correctly, they can increase click-through rates, enhance brand perception, and prevent sharing errors such as incorrect images or missing descriptions.

When you share a blog post, product page, or corporate service page on social media, platforms typically scan your page and generate an automatic preview card. If Open Graph data is not defined, social networks may randomly select an image, display an outdated title, or leave the description blank. This can lead to significant performance loss, especially for campaign pages, e-commerce products, news content, and corporate websites crucial for brand awareness.

In this guide for the Hostragons blog, we will explore what Open Graph tags are, which OG tags are essential, how to add them in WordPress and custom-built sites, the ideal image dimensions, testing tools, and common mistakes step by step. We will also explain the indirect effects of hosting, SSL, and domain configuration on the quality of social media previews with practical examples. Web Hosting Domain Lookup SSL Certificate

What is the Open Graph Protocol?

The Open Graph protocol is a metadata standard initially developed by Facebook. Its purpose is to ensure that web pages are displayed as rich cards on social media platforms. The OG tags present in a page's HTML source code answer questions for social network crawlers such as: What is the title of this page? What is its description? Which image should be used? What is the URL? Is the content type an article, product, or video?

Today, Open Graph is not limited to Facebook. LinkedIn, WhatsApp, Telegram, Slack, and many messaging applications read OG data to create link previews. X (formerly Twitter) supports its own Twitter Card tags, but in most cases, it also benefits from OG tags. Therefore, setting up Open Graph is a bridge between technical SEO, social media optimization, and user experience in modern websites.

OG tags are not considered a direct ranking factor by Google; in other words, simply adding an OG tag does not automatically improve your organic rankings. However, when you appear clearer, more professional, and clickable on social media, traffic may increase, content could be shared more, and brand signals could strengthen. Thus, OG tags indirectly contribute to digital visibility.

Why Are Open Graph Tags Important?

Social media users make decisions in seconds before clicking on a link. The most significant factors influencing this decision are the title, image, description, and a trustworthy domain. OG tags make these four elements manageable. Especially on mobile devices, the link card often provides the user with their first and only impression of the page.

• Increases Click-Through Rate: A clear title and eye-catching image grab more attention in social media feeds.
• Ensures Brand Consistency: The correct logo, colors, description, and URL appear with every share.
• Prevents Image Issues: It stops platforms from randomly selecting an image from the page.
• Improves Sharing Experience: Professional cards are created on WhatsApp, LinkedIn, or Facebook.
• Supports Campaign Performance: Ensures the message is communicated correctly on product, discount, and announcement pages.

For example, consider a hosting campaign page. If your OG image includes the campaign name, percentage discount, and brand colors, the user will understand the topic as soon as they see the link. However, without an OG tag, the system might select a small icon file or an unrelated banner image from the page. This decreases trust and the likelihood of clicks. When preparing campaign pages, it is also important to have a reliable infrastructure, fast server response, and use HTTPS. WordPress Hosting Corporate Hosting

Essential OG Tags to Use

While the needs of each website vary, some tags are almost mandatory in basic Open Graph configuration. These form the minimum data set needed for social platforms to understand your link correctly.

og:title

og:title determines the title displayed on social media. It does not have to be the same as the page's SEO title. You can write a shorter, clearer title that generates click intent for social media. A range of 40-60 characters is generally considered safe, as excessively long titles may be cut off in mobile previews.

Example: <meta property='og:title' content='Enhance Your Social Media Presence with Open Graph Tags'>

og:description

og:description is a brief description that appears on the link card. It should clearly tell the user what they will find on the page. A range of 120-160 characters is ideal for most platforms. The description should not be exaggerated like an ad copy; it should be informative and intriguing.

Example: <meta property='og:description' content='Control your title, image, and description with OG tags; make your social media shares look professional.'>

og:image

og:image is the URL of the image that will be displayed in the share. This tag is one of the most influential areas on social media performance. The image must be provided with its full URL, accessible via HTTPS, and not blocked. A common and safe standard size for horizontal social sharing cards is 1200 x 630 pixels. Keeping the file size between 300 KB and 1 MB is beneficial for quick loading.

Example: <meta property='og:image' content='https://exampledomain.com/images/open-graph-guide.jpg'>

og:url

og:url specifies the canonical URL for the content. The parameterized URL should not contain session IDs or tracking codes. If the same content can be accessed through different URL variations, clarifying the preferred address with the OG URL can prevent the dilution of sharing statistics.

og:type

og:type indicates the type of content. Use article for blog posts, website for homepage, and product for product pages. This information helps platforms correctly classify the content.

og:site_name and og:locale

og:site_name displays your site's brand name. og:locale specifies language and region information. For a site targeting Turkish users, the value can be tr_TR. For multilingual sites, providing the correct locale information for each language version is vital.

Summary Table for Basic OG Tags

The Difference Between Open Graph and Twitter Card

While Open Graph tags are used by many social networks, Twitter Card tags were specifically developed for previews on the X platform. The two structures are similar, but naming and some features differ. The best practice is to use both OG and Twitter Card tags on the page. This way, the content appears more consistent across different platforms.

In practice, after creating your OG tags for a blog post, setting the twitter:card value to summary_large_image usually yields good results. This results in a large visual card and makes you more visible in mobile feeds.

How to Add Open Graph Tags?

OG tags are added to the head section of the page's HTML code. This means they are located in the metadata section read by browsers and social network bots, not in the content visible to the user. The method may vary depending on the underlying infrastructure.

1. Adding OG Tags in WordPress Sites

If you are using WordPress, you can manage OG tags without writing manual code. Plugins like Yoast SEO, Rank Math, and All in One SEO allow you to define social media title, description, and image for each post and page.

• Install and activate your SEO plugin.
• Enter the post or page editing screen.
• Open the social sharing or social tab.
• Set the title, description, and image for Facebook/LinkedIn.
• Upload the image as 1200 x 630 px.
• Update the page and check the preview in the testing tool.

Performance is also a critical factor on WordPress sites. If social network bots cannot access your page or the server responds slowly, the preview may be missing. Therefore, it is essential to use a fast and reliable WordPress infrastructure. WordPress Hosting LiteSpeed Hosting

2. Adding OG Tags in Custom Software or Static Sites

If you are using custom software, Laravel, Next.js, Nuxt, plain HTML, or a static site generator, you can define OG tags at the template level. Titles, descriptions, and images for blog posts and product pages should be dynamically pulled from the database.

A simple example structure could be: <meta property='og:title' content='Page Title'> <meta property='og:description' content='Page description'> <meta property='og:image' content='https://site.com/og-image.jpg'> <meta property='og:url' content='https://site.com/page'> <meta property='og:type' content='article'>

In dynamic systems, the most common mistake is to use the same OG title and image for all pages. This particularly reduces social sharing performance on e-commerce sites with hundreds of product pages. Each important page should have its OG data relevant to its context.

3. Using Product-Based OG for E-Commerce Sites

In e-commerce pages, the product name should be added to the og:title field, a brief product benefit to the og:description field, and a high-quality product photo to the og:image field. Avoid misleading campaign texts for out-of-stock products. If there are product variations, the canonical URL value of the main product page can be used as og:url.

For example, when a product page is shared on social media, the user should be able to understand the product image, price advantage, or key feature directly. However, instead of using overly sales-oriented language in the description, it is more trustworthy to simply explain what the product offers.

Ideal Open Graph Image Dimensions and File Rules

The OG image is the most visible element of the link card. Low-resolution, cropped, or unreadable images can leave an unprofessional impression. As of 2026, the safest overall dimension remains 1200 x 630 pixels. This aspect ratio corresponds to approximately 1.91:1 format and works well across many platforms, including Facebook and LinkedIn.

• Recommended size: 1200 x 630 px.
• Minimum acceptable size: 600 x 315 px, but higher is recommended for quality.
• Format: JPG or PNG is widely supported; WebP may cause issues on some platforms.
• File size: Keep it under 1 MB if possible.
• URL: Always use the full URL; do not use a relative path.
• HTTPS: It must be accessible via a secure connection.

In image design, avoid placing important text too close to the edges. Some platforms may crop the card. It is safer to center logos, titles, and key messages. Additionally, creating a unique OG image for each post reduces the feeling of repetition in social media feeds.

Testing Open Graph Tags and Cache Issues

After adding OG tags, it is essential to test them. Social platforms cache pages. If an incorrect image or description is pulled once, the old appearance may continue for a while, even after you make changes.

Testing Tools You Can Use

• Facebook Sharing Debugger: Scans the URL, shows OG tags, and allows you to refresh the cache.
• LinkedIn Post Inspector: Used to check the LinkedIn card preview.
• Twitter Card Validator: Helps you see if the X card structure is working correctly.
• WhatsApp test: You can send the link to yourself to practically check the mobile preview.

If you encounter a 404 error, 403 access restriction, SSL warning, or robots.txt limitation during testing, social bots may not be able to access your page. In this case, you should review hosting security settings, CDN rules, and firewall configurations. Properly configured SSL plays a crucial role in allowing social media bots to access images and page resources. SSL Certificate What is CDN 403 Forbidden Error Solution

Common Open Graph Mistakes

Small errors in Open Graph implementations can lead to significant visibility issues. The following items summarize common problems found in technical SEO audits.

• Using a relative image path: A full URL like https://site.com/images/og.jpg should be used instead of /images/og.jpg.
• The image being inaccessible: Hotlink protection, firewalls, or incorrect file permissions can block bots.
• Using the same OG content on every page: Unique titles and descriptions are needed for blog posts, products, and service pages.
• Writing overly long titles: This can cause truncation in mobile cards and lose message clarity.
• Not using HTTPS: Security warnings and access issues can arise.
• Not clearing the cache: Social platforms may continue to show the old image.
• Canonical URL and OG URL mismatch: Sharing signals can be diluted across different URL variations.

Consider an example: You changed the featured image in your blog post, but WhatsApp still shows the old image. This is often due to platform caching. First, check that the og:image value in the page source code has indeed changed. Then re-scan the URL in Facebook Sharing Debugger or the relevant platform tool. If the old image still appears, clear the CDN cache and server cache layers.

How Should Open Graph Tags Be Evaluated from an SEO Perspective?

Open Graph tags are not traditional on-page SEO tags; they do not directly shape search engine results pages like title, meta description, canonical, or structured data. However, in the 2026 SEO approach, user behavior, brand trust, content distribution, and multichannel visibility should be considered together. Content that looks good on social media can lead to more clicks, shares, and returns.

Especially in the era of Google AI Overviews and rich experiences in search results, content must be understandable not only for search engine bots but also for the content preview systems of various platforms. Therefore, OG tags are an integral part of technical SEO checklists.

For good practice, write the SEO title and OG title to serve the same intent. The SEO title competes in search results, while the OG title attracts attention in social feeds. They should not contradict, mislead the user, or misrepresent the page's actual content. Similarly, the meta description and og:description can be aligned but optimized according to the platform.

Step-by-Step Open Graph Checklist

The following checklist can be used for a quick audit before launching a new page. It establishes a standard publishing process, especially for agencies, content teams, and webmasters.

• Does the page have a unique og:title value?
• Does og:description accurately and concisely describe the page?
• Is og:image 1200 x 630 px and of high quality?
• Is the image accessible to everyone via HTTPS?
• Is og:url consistent with the canonical URL?
• Is og:type correctly chosen according to the content type?
• Is og:locale defined as tr_TR for Turkish-targeted pages?
• Has preview testing been done on Facebook, LinkedIn, and WhatsApp?
• Was CDN or cache cleaning performed?
• Was the title and image cropping checked in mobile view?

Applying this checklist for every new blog post, product page, campaign page, and important corporate page ensures consistency in your social media appearance. It also speeds up the internal quality control process.

The Impact of Hosting, SSL, and Domain on OG Appearance

Although OG tags are defined within HTML, the web infrastructure must be healthy for them to work correctly. Social media bots must receive a quick and error-free response from the server when they access your page. If the server frequently times out, the SSL certificate is faulty, or images are blocked with a 403 error, the preview card may be missing.

On the domain side, trust is also significant. A short, readable, and brand-consistent domain looks more professional on social sharing cards. An SSL certificate is now a fundamental requirement for both user trust and platform compatibility. If you are setting up a new site, planning your domain, hosting, and SSL configuration correctly from the start can reduce potential future social sharing and SEO issues. Domain Lookup Web Hosting SSL Certificate

Conclusion: Open Graph Tags Are a Small Optimization with a Big Impact

Open Graph (OG) Tags are essential metadata that allow you to control how your website appears on social media. By using the right title, description, image, and URL, your links become more trustworthy, understandable, and clickable. This optimization does not guarantee direct ranking; however, it provides strong support in terms of social traffic, brand perception, and content distribution.

Checking OG tags, preparing visuals in the correct dimensions, and testing the sharing preview when publishing new content is a professional web management habit. Supporting your infrastructure with fast hosting, secure SSL, and proper domain management will ensure your social media cards function more smoothly. If you wish, you can explore Hostragons solutions to create a reliable foundation for your site and then make OG checks part of your regular publishing process.

Frequently Asked Questions

What Do Open Graph (OG) Tags Do?

Open Graph (OG) Tags determine what title, description, image, and URL are displayed when a web page is shared on social media. This makes the link preview look more professional and consistent.

Do OG tags directly affect SEO rankings?

OG tags are not a direct Google ranking factor. However, they can indirectly contribute to SEO performance by providing higher clicks, shares, and brand trust on social media.

What should be the pixel size of the Open Graph image?

The safest OG image size for general use is 1200 x 630 pixels. The image should be accessible via HTTPS, of high quality, and preferably under 1 MB in size.

How to add OG tags in WordPress?

In WordPress, OG tags can be easily defined for each page and post using plugins like Yoast SEO, Rank Math, or All in One SEO.

What should be done if WhatsApp shows the wrong image?

First, ensure that the og:image value in the page source code is correct. Then clean the cache and CDN cache, re-scan the URL with tools like Facebook Sharing Debugger, and retest the link.