How to Generate Open Graph Meta Tags

Open Graph meta tags control how your page looks when shared on social media. Without them, platforms guess what to show — often pulling the wrong image, a truncated title, or no description at all. Adding OG tags ensures your content appears the way you intend every time it's shared.

Why Open Graph tags matter

When someone shares your page on Facebook, LinkedIn, or Twitter, the platform reads your OG tags to build the preview card. Set them properly and you control the title, description, and thumbnail image. Leave them out and the platform makes its best guess — which is often wrong. Good OG tags increase click-through rates because the preview looks polished and relevant.

How to generate OG tags with this tool

Open the Open Graph Generator tool.
Fill in your page details: website name, page title, description, image URL, and page URL.
Choose the content type that best matches your page.
Preview the social card in real-time to see exactly how it will appear.
Copy the generated meta tags or download them as a text file.
Paste the tags into the `<head>` section of your HTML.

Everything runs in your browser — no data is sent anywhere.

What each field does

Website Name — The site or brand name that appears above the title in the preview. Keep it short.
Page Title — The headline of your page. Aim for 55-60 characters so it doesn't get cut off.
Description — A summary of the page content. Keep it under 160 characters for full display.
Image URL — The thumbnail shown in the preview. Use a 1200×630 pixel image for the best display across all platforms.
Page URL — The canonical URL of the page. This is what people click when they visit.
Content Type — Tells platforms whether the page is a website, article, product, video, or music.

Making a preview image that works

The preview image is the most visible part of your social card. A bad image kills engagement. What works:

Use 1200×630 pixels — This is the standard size that all major platforms support.
Include text on the image — A title or key message on the image itself ensures it communicates even if the description is cut off.
Keep it simple — One clear focal point, not a collage of elements.
Use high contrast — Light text on a dark background (or vice versa) reads at thumbnail size.
Test it — Paste the page URL into a social post draft to see how the preview actually appears before publishing.

Where to put the tags

The generated meta tags go inside the `<head>` section of your HTML, between the `<head>` and `</head>` tags. They do not affect how your page looks — they only tell social platforms what to display.

```html

<head> <title>Your Page Title</title>  <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A brief description of your content" /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="My Website" />  </head>

```

Related tools

For image-based social previews, Add Text to Image lets you create custom thumbnail images directly. Need to crop or resize the thumbnail image first? Crop Image and Resize Image handle that before you generate the OG tags.

Common uses

Blog posts and articles — Control how each post appears when shared.
Product pages — Show the product image and price in the preview.
Landing pages — Ensure the preview matches your marketing message.
Portfolio items — Display your work with a custom thumbnail.

Privacy and limits

Generating OG tags is fully local — no data is sent to any server, nothing is stored, offline once loaded. Open the Open Graph Generator tool to create your tags.

Try the tool

Open Open Graph Generator →