Open Graph tags are HTML meta tags that control how your web pages appear when shared on social media platforms. When someone copies a link from your website and pastes it into Facebook, LinkedIn, Twitter/X, Discord, or any other platform that supports the Open Graph protocol, it’s your Open Graph tags that determine what image, title, and description the platform shows in the preview card.

Without Open Graph tags, social platforms attempt to generate their own previews by scraping your page’s content — often producing inconsistent, unattractive results: wrong images, truncated titles, generic descriptions. With properly implemented Open Graph tags, you control exactly how your content looks every time it’s shared, ensuring every link preview is accurate, visually compelling, and aligned with your brand. Facebook introduced the Open Graph protocol in 2010, and it has since become the standard across most major platforms.

[Image: Side-by-side showing a social media share preview without OG tags (generic/broken) vs. with OG tags (clean title, correct image, good description)]

Key Open Graph Tags

The essential Open Graph tags for any page:

  • og:title — The title of your page as it should appear in the share preview. Can differ from your page’s HTML title. Keep it concise and compelling — this is the headline of your social card.
  • og:description — A 2–4 sentence description of the page content. This appears below the title in most share previews. Similar in purpose to a meta description, though it’s used specifically for social sharing rather than search results.
  • og:image — The URL of the image to display in the share preview. This is often the most impactful tag — a striking, relevant image dramatically increases engagement with shared links. Recommended size is at least 1200×630 pixels.
  • og:url — The canonical URL of the page. Functions like a canonical URL for social sharing — ensures all shares point to the same definitive page URL even if accessed through different tracking parameters.
  • og:type — The content type: website, article, video.movie, product, etc. Tells platforms how to categorize and render the content.

Twitter/X uses its own extended tags:
– twitter:card — Defines the card layout: summary, summary_large_image, app, or player. Most content uses summary_large_image for the best visual impact.
– twitter:site — Your Twitter/X username
– twitter:title and twitter:description — Can differ from OG tags for Twitter-specific customization

In practice, most platforms fall back to the og: tags if Twitter-specific tags are missing, so setting OG tags covers the majority of use cases.

Purpose & Benefits

1. Control Your Brand Presentation in Every Share

Every time a customer, employee, or journalist shares your content, the link preview represents your brand. Compelling, accurate previews drive more clicks — link previews with strong images receive substantially higher engagement than those with generic or broken visuals. Open Graph tags ensure that your content looks intentional and professional in social feeds rather than appearing as a generic text link or a random image pulled from the page.

2. Increase Click-Through Rates from Social Shares

The image in a social link preview is the single largest driver of engagement with shared content. A properly sized, high-quality og:image outperforms a broken or auto-selected image in every benchmark. For blog posts, landing pages, and product pages that you want people to actually click, investing in custom social images and accurate Open Graph configuration translates directly to more traffic from social sharing.

3. Support SEO Indirectly Through Social Signals

While Open Graph tags don’t directly influence Google rankings, they support SEO indirectly. Well-configured share previews generate more shares, which drives more traffic, which produces behavioral signals (time on site, return visits) that can influence rankings. Content that’s widely shared also tends to earn more backlinks — another indirect SEO benefit of social visibility.

Examples

1. Blog Post with Custom Social Image

A marketing agency publishes a data-driven post about email marketing benchmarks. They configure Open Graph tags with a custom branded image (a simple graphic with the post headline on a brand-color background), a concise og:title focused on the key finding, and a description that highlights the most shareable insight. When team members and readers share the post on LinkedIn, the preview card looks polished and drives higher click-through than their generic posts without custom OG images.

2. E-Commerce Product Page

A WooCommerce store configures og:image for each product page to use the primary product photo, og:title with the product name, and og:type as og:product. When customers share product links with friends or on Pinterest, the share preview shows the product image and name — functioning as an organic product recommendation that feels natural rather than promotional.

3. Facebook Debugger Reset

A company updates their homepage redesign with a new hero image and tagline, but Facebook still shows the old version in link previews. Using Facebook’s Sharing Debugger tool, they click “Scrape Again” to force Facebook to re-fetch the current Open Graph tags. Within minutes, the new preview appears — the correct image, updated title, and new description. This tool is essential whenever you update OG tags and need social platforms to refresh their cached preview.

