Open Graph Meta Tag Generator

Configuration

Create the title, description, URL, and preview image that social platforms use when your page is shared.

Page title

Page description

Canonical page URL

OG image URL

Best practice: use a public 1200×630 image so the preview keeps the correct Open Graph ratio.

Live preview

This preview keeps a fixed Open Graph image ratio and prevents long text from breaking the card.

1200 × 630

Add a 1200×630 image

Paste a public image URL to preview how the OG image will appear.

example.com/your-page

Your page title will appear here

Your description will appear here. Keep it useful, specific, and easy to understand before someone clicks.

Code

Paste this code inside the head section of your page.

<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Share this Tool with your friends!

Practical guide

Design the link preview before people even visit your page

Open Graph is not just a technical SEO detail. It controls the first impression of your page when someone shares it in a feed, message, community, workspace, or group chat. A strong preview explains the page quickly, looks trustworthy, and gives users a clear reason to click.

OG Image

Make the share card obvious

Use a clear title, simple visual, and safe spacing.

Think of your OG image as a mini landing page. It should still make sense when cropped, compressed, or shown on a small screen.

1. User shares your URL

Someone pastes your link into Facebook, LinkedIn, Slack, Discord, Messenger, or another app.

2. Platform reads your page

The crawler checks your page head and extracts the Open Graph title, description, URL, and image.

3. Preview card appears

The platform builds a card. If your tags are weak, the preview can look broken, random, or boring.

The tags that actually matter

You do not need to overcomplicate Open Graph. Most pages need a few strong tags that clearly explain what the page is and how it should look when shared.

og:type

Defines the content type. For most normal website pages, “website” is the right value.

og:title

Controls the headline of the preview card. It should be specific, not just your brand name.

og:description

Controls the supporting text. Use it to explain the benefit or context of the page.

og:url

Defines the canonical page URL. Use the clean final URL, not a random tracking URL.

og:image

Controls the main visual. This is often the biggest reason a shared link looks professional or unfinished.

og:image:width / height

Tells crawlers the expected image dimensions. 1200×630 helps platforms understand the layout faster.

OG image rule

1200×630

1.91:1 landscape ratio

Use 1200×630 for a safe, high-quality Open Graph image.

Keep important text and logos away from the edges because platforms may crop previews.

Avoid tiny logos as the entire image. The image should communicate the page topic quickly.

Use a public image URL. If the crawler cannot access it, the preview may show no image.

Mistakes that make previews look cheap

Same title on every page

If every page uses the same title, users cannot tell what they are opening. Give important pages their own title.

Description says nothing useful

Text like “Welcome to our website” wastes the preview. Tell people what they will learn, get, or solve.

Wrong image ratio

Square, tiny, or badly cropped images can make your link feel broken. Use a landscape OG image that fits the card.

Where this preview is used

Facebook

Facebook uses Open Graph data heavily for shared links and rich preview cards.

LinkedIn uses your OG title, description, image, and URL to create professional-looking post previews.

Chat apps

Many chat apps use Open Graph tags to show a preview before people decide to open the link.

Crawlers

Preview crawlers often cache metadata, so test important pages after updating your tags.

For best results, create a unique OG image and description for every important landing page, tool page, blog post, and product page instead of reusing the same generic metadata everywhere.