Documentation

OpenGraph (OG) tags are special meta tags that control how URLs are displayed when shared on social media. They were originally created by Facebook but are now widely used by other platforms including LinkedIn, Twitter, and more.

Why are they important?

• Better Social Sharing: Control how your content appears when shared on social media
• Brand Consistency: Maintain your brand's visual identity across different platforms
• Increased Engagement: Attractive previews can lead to higher click-through rates
• Professional Appearance: Stand out with properly formatted social media cards

Key Components

• Title: The headline that appears in the social media card
• Description: A brief summary of your content
• Image: A visual representation of your content (1200x630px recommended)
• URL: The link to your content

Generate OpenGraph images and meta tags in 3 simple steps:

1. Enter your title and description in the generator
2. Customize the background color or upload an image
3. Download your image and copy the meta tags

After generating your OG image, follow these steps to make it work:

1. Download the generated image using the "Download Image" button
2. Host the image on your preferred platform:
   • Your website's static assets folder
   • A CDN service (e.g., Cloudinary, ImageKit)
   • Cloud storage (e.g., AWS S3, Google Cloud Storage)
3. Copy the hosted image's public URL
4. Add these tags to your meta tags, replacing [YOUR_IMAGE_URL] with your hosted image URL:

   <meta property="og:image" content="[YOUR_IMAGE_URL]">
   <meta property="twitter:image" content="[YOUR_IMAGE_URL]">

For best results across all platforms, follow these guidelines:

• Recommended size: 1200x630 pixels
• Maximum file size: 5MB
• Format: PNG or JPG
• Keep text clear and readable
• Use high-contrast colors for better visibility

The generator creates meta tags for:

• OpenGraph (Facebook, LinkedIn)
• Twitter Cards
• Basic SEO

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="your-image-url.png">
<meta name="twitter:card" content="summary_large_image">

• Keep titles under 60 characters
• Write descriptions between 140-160 characters
• Test your images on different platforms
• Use clear, readable fonts
• Ensure good contrast between text and background