Open Graph & Social Previews

Overview

When someone shares your link on social media, the platform fetches your page and looks for Open Graph (OG) meta tags to build a preview card. Without these tags, your shared links will either show a blank card or whatever the platform guesses from your page — and that guess is almost always wrong for SPAs.

Since RndrKit serves fully rendered HTML to social media crawlers (Facebook, Twitter, LinkedIn, Discord), your OG tags will be picked up correctly. You just need to make sure they are in your code.

The 5 Essential Open Graph Tags

These are the tags you should set on every page:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A clear, compelling summary of this page." />
  <meta property="og:image" content="https://www.example.com/images/og-banner.jpg" />
  <meta property="og:url" content="https://www.example.com/page" />
  <meta property="og:type" content="website" />
</head>

Tag	What It Does	Tips
`og:title`	The title shown in the preview card	Keep it under 60 characters. Can differ from the `<title>` tag.
`og:description`	The description below the title	Keep it under 160 characters. Make it compelling — this is your pitch.
`og:image`	The preview image	Must be an absolute URL. See image specs below.
`og:url`	The canonical URL for the page	Use the full URL including `https://`.
`og:type`	The content type	Use `website` for most pages. Use `article` for blog posts.

Image Specs by Platform

Each platform has its own image requirements. Here is what you need to know:

Platform	Recommended Size	Minimum Size	Max File Size	Aspect Ratio	Card Type
Facebook	1200 x 630 px	600 x 315 px	8 MB	1.91:1	Link preview
Twitter	1200 x 628 px	600 x 314 px	5 MB	~2:1	`summary_large_image`
LinkedIn	1200 x 627 px	1200 x 627 px	5 MB	1.91:1	Link preview
Discord	1200 x 630 px	256 x 256 px	8 MB	Any (1.91:1 preferred)	Embed

The sweet spot: Create one image at 1200 x 630 pixels and it will work well across all platforms. Save it as a JPEG or PNG under 1 MB for fast loading.

Twitter Card Tags

Twitter uses its own meta tags. If they are missing, Twitter falls back to OG tags, but you get better control by setting both:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A clear summary of this page." />
<meta name="twitter:image" content="https://www.example.com/images/og-banner.jpg" />

The summary_large_image card type shows a big banner image — this is what you want for almost every page. The alternative summary type shows a small square thumbnail, which is mainly useful for profile pages or app cards.

React Helmet Implementation

Here is a reusable SEO component that sets all the right tags:

import { Helmet } from "react-helmet-async";

interface SEOProps {
  title: string;
  description: string;
  image?: string;
  url?: string;
  type?: string;
}

export function SEO({
  title,
  description,
  image = "https://www.example.com/images/default-og.jpg",
  url,
  type = "website",
}: SEOProps) {
  const siteUrl = "https://www.example.com";
  const fullUrl = url ? `${siteUrl}${url}` : siteUrl;

  return (
    <Helmet>
      {/* Standard meta */}
      <title>{title}</title>
      <meta name="description" content={description} />

      {/* Open Graph */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={fullUrl} />
      <meta property="og:type" content={type} />

      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
    </Helmet>
  );
}

Use it on every page:

function BlogPost({ post }) {
  return (
    <>
      <SEO
        title={`${post.title} | Your Blog`}
        description={post.excerpt}
        image={post.coverImage}
        url={`/blog/${post.slug}`}
        type="article"
      />
      <article>{/* post content */}</article>
    </>
  );
}

Common Pitfalls

Relative Image URLs

This is the most common mistake. Social crawlers need the full URL to fetch your image.

<!-- Will not work -->
<meta property="og:image" content="/images/og-banner.jpg" />

<!-- Works -->
<meta property="og:image" content="https://www.example.com/images/og-banner.jpg" />

Wrong Image Dimensions

If your image is too small, platforms will either not show it or display it cropped awkwardly. Stick to 1200 x 630 pixels.

Image File Too Large

Large images slow down preview generation and may be rejected entirely. Keep images under 1 MB. Use JPEG for photographs and PNG for graphics with text.

Social platforms aggressively cache link previews. If you update your OG tags but the old preview still shows, you need to manually clear the platform's cache (see Debugging Tools below).

Missing og:url

Without og:url, some platforms will not consolidate shares of the same page from different URL variations (e.g., with and without trailing slashes or query parameters).

Debugging Tools

After implementing or updating your OG tags, use these platform tools to test your previews:

developers.facebook.com/tools/debug

Enter your URL to see exactly what Facebook scrapes. Click Scrape Again to clear Facebook's cache and fetch fresh data. This also updates previews on Instagram, WhatsApp, and Messenger.

Twitter Card Validator

cards-dev.twitter.com/validator

Preview how your link will appear in tweets. If the preview is stale, the validator will fetch fresh data.

LinkedIn Post Inspector

linkedin.com/post-inspector

Check how your link previews on LinkedIn. Click Inspect to fetch the latest version and clear any cached data.

Discord

Discord does not have an official tool, but you can test by pasting your URL into a Discord message. To force a refresh, add a query parameter like ?v=2 to the URL temporarily.

After Updating Your Tags

Once you have fixed or added OG tags, do two things:

Purge the page cache in RndrKit -- Go to your domain's Cache tab, find the page, and click Purge. This ensures social crawlers get the updated HTML.
Clear platform caches -- Use the debugging tools above to force each platform to re-scrape your page.

Next Steps

SEO Optimization Guide -- Complete guide to meta tags, structured data, and semantic HTML
SEO Audit -- Scan your pages for missing OG tags and other issues
Purging Cache -- Clear cached pages after updating tags