Open Graph (OG) tags are meta tags used to control how a webpage is represented when shared on social media platforms like Facebook and LinkedIn.

Why is my social preview not updating?

This is usually due to server-side caching by the social platform. You need to use our [Social Preview](/tools/social-preview/) tool or platform-specific debuggers to trigger a scraper refresh.

What is the ideal image size for OG tags?

In 2026, the standard is 1200x630 pixels for a 1.91:1 aspect ratio, which ensures clarity across all major platforms.

Do I need Twitter Cards if I have OG tags?

While Twitter supports OG tags, using specific Twitter Card tags allows for better control over the display format (e.g., summary_large_image).

How do I test OG tags locally?

You can use tunneling services like Ngrok to expose your local server to social scrapers or use our [Social Preview](/tools/social-preview/) mockup feature.

It defines the type of your object (e.g., website, article, video, profile), which determines how it is indexed in the social graph.

Can OG tags affect SEO?

Indirectly, yes. Richer previews lead to higher CTR from social platforms, which provides positive signals to search engines.

How do I handle dynamic OG tags in SPAs?

You must use Server-Side Rendering (SSR) or pre-rendering services so that social scrapers see the metadata in the raw HTML response.

What is the difference between og:image and og:image:secure_url?

The secure_url is specifically for HTTPS images, ensuring they display correctly on secure platforms without mixed-content warnings.

Is there a character limit for OG titles?

Keep titles under 60 characters to prevent truncation across different device displays.

OG Tag Debugging for Developers

You’ve spent weeks building a stunning landing page. The code is clean, the CSS is perfect, and the performance is lightning fast. But when you share the link on LinkedIn, it looks like a broken placeholder: a blurry image, a truncated title, and a generic description. This is the "Social Metadata Gap."

In this article, we'll dive deep into the technical specifications of Open Graph (OG) tags and how to use the Social Preview tool to ensure your content looks premium on every platform.

Stop Guessing Your Social Impact

Don't wait until after you post to see how your site looks. Use our real-time debugger to preview and fix your OG tags instantly.

Analyze My OG Tags →

1. The Open Graph Protocol: A Technical Overview

The Open Graph protocol, originally created by Facebook, turned the web into a social graph. By adding specific `` tags to the ` ` of your HTML, you can tell social platforms exactly how to display your content. - The Core Four: Every page should define `og:title`, `og:type`, `og:image`, and `og:url`. - The Namespace: Ensure your `` tag includes the proper RDFa prefix: `prefix="og: http://ogp.me/ns#"`.

2. Beyond the Basics: High-Fidelity Metadata

Standard tags are the bare minimum. To truly stand out, developers should implement advanced properties: - `og:image:width` and `og:image:height`: Providing dimensions helps scrapers render the image immediately without having to download and scan the file first. - `og:locale`: Useful for localized content to ensure the "Read More" prompts appear in the correct language. - `og:site_name`: Provides branding context above the article title.

3. The SPA Challenge: SSR vs. Client-Side Rendering

One of the most common issues developers face is "The Blank Preview" in Single Page Applications (SPAs). - The Problem: Social scrapers (Facebook's Facebot, LinkedIn's LinkedInBot) are generally simple HTTP clients that don't execute JavaScript. If your tags are injected via `useEffect` in React or an `onCreate` hook in Vue, the scraper sees an empty head. - The Solution: You must use Server-Side Rendering (Next.js, Nuxt.js) or dynamic pre-rendering (like Prerender.io) to serve the meta tags in the initial HTML delivery.

Platform	Preferred Image Size	Title Limit	Scraper Name
Facebook	1200 x 630 (1.91:1)	60-90 chars	Facebot
Twitter (X)	1200 x 675 (16:9)	~70 chars	Twitterbot
LinkedIn	1200 x 627	~60 chars	LinkedInBot
WhatsApp	Square (minimum 300x300)	Short	WhatsApp/x.x

4. Debugging Workflows: The Developer's Toolkit

When a preview fails, where do you look? 1. Local Validation: Use our Social Preview Tool to simulate different platform scrapers. 2. Tunneling: Use Ngrok to give a social platform's live debugger access to your `localhost`. 3. Header Inspection: Check `curl -v [URL]` to ensure your server isn't blocking bots with a '403 Forbidden' or requiring a cookie that the scraper doesn't have.

Pro Tip: Always use absolute URLs for `og:image`. Many platforms will fail to resolve relative paths like `/assets/preview.png`.

5. The Twitter Card Nuance

While Twitter supports OG tags, it prefers its own `twitter:*` namespace. Specifically, `twitter:card` is critical. If you want the large, immersive image preview, you must set `twitter:card` to `"summary_large_image"`. Setting it to just `"summary"` will result in a small square thumbnail next to the text.

6. Conclusion: Social First Development

Metadata is no longer an afterthought; it is a core feature of the modern web. By implementing a robust OG tag strategy and verifying it with tools like the Social Preview debugger, you ensure that your code’s visual representation matches its internal quality. Don't let a missing meta tag diminish the reach of your work—build with the social graph in mind.

Validate Your Social Footprint

Is your site optimized for sharing? Run a technical audit of your meta tags now and see exactly what your users see.

Launch Social Preview →

Frequently Asked Questions

Can I use WebP for og:image?

While support is improving, legacy scrapers still struggle with WebP. In 2026, it is still safest to use optimized JPEGs or PNGs for maximum compatibility.

What is the 'og:audio' tag used for?

It's used to provide a link to an audio file that can be played directly within certain social feeds (like Facebook).

How do I test password-protected pages?

Scrapers cannot bypass login screens. You must use a tool like our Social Preview which allows you to paste HTML directly for analysis.

Why does WhatsApp show no image?

WhatsApp is sensitive to image size. Keep your preview image under 300KB to ensure the mobile app fetches it reliably.

What is 'fb:app_id'?

It allows Facebook's Insights to group data from all your pages and provide detailed analytics on your site's social performance.

Does 'og:video' work on LinkedIn?

Native video embeds via OG tags have limited support on LinkedIn; they generally prefer direct uploads or links that resolve to a standard preview.

Can I have multiple images in OG tags?

Yes, you can define multiple `og:image` tags. Platforms will usually pick the first one or allow the user to cycle through them.

How do I clear the Facebook cache?

You must use the Facebook Sharing Debugger and click "Scrape Again" to force their servers to update your page's cached data.

What is the 'og:determiner' tag?

It specifies the grammar for the word that appears before the object's title in a sentence (e.g., "a", "an", "the").

How does OG data affect Slack previews?

Slack uses a combination of OG tags and standard meta tags to create the "unfurled" link preview in channels.

Related Resources

Aspect Ratio Mastery — Design Guide
Purging Cache Data — Technical Support
Social/SEO Correlation — Strategy
Automation Workflows — Engineering
Real-time Social Debugger — Preview fixed results