Open Graph Tag Generator for Social Sharing Previews

How to use the open graph tag generator

1. Enter your page title, description, URL and image. These are the core properties every open graph generator needs.
2. Select the object type: website, article, product or video. The author, section, price and duration fields are only used with the matching type.
3. Fill in the optional Twitter Card settings if you want consistent previews on X (formerly Twitter).
4. Copy the generated <meta> tags and paste them into the <head> of your HTML document.

What Are Open Graph Tags?

The Open Graph protocol was created by Facebook to let web pages become rich objects in a social graph. When you share a link on platforms like Facebook, LinkedIn, Slack or Discord, those services read specific <meta> tags from the page's HTML to build a preview card. An open graph tags generator automates writing these tags correctly.

The four required properties are og:title, og:type, og:image and og:url. Without them, social networks fall back to scraping whatever text and images they find, which often produces broken or misleading previews. A dedicated og tag generator escapes every value properly and tells you which of the four required properties you have not filled in yet.

Object Types and Their Extra Properties

The og:type property tells crawlers what kind of content the page holds. The default is website, which only needs the base properties. Other types unlock additional metadata:

This open graph protocol generator includes the most commonly used extra properties for each type. Other properties from ogp.me, such as article:published_time, og:video or og:image:alt, can be added by hand after copying the tags. Note that article:author should be the URL of an author profile page.

Twitter Cards Alongside Open Graph

Twitter (now X) uses its own set of meta tags called Twitter Cards. X reads og:title, og:description and og:image when no Twitter equivalents exist, but it needs twitter:card to choose the card layout. The two main card types are summary (a small square image) and summary_large_image (a wide rectangular image).

A good practice is to include both sets of tags. This tool acts as a combined open graph generator and Twitter Card builder, outputting everything in one block. The twitter:site property holds your account handle, and the tool adds the @ if you leave it out.

Common Mistakes to Avoid

Even when using an og tag generator, certain errors can prevent your previews from rendering:

• Missing image dimensions: Social platforms prefer images that are at least 1200 by 630 pixels. Smaller images may be cropped or ignored.
• Unescaped characters: Quotes, ampersands and angle brackets inside attribute values must be converted to HTML entities. This tool handles escaping automatically.
• Relative URLs: Always use absolute URLs for og:image and og:url. Crawlers cannot resolve relative paths.
• Title length: Keep titles near 60 characters and descriptions under about 200 characters, since platforms truncate differently. The tool prints a note when you go over.

You can use a character counter to verify your text lengths before generating the tags.

Where to Place the Generated Tags

Paste the output directly inside the <head> element of your HTML document, ideally near other meta tags like the charset declaration and viewport settings. If you use a framework like Next.js, Nuxt or Astro, place the tags in the layout component or use the framework's built-in head management API.

After publishing, test your page using the Facebook Sharing Debugger or the LinkedIn Post Inspector. These tools force the platform to re-scrape your page and show what preview users will see. X has retired its standalone card validator, so check X previews by composing a post. Because this open graph tags generator runs locally in your browser, you can iterate quickly without deploying changes just to check syntax.

Worked examples