D
DevTools Suite
HomeToolsMeta Generator

Social Meta Tag & Card Previewer

Configure your Open Graph tags and see exactly how your links will look when shared on Twitter, LinkedIn, Facebook, and Discord.

Meta Details

25 / 60
81 / 160
Preview
DevTools Suite
My Awesome Product Launch
The most comprehensive tool for modern developers and freelancers to ship faster.
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Awesome Product Launch',
  description: 'The most comprehensive tool for modern developers and freelancers to ship faster.',
  openGraph: {
    title: 'My Awesome Product Launch',
    description: 'The most comprehensive tool for modern developers and freelancers to ship faster.',
    url: 'https://yourdomain.com',
    siteName: 'DevTools Suite',
    images: [
      {
        url: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1200&h=630&fit=crop',
        width: 1200,
        height: 630,
        alt: 'My Awesome Product Launch',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Awesome Product Launch',
    description: 'The most comprehensive tool for modern developers and freelancers to ship faster.',
    creator: '@devtools',
    images: ['https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1200&h=630&fit=crop'],
  },
};

Why Open Graph Tags Matter for Product Launches

When you share a link on social media or in a messaging app, platforms look for specific HTML meta tags (known as Open Graph or OG tags) to construct a rich preview card. Without these tags, platforms scrape your site randomly, often pulling an irrelevant image or a truncated description. By explicitly defining your og:title, og:description, and og:image, you take full control over your brand's first impression.

The Golden Rule of `og:image` Dimensions

The most common mistake developers make is uploading incorrectly sized preview images. For the best cross-platform compatibility—especially on Twitter's "Summary with Large Image" card and LinkedIn's feed—your og:image should be exactly 1200x630 pixels (a 1.91:1 aspect ratio). Using this standard size ensures your image is crisp, professional, and entirely free of awkward cropping or black letterbox bars.

Boosting Click-Through Rates (CTR) on Launch Day

A well-crafted social card directly impacts your launch day traffic. Users scrolling rapidly through X (Twitter) or LinkedIn are significantly more likely to pause and click a link that features a high-contrast, beautiful image and a concise, benefit-driven title. By using this preview tool before you deploy, you eliminate the guesswork, ensuring that when your network shares your link, it acts as a high-converting billboard for your product.