About the Open Graph Generator
The Open Graph Generator writes the og: meta tags that control how a link looks when someone shares it: the title, the description, the image and the site name in the preview card. Fill in the fields, check the preview, and copy the tags into the <head> of your page.
Open Graph was created by Facebook and is now read by most apps that unfurl links, including LinkedIn, Slack, Discord, iMessage, WhatsApp and many others. Without these tags, each app guesses, and the result is often a missing image or the wrong text.
The tool covers the four properties the Open Graph protocol requires (og:title, og:type, og:image and og:url), plus the site name, locale, image size and alt text, article details like the publish date and tags, and an X card line. Everything is generated in your browser.
How to use it
- Pick the typeUse Article for blog posts and news, Website for home and landing pages, or Book, Movie, Video, Song or Profile where they fit.
- Write the title and descriptionKeep the title short and specific. The description is a sentence or two that makes people want to open the link.
- Add the page and image URLsBoth must be full addresses starting with https://. The preview loads your image so you can see the crop.
- Fill in the image detailsEnter the width, height and a short alt text that describes what the image shows.
- Copy the tagsPaste them into the page head, or download open-graph.html. For articles, add the publish date, author profile, section and tags first.
Key features
Live share preview
A card with your image, domain, title and description, close to what most apps show for a large link preview.
All the core tags
The four required properties, og:type, og:title, og:url and og:image, plus og:description, og:site_name and og:locale.
Image size and alt text
og:image:width and og:image:height help apps lay out the card before the image loads; og:image:alt describes it for screen reader users.
Article details
article:published_time, article:author, article:section and one article:tag per tag you enter.
Helpful checks
Warnings for a missing or relative URL, a small image, a missing alt text, and length guides for the title and description.
Private by design
Nothing is uploaded. The image preview loads straight from the address you enter, and the tags are built on your device.
Examples
A blog post
With the sample article, an image URL, alt text "Misty blue ridges at sunrise", publish date October 5, 2026, an author profile, section "Travel" and tags "hiking, tennessee", the tool writes:
<meta property="og:type" content="article">
<meta property="og:title" content="A weekend hiking the Great Smoky Mountains">
<meta property="og:description" content="Two days, 24 miles and three
trailheads. Our route, where to camp and what to pack.">
<meta property="og:url" content="https://example.com/blog/smoky-mountains">
<meta property="og:site_name" content="Northern Trails">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/images/smokies.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Misty blue ridges at sunrise">
<meta property="article:published_time" content="2026-10-05T00:00:00Z">
<meta property="article:author" content="https://example.com/authors/sam-rivers">
<meta property="article:section" content="Travel">
<meta property="article:tag" content="hiking">
<meta property="article:tag" content="tennessee">
<meta name="twitter:card" content="summary_large_image">(The description is one line in the real output.) Each tag gets its own article:tag line, which is how the protocol handles lists. The X line is there because X reads og:title, og:description and og:image when its own tags are missing, but it still needs twitter:card to pick the card type.
What the checks catch
| You enter | The tool says |
|---|---|
| No image | Add an image. Without one, most apps show a small text-only preview or none at all. |
| Image of 800 × 418 | Use an image of at least 1200 × 630 pixels for sharp large previews. |
Page URL /blog | og:url must be a full address starting with https://. |
| Image without alt text | Describe the image in the alt text for screen reader users. |
Picking an image size
1200 × 630 pixels, a ratio of about 1.91 to 1, is the size Meta recommends for link previews, and it also works well on LinkedIn, Slack and in messaging apps. Keep text and faces away from the edges, because some apps crop the image to a square or a narrower shape.
Tips
- Use a different image for each important page. A generic logo on every link is easy to scroll past.
- Write the og:title for a person seeing the link in a feed. It can be shorter and friendlier than the page's title tag.
- After you change the tags, ask the platform to fetch the page again. Facebook's Sharing Debugger and LinkedIn's Post Inspector both refresh their stored copy.
- Make sure the image URL is public and not blocked by robots.txt, a login or hotlink protection, or apps will show a blank card.
- For search results, write the title tag and meta description too. The Meta Tag Generator handles those.
Common mistakes and limits
- Using a relative image or page URLog:image and og:url need full addresses. "/images/smokies.jpg" means nothing to an app that only sees the tag.
- Expecting changes to show up right awayApps cache link previews, sometimes for days. Old posts keep their old preview; refresh the cache with the platform's debugging tool for new shares.
- Using an SVG or a huge fileMany apps do not render SVG previews, and very large images can time out. A JPG or PNG of a few hundred kilobytes is safest.
- Putting a name in article:authorThe protocol defines article:author as a link to a profile, so the field asks for a URL. Some apps show a plain name, but a profile URL follows the standard.
- Mixing up the locale formatog:locale uses an underscore, such as en_US, not the hyphen used in HTML lang attributes (en-US).
