Which og:type should I use?

website is the safe default for a homepage or generic page; use article for blog posts and news content (which unlocks article-specific tags like published time on some platforms), product for an e-commerce product page, and profile for a personal or author page. Most platforms don't render very differently based on this, but it's a useful semantic hint some do use.

What image dimensions should og:image use?

Facebook and most other consumers recommend a minimum of 200x200px but render a much better large-image-style card at 1200x630px (roughly a 1.91:1 ratio) - too small and the platform may fall back to a smaller thumbnail layout instead of a big shareable image.

Do I need to set og:image:width and og:image:height?

They're optional, but recommended: without them, some platforms have to download the image first to determine its dimensions before rendering a preview, which can delay how quickly your link preview appears when someone pastes it. Setting them lets the platform allocate the preview layout immediately.

Why is og:url needed if the page already has that URL?

og:url tells platforms the canonical URL to associate likes/shares with, which matters if the same content is reachable at more than one URL (with or without tracking parameters, for instance) - without it, share counts can split across different URL variants instead of consolidating.

Open Graph Generator - Build og:title, og:image & More Tags

Overview

Introduction

Open Graph tags decide what a page looks like when someone pastes its link into Facebook, Slack, LinkedIn, Discord, or any of the dozens of other platforms that read them - without them, a shared link falls back to a bare title with no image, which gets noticeably fewer clicks than a rich preview card.

This tool takes plain form fields and generates a correctly formatted block of og:* meta tags, so you don't have to remember the exact property names or which ones are required.

What Is Open Graph Generator?

A generator that builds the <meta property="og:..."> tag block covering the Open Graph protocol's required properties (title, type, image, url) plus the commonly used description, site_name, and image dimension tags.

It produces a standalone snippet to paste into your own page template or CMS; it doesn't publish or fetch anything itself.

How Open Graph Generator Works

Each form field maps to one og:* tag; og:title, og:image, and og:url are required inputs since the Open Graph protocol requires them (og:type defaults to "website" if left at its default toggle).

Optional fields (description, site_name, image width/height) are only included in the output when filled in, so the generated snippet doesn't include empty tags.

When To Use Open Graph Generator

Publishing a new page and want a complete Open Graph tag set for its social share preview without looking up the exact tag syntax.

Fixing a page that showed up as a bare link when shared, by generating the missing og:image/og:url/og:type tags it needed.

Often used alongside Open Graph Checker and Meta Tag Generator.

Features

Advantages

Covers the full required set (og:title, og:type, og:image, og:url) plus the most commonly needed optional tags in one pass.
Lets you set og:image:width/height, which speeds up how some platforms render the preview.
Pairs directly with the Open Graph Checker tool to verify the tags render correctly once published.

Limitations

This tool only generates tag text; it doesn't validate that your og:image URL actually loads or meets a platform's minimum size requirements.
It doesn't fetch or preview how the card will actually render on any specific platform; use that platform's own debugger (e.g. Facebook Sharing Debugger) for a visual check.

Examples

A product page's Open Graph tags

Input

og:title: Buy Running Shoes Online
og:type: product
og:image: https://example.com/shoes.jpg
og:url: https://example.com/running-shoes

Output

<meta property="og:title" content="Buy Running Shoes Online">
<meta property="og:type" content="product">
<meta property="og:image" content="https://example.com/shoes.jpg">
<meta property="og:url" content="https://example.com/running-shoes">

The four required properties, generated with correct attribute syntax and no extra empty tags.

Best Practices & Notes

Best Practices

Always use a full absolute URL for og:image (starting with https://), since platforms fetch it from their own crawler, not the visitor's browser.
Write og:title and og:description as share-specific copy rather than reusing the page's <title> and meta description verbatim, since what reads well in a search result doesn't always read well as a social card.

Developer Notes

og:image:width/height should match the image's real pixel dimensions exactly; a mismatch can cause some consumers to skip using the dimensions hint and fetch the image to measure it themselves anyway, defeating the point of setting them.

Open Graph Generator Use Cases

Generating a complete Open Graph tag block for a new landing page or blog post
Adding a product-specific og:type and image tags to an e-commerce product template
Producing tags for a marketing team to paste into a CMS's social-preview fields

Common Mistakes

Forgetting og:url, which causes share/like counts to fragment across different URL variants of the same content instead of consolidating on one canonical URL.
Using a square or oddly-cropped og:image that gets awkwardly cropped by platforms expecting roughly a 1.91:1 landscape ratio.

Tips

Generate the tags, publish the page, then run the Open Graph Checker against the live URL to confirm nothing was altered by your CMS's templating.

Open Graph Generator