What Is Open Graph and How Does It Control Your Social Media Previews?
Every time someone shares your website on social media, Open Graph tags determine what they see. Without them, you get ugly broken previews. This guide explains what Open Graph is and how to implement it correctly.
By Josh Ternyak
March 29, 2026
The Hidden Code That Controls How Your Website Looks on Social Media
You've seen it happen: someone shares a link on LinkedIn or Facebook, and instead of a clean preview with a relevant image, compelling headline, and descriptive text, the preview shows a tiny random image, your domain name in plain text, and no context at all. Or worse — no image at all, just a gray box.
You've also seen the opposite: a shared link that displays a beautiful branded image, a compelling headline, and a description that makes you want to click. That's not luck — it's deliberate implementation of Open Graph tags.
Open Graph is the metadata protocol that determines how your web pages appear when shared on social media platforms. Without it, you have no control over your social previews. With it, you control the image, headline, and description that represent your content every time it's shared — turning every link share into a branded marketing impression.
What Open Graph Is
Open Graph is a protocol developed by Facebook in 2010 that enables web pages to become "rich objects" in a social graph. It defines a set of HTML meta tags that provide structured metadata about a page — specifically, the information social media platforms use when generating link preview cards.
When someone shares a URL on Facebook, LinkedIn, Twitter/X, Slack, iMessage, WhatsApp, or dozens of other platforms, those platforms send a request to the URL, read its Open Graph tags, and use that information to generate the link preview the recipient sees. The image, title, and description in that preview come directly from your Open Graph tags — or from the platform's best guess at equivalent content if Open Graph tags don't exist.
Open Graph tags live in the <head> section of your HTML, invisible to visitors but read by social media crawlers:
<meta property="og:title" content="What Is Open Graph | Scalify Blog">
<meta property="og:description" content="Open Graph tags control how your pages appear when shared on social media. Here's everything you need to know.">
<meta property="og:image" content="https://scalify.ai/images/open-graph/og-open-graph-guide.jpg">
<meta property="og:url" content="https://scalify.ai/blog/what-is-open-graph">
<meta property="og:type" content="article">The Core Open Graph Tags
og:title — The Headline
The title of your page as it should appear in social media previews. This can (and often should) differ from your HTML title tag — social media previews have different space constraints than browser tabs and search results.
Optimal length: 60–90 characters. Social previews typically have more space than search results for title display. Use this space to write a title that's compelling for social sharing specifically — potentially more conversational or click-enticing than an SEO-optimized title.
og:description — The Supporting Text
A one-to-two sentence description that appears beneath the title in most social preview cards. This is your pitch — why should someone click this link? It appears to an audience that's already scrolling their social feed with a low initial intent to click; your description needs to give them a reason to stop and engage.
Optimal length: 100–200 characters. Facebook truncates at approximately 300 characters; LinkedIn is more generous. Write for the first 100 characters being the most impactful.
og:image — The Visual
The image that appears in the social preview card — the most visually dominant element. This is where most Open Graph optimization effort should go, because a compelling, well-designed image dramatically increases click-through rates on social shares.
Technical specifications:
- Minimum recommended size: 1200×630 pixels (standard 1.91:1 aspect ratio)
- Facebook recommends: 1200×630px minimum
- LinkedIn recommends: 1200×627px minimum
- Twitter card: 1200×600px for summary_large_image cards
- Maximum file size: 8MB (Facebook limit, though smaller is better for load speed)
- Supported formats: JPG, PNG, GIF (static)
OG images should be designed for sharing context — clear at thumbnail sizes, compelling at quick glance, branded consistently. Consider overlaying the page title as text on the image (using clear, readable typography) so the image communicates the content even if the title text isn't read.
og:url — The Canonical URL
Specifies the canonical URL of the page — the version that should receive the social engagement metrics (likes, shares, comments). Use your canonical URL here, ensuring consistent attribution even if traffic arrives through URL variations (with parameters, without www, etc.).
og:type — The Content Type
Describes the type of content: "website" (default), "article" (for blog posts), "product" (for e-commerce product pages), "video.movie," "music.song," etc. Each type unlocks additional optional tags specific to that content type. For blog posts and content pages, "article" is the appropriate value and enables article-specific optional tags.
og:site_name — The Brand Name
The name of your overall website or brand. Appears in some platform preview formats below the title. Sets the brand context — "Scalify Blog" or just "Scalify" — so the preview card communicates both the specific article and the publishing brand.
Twitter Cards: The Twitter-Specific Extension
Twitter (now X) developed its own metadata protocol called Twitter Cards. While Twitter does read Open Graph tags as fallback, Twitter Cards provide more control over how content appears on Twitter specifically.
The key Twitter Card tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ScalifyAI">
<meta name="twitter:title" content="What Is Open Graph">
<meta name="twitter:description" content="The Open Graph guide for web professionals">
<meta name="twitter:image" content="https://scalify.ai/images/og/open-graph-guide.jpg">The twitter:card value options:
- "summary" — Small square image, title, and description
- "summary_large_image" — Large horizontal image with title and description beneath — the most commonly used format for content sharing
- "player" — For video or audio content
- "app" — For mobile app promotion
For most websites, "summary_large_image" is the right choice — it uses the large horizontal image format that produces better visual impact in feeds.
OG Images: Design Best Practices
The OG image is the most impactful element in a social preview. An excellent OG image can double click-through rates from social shares compared to a poor or missing one.
Template-Based OG Images
Rather than creating unique OG images for every piece of content from scratch, most professional websites use a consistent OG image template — a branded layout where the page title and possibly category or author information are dynamically inserted.
A typical OG image template: branded background (your color palette), your logo in a consistent position, page title overlaid in large, readable text, perhaps a category label or site name in a secondary position. This approach produces consistent, branded OG images for every piece of content with minimal per-piece effort.
Tools for dynamic OG image generation: Cloudinary (automated image generation with overlaid text), Vercel's OG Image Generation, or custom scripts using canvas libraries.
Static OG Images
For high-priority pages (homepage, key service pages, major content pieces), custom-designed static OG images optimized for that specific page's message are worth the additional effort. A bespoke OG image for your homepage that communicates your core value proposition visually is more impactful than a template image with the homepage title overlaid.
Text Legibility
OG images often appear at smaller sizes than 1200×630px — in tweet feeds, in Slack channel previews, in search engine results. Text on OG images must be legible at reduced sizes. Use large, bold typography (minimum 40–60pt for main text), high contrast between text and background, and limit text quantity to what's readable at thumbnail size.
No Important Content Near Edges
Different platforms crop or mask OG images differently. Content near the edges of the image may be hidden. Keep important text and brand elements within a "safe zone" at least 50–100px from all edges.
Implementing Open Graph Tags
WordPress
Yoast SEO and Rank Math both generate Open Graph tags automatically. In Yoast, you can set per-post OG titles, descriptions, and images in the post editor's "Social" tab. The plugin also generates default social images from featured images if no specific OG image is set. Rank Math's equivalent section is under "Advanced" in the block editor sidebar.
Webflow
In Webflow's page settings (or CMS collection settings), there's a Social sharing section where OG title, description, and image can be set per-page or per-collection template. For CMS-managed content, these fields can be bound to CMS fields, enabling per-post OG customization.
Shopify
Shopify generates OG tags automatically using product titles, descriptions, and images. The default implementation is functional but often uses generic product images. More sophisticated OG image handling typically requires theme customization or an SEO app.
Custom HTML Sites
Add the Open Graph meta tags manually to the <head> section of each page template. For dynamically generated sites, use your server-side language to inject per-page OG values. For static site generators, use the framework's head management approach (next/head for Next.js, react-helmet for React, etc.).
Testing Your Open Graph Implementation
Facebook Sharing Debugger
Facebook's Sharing Debugger (developers.facebook.com/tools/debug) lets you enter any URL and see exactly how Facebook will render the share preview — including all the OG tags Facebook reads and a visual preview of the sharing card. The debugger also includes a "Scrape Again" button that forces Facebook to re-fetch your URL's OG tags after you've updated them (Facebook caches OG data aggressively, so updates may not appear immediately in live shares without forcing a refresh).
LinkedIn Post Inspector
LinkedIn's Post Inspector (linkedin.com/post-inspector) does the same for LinkedIn — shows how your URL's preview will appear when shared on LinkedIn, including the OG image, title, and description.
Twitter Card Validator
Twitter's Card Validator (previously available at cards-dev.twitter.com/validator, though Twitter has periodically changed this tool's availability) previews how your content will appear on Twitter. As of 2026, checking the Twitter preview can also be done by simply sharing the URL in a private tweet and previewing it.
OpenGraph.xyz
A free tool that shows how your URL will appear across multiple platforms simultaneously. Useful for a quick multi-platform check without logging into each platform's specific tool.
Common Open Graph Mistakes
No OG tags at all: Social platforms fall back to guessing at title and image from the page content. Results are unpredictable and often poor — wrong image selected, title truncated awkwardly, no brand consistency.
OG image too small: Images below the minimum recommended size (1200×630px) produce blurry, unappealing preview cards. High-DPI devices and large preview formats amplify the quality difference.
OG image aspect ratio wrong: A portrait image used as an OG image on platforms expecting a landscape format gets cropped in unflattering ways or displayed incorrectly. Always design OG images at the 1.91:1 landscape ratio.
Same OG image for every page: Using the site's homepage OG image as the default for every page means a blog post about SEO shows a generic brand OG image rather than something specific to the SEO topic. Per-page or template-based OG images produce dramatically better social sharing performance.
Absolute URL missing on og:image: The og:image URL must be absolute (https://yourdomain.com/path/image.jpg) not relative (/path/image.jpg). Social media crawlers don't have context for relative URLs and will fail to load the image.
The Bottom Line
Open Graph tags are the metadata layer that controls how your pages appear when shared on social media. Without them, you cede control of your social presence to platform algorithms making uninformed guesses. With them, every share of your content becomes a branded, visually consistent impression with an image and copy that you designed to drive clicks.
Implement the five core OG tags on every page. Add Twitter Card tags. Design or generate compelling OG images for key pages and templates. Test your implementation with platform debugging tools. Update OG data when page content changes significantly.
At Scalify, Open Graph tags are configured on every website we launch — ensuring your site looks professional and branded every time someone shares it, not like an afterthought.
78 SW 7th St, Miami, FL 33130
