Why does my website not show an image when shared on Twitter or Discord?

Ensure your ` ` or ` ` uses an absolute HTTPS URL and that the image server returns appropriate CORS and Content-Type headers.

Open Graph (OG) & Social Card Previewer (2026)

Free online Open Graph (OG) and Twitter card previewer. Live debugger for social sharing cards on Twitter/X, Facebook, LinkedIn & Google. 1-click export to Next.js 15 metadata.

100% Client-Side Privacy (No Upload)

Live 1:1 Social Share Card Simulator for Twitter/X, Facebook Open Graph & Google SERP

1. Webpage Metadata Inputs

Page Title58/60 chars

Meta Description157/160 chars

Canonical URL

OG Image URL (1200x630 px)

Site Name

Twitter Handle

Live Render

bio.puretoolhub.com

SnapBio - 100% Free Notion-Style Link-in-Bio & Creator Hub

Create a beautiful, high-converting Notion-style link-in-bio page in 30 seconds. Zero ads, instant real-time mobile preview, 8 premium themes, and 100% free.

Export Metadata Code

export const metadata: Metadata = {
  title: "SnapBio - 100% Free Notion-Style Link-in-Bio & Creator Hub",
  description: "Create a beautiful, high-converting Notion-style link-in-bio page in 30 seconds. Zero ads, instant real-time mobile preview, 8 premium themes, and 100% free.",
  metadataBase: new URL("https://bio.puretoolhub.com"),
  alternates: {
    canonical: "https://bio.puretoolhub.com",
  },
  openGraph: {
    title: "SnapBio - 100% Free Notion-Style Link-in-Bio & Creator Hub",
    description: "Create a beautiful, high-converting Notion-style link-in-bio page in 30 seconds. Zero ads, instant real-time mobile preview, 8 premium themes, and 100% free.",
    url: "https://bio.puretoolhub.com",
    siteName: "SnapBio",
    images: [
      {
        url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80",
        width: 1200,
        height: 630,
        alt: "SnapBio - 100% Free Notion-Style Link-in-Bio & Creator Hub",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "SnapBio - 100% Free Notion-Style Link-in-Bio & Creator Hub",
    description: "Create a beautiful, high-converting Notion-style link-in-bio page in 30 seconds. Zero ads, instant real-time mobile preview, 8 premium themes, and 100% free.",
    creator: "@puretoolhub",
    images: ["https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80"],
  },
};

Launching your new SaaS or creator store?

Calculate payment fees with CalcHub and build your creator portfolio with SnapBio.

CalcHub SnapBio

How to Use Open Graph (OG) & Twitter Card Previewer

1Enter your webpage title, description, canonical URL, and OG image URL.
2View live visual previews for Twitter/X, Facebook/LinkedIn, and Google SERP simultaneously.
3Click 'Copy Next.js Metadata' or 'Copy HTML Tags' to paste into your codebase.

Key Features

1:1 Real-time visual simulation of Twitter/X Large Image Card, Facebook Open Graph, and Google SERP.
1-Click Export to Next.js 15+ App Router Metadata TypeScript configuration.
1-Click Export to Standard HTML5 `<meta property='og:...'>` tags.
100% In-browser preview with preset SaaS launch templates.

Frequently Asked Questions (FAQ)

The industry standard ratio is 1.91:1, with recommended dimensions of 1200 x 630 pixels. Keep file sizes under 1MB for fastest social crawler loading.

Related Developer Tools

JSON Tools

JSON Formatter & Beautifier

Format, beautify, and inspect JSON with syntax highlighting and tree view.

Try Tool

Encode & Decode

Base64 Encoder & Decoder

Encode standard text strings into Base64 format or decode Base64 back to plain text.

Try Tool

Developer Tools

JWT Debugger & Decoder

Decode and inspect JSON Web Tokens (Header, Payload, Claims) with 100% client-side privacy.

Try Tool