Open Graph Tags Generator

What Is the Open Graph Tags Generator?

Open Graph tags (og:* meta tags) control how a page's link preview appears when shared on Facebook, LinkedIn, Discord, Slack, and most other platforms that generate rich link previews. This tool generates the standard set from simple form fields.

How to Use This Tool

Enter your page's title, description, preview image URL, page URL, and content type. The generated <meta property="og:..."> tags appear instantly, ready to paste into your page's <head>.

What Each Tag Controls

Practical Uses

• Making sure a page shared on social media shows an attractive, accurate preview
• Controlling exactly which image and description appear in link previews
• Testing Open Graph tag structure before deploying to production

For the search-engine-facing meta tags instead, see the Meta Tags Generator.

What This Generator Outputs Exactly

The tool produces five meta tags, one per line: og:title, og:description, og:image, og:url and og:type. The type dropdown offers website, article, product and profile, and defaults to website. Any double quotes or special characters you type into the fields are escaped for use inside an HTML attribute, so a title such as Guide to "Fast" Pages will not break the tag. Nothing is sent anywhere; the tags are built in your browser from what you typed.

The generator does not add optional companions such as og:site_name, og:locale, og:image:width, og:image:height, og:image:alt or any twitter:* tag. If you want those, paste the output into your template and add the extra lines by hand.

A Worked Example

Suppose you are publishing a hypothetical blog post at https://www.example-bakery.com/blog/sourdough-starter-guide. You enter the title "Sourdough Starter Guide for Beginners", a one-sentence description, the image URL https://www.example-bakery.com/images/starter-og.jpg, the page URL above, and set the type to article. The output is five meta lines that you place inside the head element of that specific page. When someone pastes the link into a chat or social post, the platform fetches the page, reads those tags and builds the card from them rather than guessing from the page body.

Where Each Value Should Come From

• The title should describe the page in a way that makes sense out of context. It does not have to match your search-result title tag exactly, and shorter titles are less likely to be cut off in a card.
• The description is a teaser, not a full summary. Keep it to one or two sentences.
• The image URL must be absolute, starting with https://, and publicly reachable without a login. A relative path such as /images/card.jpg will usually fail because the crawler has no base to resolve it against.
• The page URL should be the canonical version of the page, the same address you would want people to land on, without tracking parameters.

Common Mistakes

• Using one og:url for every page. The value should be unique per page, so generate tags separately for each page or build them dynamically in your template.
• Pointing the image at a file blocked by robots rules, a login wall or a hotlink-protection setting. The crawler then finds nothing to show.
• Choosing a type that does not match the content. Article suits posts and news, website suits home pages and general pages, product suits a single product page, and profile suits a page about a person.
• Expecting changes to appear immediately. Platforms cache previews, so after editing tags you often need to re-scrape the URL with the platform's debugger before the new card shows.
• Leaving the placeholder text the tool starts with. The default title, description and example.com URLs are sample values and must be replaced.

Limits Worth Knowing

Open Graph tags only describe a page; they do not guarantee how a platform will display it. Each network decides its own truncation lengths, crop ratios and whether to show a large or small image. The tags also have no effect on search rankings by themselves. They are useful precisely for the moment a link is shared, so treat them as a presentation layer alongside, not a replacement for, your regular title and description tags.

Frequently Asked Questions