Open Graph Generator: Free OG Tags & Preview

An open graph generator builds the OG meta tags that control how your page looks when someone shares it on Facebook, LinkedIn, Slack and other platforms. Enter a title, description, URL and image, watch the social preview update, then copy the finished code into the head section of your page.

What Is Open Graph and Why Do the Tags Matter?

Open Graph is a protocol, introduced by Facebook, that lets a web page describe itself to other platforms through meta tags. When someone pastes your link into Facebook, LinkedIn, Slack, WhatsApp or Discord, the platform reads those tags to build a preview card with an image, a headline and a short description.

The protocol documentation lists four required properties: og:title, og:type, og:image and og:url. Most pages also add og:description, og:site_name and og:locale. Open Graph tags do not change your Google rankings directly, but a clear, attractive card earns more clicks from every link that gets shared.

Is Open Graph the same as the Facebook Graph API?

No. Open Graph tags are plain text lines in your HTML. You do not need an access token, an app ID or a page ID to use them. The Graph API is a separate developer product for reading and posting data on Facebook.

How to Use the Open Graph Generator

You fill in a short form, and the tool writes the tags for you while a live card shows the result. Follow these steps in order.

1. Type your headline in Title. A counter shows your length against the 60-character target.
2. Enter your brand in Site Name and the full page address in URL, for example https://example.com/page.
3. Write a summary in Description. The counter aims for 200 characters or fewer.
4. Pick a Type from the list, such as Website, Article or Product.
5. Add a Locale such as en_US, fr_FR or de_DE if you want to declare the page language and region.
6. Paste your Image URL, then set Width (px), Height (px) and Image Alt Text. Fill in Audio URL or Video URL only if the page has that media.
7. Check the Social Preview, press Copy under Generated Code, and paste the result into the head section of your page.

Worked Example: Tags for a Blog Post

Say you published a cooking guide and want it to look sharp when shared. Here is a realistic set of inputs and what they mean.

• Title: How to Season a Cast Iron Skillet in 5 Steps (44 characters, under the 60 target).
• Site Name: Hearth and Pan.
• URL: https://hearthandpan.example/season-cast-iron.
• Description: Learn how to season cast iron with oil and heat so it stays nonstick and rust free. Includes oil picks and common mistakes. (about 130 characters).
• Type: Article. Locale: en_US.
• Image URL: a hosted photo of the skillet, Width 1200, Height 630, Alt Text: Seasoned cast iron skillet on a wooden table.

The preview shows the photo on top, the domain in capitals, then the title and description. The generated code contains one line per field you filled in, including og:title, og:description, og:type with the value article, og:url, og:image, its width and height, and the alt text. Because the title and description sit well inside their limits, nothing will be cut off in the card.

How Do You Read the Preview and Fix Problems?

The preview card is your quick quality check: if it looks clear and complete here, it is likely to look good when shared. Use these rules of thumb, which are widely used guidelines rather than guarantees.

Title

Keep the title near or under 60 characters. Longer titles are often truncated with an ellipsis, which can hide your key words. Put the most important words first and avoid repeating your site name, since the Site Name field already covers it.

Description

Keep the description under 200 characters and make it a promise, not a keyword list. Say what the reader gets. If your card looks empty or vague, rewrite the description around one concrete benefit. To compare how the same words look in Google results, try the Google SERP snippet preview.

Image

A 1200 x 630 pixel image (a 1.91:1 ratio) is the commonly recommended size and displays well on major platforms. If the preview shows a gray placeholder icon, the image address is wrong, blocked or not an absolute link. Use a full URL starting with http or https, and make sure the file opens in a browser tab.

URL

The URL should be the exact address you want counted as the page, with no tracking parameters. If the same content lives at several addresses, match this value to your canonical version, which you can verify with the canonical tag checker.

Which Open Graph Type Should You Choose?

Choose the type that matches what the page actually is. If you are unsure, Website is a safe default for general pages.

The list also includes Business, Restaurant, Book, Place, Fitness Course and other specialized values. Pick them only when the page truly represents that thing. A generic Object type exists for pages that fit nowhere else.

Who Needs an OG Tag Generator?

Anyone who shares links and cares how they look will save time here. Typical situations include these.

• Bloggers and publishers who want every post to show a clean card with a custom image instead of a random crop. Pair it with article schema markup for search engines.
• Store owners sharing product pages in social posts and messaging apps.
• Developers building static sites or templates who need correct tag syntax without writing it by hand.
• Marketers preparing a campaign landing page and checking the card before the launch post goes out.
• Music, video and event creators who need a type and media fields beyond the basic website card.

Best Practices, Common Mistakes and Troubleshooting

Most broken cards come from a few repeat mistakes, and each one has a simple fix.

• Relative image paths. An address like /images/card.jpg will not work. Use the full https address.
• Missing dimensions. Without Width and Height, some platforms load the image slowly or skip it on the first share. Enter positive whole numbers such as 1200 and 630.
• Putting tags in the body. Paste the code inside the head section, not the body.
• Same card on every page. Generate unique tags for each important page, or the shared cards will all look identical.
• Stale previews. Platforms cache cards. After you fix a tag, re-scrape the page in the platform debugger or run it through the Open Graph checker to confirm what is live.
• Wrong locale format. Use language and territory with an underscore, such as en_GB, not en-GB. For multilingual sites, the hreflang tags generator handles the search side.
• Empty alt text. Describe what the image shows so the card is useful to people using screen readers.

Limitations to Keep in Mind

This page creates Open Graph tags and shows an approximate preview. Each platform draws its own card and may crop or restyle it, so the real result can differ slightly. X also supports its own card tags, which this generator does not produce, though it can fall back to Open Graph tags when they are missing.

The tool cannot check that your image is publicly reachable, and the preview does not replace testing a live URL after you publish. Treat the tips under the code as guidelines, not rules enforced by every platform.

With a clear title, a tight description and a correctly sized image, your shared links can look professional in under a minute. Fill in the form above, copy the code, and add it to your page. For more tools like this one, browse the On-Page SEO and Meta Tags tools.