Open Graph Tags: The Complete Guide to Social Media Previews

Q: What happens if I leave out the og:image tag?

If no og:image is present, most platforms will attempt to find a suitable image by scanning the page’s visible <img> elements. This is unreliable — the chosen image may be a logo, an icon, or a decorative background element. In some cases, the preview will render with no image at all, which significantly reduces engagement on shared links.

Q: Can I use different titles and descriptions for OG versus my HTML title and meta description?

Yes, and in many cases you should. Your HTML <title> is optimised for search engine results pages, where it competes alongside ten other blue links. Your og:title appears in a social context where it competes with the content in someone’s feed. These are different copy problems. A title that works for SEO may be too dry for social sharing, and vice versa.

Every time someone shares a link on LinkedIn, Twitter, Facebook, or Slack, the platform reaches into your page’s <head> and pulls out a title, description, and image to display as a rich preview card. If you haven’t told it what to use, it guesses — and it usually guesses wrong. Open Graph tag generators are the handful of meta tags that put you back in control of that first impression.

Key Takeaways

Open Graph tags are HTML meta tags placed in your page’s <head> that control how your content appears when shared on social media platforms.
The four required tags are og:title, og:type, og:image, and og:url — everything else is optional but strongly recommended.
Your og:image should be at least 1200×630 pixels to render correctly across Facebook, LinkedIn, and most messaging apps.
Twitter/X uses its own twitter:card meta tags, which complement — but do not replace — Open Graph tags.

What Are Open Graph Tags and Why Do They Matter

Open Graph (OG) is a protocol originally developed by Facebook in 2010 to standardise how web pages describe themselves to social platforms. The protocol works through <meta> tags added to your HTML document’s <head> section, using a property attribute prefixed with og:. When a crawler from Facebook, LinkedIn, Slack, Discord, WhatsApp, or iMessage visits your URL, it reads these tags and uses them to construct a preview card.

Without OG tags, platforms fall back on whatever they can scrape — often the first paragraph of body text, a random image from the page, or the raw URL itself. The result is an unprofessional preview that reduces click-through rates and undermines the credibility of every page you publish. For any project built on the Canvas HTML Template, adding OG tags is a zero-effort, high-return step that should be part of every deployment checklist.

The Four Required Open Graph Tags

The Open Graph protocol defines four tags as mandatory. Without all four, some platforms will refuse to render a preview card entirely.

og:title — The title of your page as it should appear in the preview. This can differ from your HTML <title> tag; keep it under 60 characters to avoid truncation.
og:type — The type of content: website for most pages, article for blog posts, product for e-commerce items.
og:image — An absolute URL to the image that will appear in the preview card. This is the single most important tag for visual impact.
og:url — The canonical URL of the page. This prevents duplicate preview cards when the same content is accessible via multiple URLs.

<head>
  <meta charset="UTF-8">
  <title>SaaS Platform for Growing Teams | Acme</title>

  <!-- Required Open Graph tags -->
  <meta property="og:title" content="SaaS Platform for Growing Teams">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://www.example.com/assets/images/og-homepage.jpg">
  <meta property="og:url" content="https://www.example.com/">
</head>

Recommended Optional Tags That Make a Real Difference

Beyond the four required tags, a small set of optional properties significantly improves how your previews render and how platforms index your content.

og:description — A 1–2 sentence summary shown beneath the title. Keep it under 155 characters. Write it like ad copy: the person reading it has not visited your site yet.
og:site_name — Your brand name, displayed separately from the page title on many platforms (e.g. “Acme” appears below the title on Facebook).
og:image:width and og:image:height — Explicitly declaring image dimensions lets crawlers skip a separate HTTP request to determine the image size, speeding up preview generation.
og:locale — Declares the language and territory of your content, e.g. enGB or enUS. Useful for multi-region sites.

<!-- Recommended Open Graph tags -->
<meta property="og:title" content="SaaS Platform for Growing Teams">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/">
<meta property="og:image" content="https://www.example.com/assets/images/og-homepage.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Acme helps growing teams automate workflows and close more deals — without the enterprise price tag.">
<meta property="og:site_name" content="Acme">
<meta property="og:locale" content="en_US">

Twitter Card Tags: The Companion Protocol

Twitter/X does read og:title, og:description, and og:image as fallbacks, but its own twitter: namespace gives you explicit control over how previews render on the platform. The most important tag is twitter:card, which accepts four values: summary, summarylargeimage, app, or player. For almost every website, summarylargeimage is the correct choice — it renders a full-width image above the title and description.

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summarylargeimage">
<meta name="twitter:site" content="@AcmeHQ">
<meta name="twitter:title" content="SaaS Platform for Growing Teams">
<meta name="twitter:description" content="Automate workflows and close more deals — without the enterprise price tag.">
<meta name="twitter:image" content="https://www.example.com/assets/images/og-homepage.jpg">
<meta name="twitter:image:alt" content="Screenshot of the Acme dashboard showing pipeline and task views">

