Developer
    Free Forever

    Open Graph Generator

    Ensure your website looks perfect when shared on social media by generating and previewing OG meta tags.

    Privacy Safe
    Instant Results
    4.9 Rating

    Meta Details

    HTML Meta Tags

    <!-- Primary Meta Tags -->
<title>Awesome App - The Best Tool for Creators</title>
<meta name="title" content="Awesome App - The Best Tool for Creators" />
<meta name="description" content="Discover the ultimate platform designed to help creators build, grow, and monetize their audience seamlessly." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourwebsite.com" />
<meta property="og:title" content="Awesome App - The Best Tool for Creators" />
<meta property="og:description" content="Discover the ultimate platform designed to help creators build, grow, and monetize their audience seamlessly." />
<meta property="og:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://yourwebsite.com" />
<meta property="twitter:title" content="Awesome App - The Best Tool for Creators" />
<meta property="twitter:description" content="Discover the ultimate platform designed to help creators build, grow, and monetize their audience seamlessly." />
<meta property="twitter:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" />

    Live Previews

    OG Preview
    yourwebsite.com
    Awesome App - The Best Tool for Creators
    Discover the ultimate platform designed to help creators build, grow, and monetize their audience seamlessly.

    The Importance of Open Graph Tags

    Have you ever pasted a link into a Slack channel, Discord server, or Twitter tweet, only to see a boring, text-only link with no image? That happens when a website is missing its Open Graph (OG) tags.

    When you share a link, platforms scrape your HTML looking for meta property="og:..." tags. If they find them, they construct a beautiful "Social Card" that takes up more space on the feed and drives significantly more traffic.

    Best Practices for OG Tags

    • Title Length: Keep it under 60 characters so it doesn't get truncated on mobile devices.
    • Description Length: Aim for 65-110 characters. Make it a compelling call-to-action.
    • Image Size: The golden ratio for social cards is 1200 x 630 pixels (1.91:1 ratio). Always use absolute URLs (e.g., https://site.com/img.png).

    How to Use This Tool

    1
    Enter Details
    Fill in the Title, Description, and URL of the specific page you want to share.
    2
    Add Image
    Paste a direct link to a high-quality image (ideally 1200x630 pixels) for the social card.
    3
    Preview Card
    Check the visual preview on the right to ensure your text isn't cut off and the image looks good.
    4
    Copy Meta Tags
    Click the Copy button and paste the HTML directly into your website's <head> section.

    Frequently Asked Questions

    Open Graph tags are special HTML <meta> tags that tell social media networks (like Facebook, Twitter, and LinkedIn) what title, description, and image to display when someone shares your website link.

    Usually, this means you are missing the 'og:image' tag, or the image URL you provided is broken or not absolute (starting with https://). Also, ensure your image is close to the recommended 1200x630 resolution.

    This tag tells Twitter to display your link with a large, full-width image preview rather than a small square thumbnail. This significantly increases click-through rates.

    Copy the generated HTML and paste it inside the <head> section of your website's HTML document.

    Related Free Tools

    ⚛️
    SVG to JSX Converter
    Convert SVGs to React
    💻
    Code Snippet Image
    Beautiful code snapshots
    🔗
    UTM Link Builder
    Track your social links