🎨 OG Preview Builder

Generate and preview Open Graph meta tags in real-time

What is Open Graph?

Open Graph is a protocol that enables any web page to become a rich object in social networks. When you share a link on Facebook, Twitter, LinkedIn, or WhatsApp, these platforms use Open Graph meta tags to display a preview with an image, title, and description. This tool helps you create and preview these tags before publishing your content.

📝 Content Details

Image

🖼️

Drag & drop an image here

or click to browse from your computer
Preview

Image loaded successfully

0/60
0/155

👁️ Live Previews

No image selected
Your title will appear here
Your description will appear here
example.com
No image selected
Your title will appear here
Your description will appear here
example.com
💼 LinkedIn
No image selected
Your title will appear here
Your description will appear here
example.com
💬 WhatsApp
No image selected
Your title will appear here
Your description will appear here
example.com

🏷️ Generated Meta Tags

▼ 
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Your title will appear here">
<meta property="og:description" content="Your description will appear here">
<meta property="og:image" content="">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Website">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your title will appear here">
<meta name="twitter:description" content="Your description will appear here">
<meta name="twitter:image" content="">

📚 Implementation Guide

▼

WordPress

  1. Using Yoast SEO Plugin (Recommended):
    • Install and activate Yoast SEO plugin
    • Edit your page/post
    • Scroll to Yoast SEO section below the editor
    • Click on "Social" tab
    • Add your title, description, and image
  2. Manual Method:
    • Go to Appearance → Theme Editor
    • Open header.php file
    • Paste the meta tags inside the <head> section
    • Save changes
<?php if (is_single() || is_page()) { ?> <!-- Your meta tags here --> <?php } ?>

Shopify

  1. Go to Online Store → Themes
  2. Click "Actions" → "Edit code"
  3. Open theme.liquid file
  4. Find the <head> section
  5. Paste the meta tags before </head>
  6. Save changes
<head> <!-- Existing Shopify tags --> <!-- Your Open Graph meta tags --> <meta property="og:title" content="{{ page_title }}"> <meta property="og:description" content="{{ page_description }}"> <!-- Add other tags --> </head>

Pure HTML

  1. Open your HTML file in a text editor
  2. Locate the <head> section
  3. Paste the generated meta tags before </head>
  4. Save the file
  5. Upload to your web server
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Your Page Title</title> <!-- Open Graph Meta Tags --> <meta property="og:title" content="Your Title"> <meta property="og:description" content="Your Description"> <!-- Add other tags --> </head> <body> <!-- Your content --> </body> </html>

Testing Your Meta Tags

  1. Facebook Sharing Debugger: developers.facebook.com/tools/debug/
  2. Twitter Card Validator: cards-dev.twitter.com/validator
  3. LinkedIn Post Inspector: linkedin.com/post-inspector/