Notice that twitter: tags use name= rather than property=. This is a common mistake that causes Twitter to silently ignore the tags. Always double-check this distinction when reviewing your markup. For a landing page built to drive signups — like the patterns covered in SaaS Website Design: Building a B2B Homepage That Converts — getting the Twitter card right is especially valuable because your sales team will be sharing those links constantly.

Open Graph Image Best Practices

The og:image is responsible for the vast majority of the click-through lift you will get from optimising your Open Graph tags. Getting it right involves more than just picking a nice photo.

Dimensions: The recommended size is 1200×630 pixels at a 1.91:1 aspect ratio. Facebook and LinkedIn both crop square images, so avoid using portrait-orientation assets as your OG image.
File size: Keep images under 8 MB (Facebook’s hard limit), but aim for under 300 KB in practice. Platforms cache your image, but slow initial fetches can cause previews to fail entirely the first time a URL is shared.
Text overlays: If you add text to the image, keep it in the central 80% of the canvas — edges are sometimes cropped on mobile previews.
Absolute URLs only: The og:image value must begin with https://. Relative paths like /images/og.jpg are silently ignored by most crawlers.
Unique images per page: Avoid using the same generic brand image on every page. A blog post, a pricing page, and a product page should each have a distinct OG image that reflects the content.
Cache invalidation: Social platforms cache OG images aggressively. If you update an image, use Facebook’s Sharing Debugger and LinkedIn’s Post Inspector to force a re-scrape.

If you are building event pages or registration flows — for example, the kind of high-conversion design discussed in Webinar Registration Pages: Design Elements That Fill Seats — a branded OG image with the event name and date dramatically increases the perceived legitimacy of links shared in email campaigns and community groups.

Testing and Validating Your Open Graph Implementation

Writing the tags is only half the work. Before publishing, verify that crawlers can read them correctly. Each major platform provides its own inspection tool.

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — shows exactly what Facebook will display and flags warnings such as missing tags or images that are too small.
LinkedIn Post Inspector (www.linkedin.com/post-inspector) — useful because LinkedIn sometimes applies stricter caching than Facebook; use the “Inspect” button to force a refresh.
Twitter Card Validator — now part of the developer portal after the 2023 platform changes; still functional for verifying twitter:card output.
OpenGraph.xyz — a third-party preview tool that shows how your tags render across multiple platforms simultaneously without requiring you to log into each.

A common issue is that platforms cannot reach your og:image URL because it sits behind authentication, a firewall, or a robots.txt rule that blocks crawlers. Always test with a publicly accessible URL. For sites generated with Canvas Builder, your HTML is served as static files, which means OG image URLs are straightforward — no authentication barriers to worry about.

Frequently Asked Questions

Do Open Graph tags affect SEO rankings?

Open Graph tags do not directly influence Google’s ranking algorithm, but they have an indirect effect. Better social previews increase click-through rates on shared links, which drives traffic signals. They also reduce bounce rates from social referrals because visitors arrive with accurate expectations about the content. Every page on a professionally built site — including those covered in guides like How to Build a Complete Business Website with Canvas HTML Template — should include a full set of OG tags as standard practice.

What happens if I leave out the og:image tag?

If no og:image is present, most platforms will attempt to find a suitable image by scanning the page’s visible <img> elements. This is unreliable — the chosen image may be a logo, an icon, or a decorative background element. In some cases, the preview will render with no image at all, which significantly reduces engagement on shared links.

Can I use different titles and descriptions for OG versus my HTML title and meta description?

Yes, and in many cases you should. Your HTML <title> is optimised for search engine results pages, where it competes alongside ten other blue links. Your og:title appears in a social context where it competes with the content in someone’s feed. These are different copy problems. A title that works for SEO may be too dry for social sharing, and vice versa.

How often do social platforms re-scrape Open Graph tags?

Platforms cache OG data aggressively. Facebook typically re-scrapes a URL every 30 days or when someone uses the Sharing Debugger to trigger a manual refresh. LinkedIn caches for 7 days. If you update your OG tags or replace an image, use the platform’s respective inspection tool to invalidate the cache immediately, otherwise the old preview will continue appearing for weeks.

Do Open Graph tags work on single-page applications (SPAs)?

This is a known challenge with SPAs built in React, Vue, or similar frameworks. Social crawlers generally do not execute JavaScript, so if your OG tags are injected into the DOM by client-side code, crawlers will not see them. Solutions include server-side rendering (SSR), static site generation (SSG), or a prerendering service. If you are building static HTML pages — as with Canvas-based projects — this problem does not apply, since the tags are present in the raw HTML file.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.