Home
Tools
Open Graph Generator

Open Graph Generator

Generate Open Graph meta tags to control how your URLs are previewed on Facebook, LinkedIn, and more.

Open Graph Configuration

Title (og:title)

Description (og:description)

URL (og:url)

Site Name (og:site_name)

Type (og:type)

Locale (og:locale)

Image URL (og:image)

Image Alt Description

Live Mockup Preview

My Brand

My Awesome Site

Learn more about our services and what makes us different.

HTML Meta Code

<!-- Open Graph / Facebook Meta Tags -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="My Awesome Site">
<meta property="og:description" content="Learn more about our services and what makes us different.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:alt" content="A preview of My Awesome Site logo">
<meta property="og:site_name" content="My Brand">
<meta property="og:locale" content="en_US">

Frequently Asked Questions (FAQ) – Open Graph

What is Open Graph?

Open Graph is a protocol introduced by Facebook that allows web pages to become rich objects in social graphs. By adding Open Graph meta tags, you specify the title, description, image, and type of content for social link previews.

Why does my social image preview not show up?

Ensure the og:image URL is absolute (includes https://), matches standard aspect ratios (like 1200x630 pixels), and is publicly accessible by social crawler bots.

How does this tool process my inputs?

The tool is client-side only. All inputs are compiled in real-time in your web browser. No text or URLs are saved or transmitted.