Common Mistakes to Avoid

  • No og:image or wrong image dimensions — The image is the most impactful element of any share preview. Missing, too-small, or incorrectly-sized images result in platform-generated previews that may be generic or visually poor. Use at least 1200×630 pixels for og:image to ensure it displays correctly on high-resolution screens and across platforms.
  • Letting og:description duplicate the meta description verbatim — Your meta description is written for search results; your og:description can be written with social sharing in mind. They can be similar but should be independently optimized for their context.
  • Forgetting to configure OG tags for new page types — Most WordPress SEO plugins set default OG tags globally, but individual pages, custom post types, and new landing pages may need specific images and descriptions configured. Review OG configuration whenever you launch a significant new page type.
  • Not testing how previews look — Social platforms cache OG data. If you’ve made changes and previews aren’t updating, use platform-specific debugging tools to force a refresh (Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator).

Best Practices

1. Create Custom OG Images for High-Priority Pages

Generic or auto-selected images underperform compared to purpose-built social images. For your most-shared content types — blog posts, product pages, key landing pages — create a template that incorporates your brand colors, logo, and the page’s headline or key message. Tools like Canva make this accessible without a graphic designer. The effort per page is low; the impact on share engagement is meaningful.

2. Use an SEO Plugin for Consistent Implementation in WordPress

WordPress SEO plugins like Yoast SEO and Rank Math include Open Graph tag management as part of their standard feature set. Both allow you to set default OG images, configure per-post social preview content, and preview what your share card will look like before publishing. Using these tools ensures OG tags are consistently applied without requiring manual HTML edits on each page. Look for the “Social” tab in Yoast or the equivalent in Rank Math.

3. Set a Default Fallback Image

Not every page will have a unique OG image configured. Set a default og:image in your SEO plugin settings — typically your logo or a branded site image — that applies as a fallback for any page without a specific social image configured. This ensures that even unoptimized pages produce a reasonable preview rather than a broken or missing image. A consistent, brand-appropriate fallback is significantly better than no image.

Frequently Asked Questions

Do Open Graph tags affect Google search rankings?

Not directly. Google uses your HTML title tag and meta description for search snippets — OG tags are for social sharing contexts. However, compelling OG tags lead to more social shares, more traffic, and potentially more backlinks — all of which can indirectly support your SEO over time.

Are Open Graph tags the same as Twitter Cards?

Related but distinct. Twitter/X developed its own card tags (twitter:card, twitter:title, etc.) that function similarly to Open Graph tags. Most platforms, including Twitter/X, fall back to og: tags when Twitter-specific tags aren’t present, so having complete Open Graph tags covers most scenarios. For maximum control on Twitter, set both.

Do I need a developer to add Open Graph tags to WordPress?

Usually not. WordPress SEO plugins like Yoast SEO and Rank Math handle OG tag generation automatically based on your page’s title, content, and featured image. You can configure custom per-page social titles, descriptions, and images through the plugin’s interface in the post editor. No coding required for standard use cases.

How do I check what my shared links look like?

Use each platform’s diagnostic tool: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector, and Twitter Card Validator. Each tool shows exactly how your page will appear when shared and flags any missing or incorrectly formatted tags. These tools also let you refresh the cache after updating your OG tags.

What image size should I use for og:image?

1200×630 pixels is the recommended size for most platforms. This maintains a 1.91:1 aspect ratio and displays well at both standard and retina resolutions. Facebook and LinkedIn both use this ratio for link preview cards. Keep the file size under 1MB for fast loading; 200–500KB is typical for an optimized JPG.

Related Glossary Terms

How CyberOptik Can Help

Open Graph tags sit at the intersection of SEO and social media — and getting them right means your content looks professional everywhere it’s shared. Our team configures Open Graph tags as part of our standard SEO and web design work, ensuring every page makes the right impression in search results and social feeds alike. Contact us for a free website review or explore our SEO services.