The Open Graph protocol defines four required meta properties — og:title, og:type, og:image, and og:url — that tell social platforms how to render a shared page. An Open Graph generator is a tool that builds those meta tags from a small set of inputs, so beginners do not have to memorize the syntax or escape HTML by hand. The browser-based Open Graph Generator at Lizely produces a clean property block that you paste once into the page head and forget about. It runs without servers, without logins, and without fetching your image to test it, which keeps the work fast and private. What it does guarantee is that every required field is filled before any output appears, that values are HTML-escaped so ampersands and quotes cannot break the element, and that the property order matches the Open Graph Protocol specification. This article walks a first-time user through what each property means, what counts as a valid URL, and how to verify the result after deployment.
What Open Graph Tags Actually Do
When somebody shares a link on Facebook, LinkedIn, X, Slack, Discord, or a similar service, that service needs to know the page's name, what kind of page it is, which image to display, and where the canonical address lives. Without that information, the platform falls back to whatever it can scrape from the HTML, which often produces a broken preview with the wrong image or no description at all. Open Graph is the protocol that solves this by exposing four structured meta elements in the page head that any consumer can read.
These tags are not ranking signals for Google. Their job is purely presentation: they control how your link looks when somebody shares it. A good preview earns the click; a bad preview silently costs traffic. For a beginner, this means Open Graph is one of the highest-leverage small tasks you can complete on a new page.
The tags themselves follow a specific property syntax, defined by the Open Graph Protocol. The HTML meta element specification at WHATWG documents how the meta element works inside the head of a document. The generator respects both contracts: it emits property-based attributes, not name-based, and it escapes every attribute value as a standard HTML attribute.
The Four Required Properties Beginners Must Fill In
The protocol requires exactly four properties before a preview block is even worth generating. The Open Graph Generator always emits these first, in this stable order, before any optional fields.
| Property | What it means | Example value |
|---|---|---|
| og:title | Names the shared object, usually the page headline | Best Chocolate Chip Cookies |
| og:type | Classifies the page; website for a homepage, article for posts | website |
| og:image | Points to the representative image, public and crawlable | https://example.com/cookies.jpg |
| og:url | Identifies the canonical, permanent address of the page | https://example.com/cookies |
Missing any one of these blocks output in the generator. That constraint prevents you from copying a half-built block that looks correct in source but renders blank in a share preview. If you are a beginner, treat the four fields as the minimum bar: a working preview on every platform requires nothing more, but it also accepts nothing less.
The two object types — website and article — were chosen deliberately. Music, video, profile, and other structured types exist in the protocol but require extra fields the form would otherwise leave blank. Limiting the choice to website and article prevents incomplete type-specific metadata from ever reaching your page.
How to Generate Your First Open Graph Block
The form is intentionally short. Follow the steps in order and paste the resulting block into the page head of the canonical page.
- Open the Open Graph Generator at Lizely in any modern browser tab.
- Type the page title into the og:title field. Use the same headline a reader sees on the page itself.
- Choose website for a homepage or landing page, or article for a blog post or news piece.
- Paste the canonical page URL into the og:url field. The address must start with http:// or https://, must not contain a #fragment, and must not carry embedded credentials.
- Paste the image URL into the og:image field. The address follows the same URL rules, and it should point to a publicly reachable file that returns a real image when fetched.
- Optionally fill in og:description, og:site_name, and og:locale if you want a richer preview. Each is bounded in length, trimmed, and rejected if it contains control characters.
- Click generate. The tool returns a block of meta elements in required-first stable order, with every attribute value HTML-escaped.
- Copy the entire block and paste it inside the head of the canonical page. Do not place it as visible body text, do not encode the whole block again, and do not duplicate it through both a framework and a plugin.
- Inspect the delivered source to confirm the block landed in the right place and that no build tool reordered or stripped the tags.
If you are unsure how to pick or format an image URL, the guide to creating an Open Graph image URL that renders correctly walks through the practical constraints.
Where to Paste the Block and How to Verify It
The meta elements belong in the head of the canonical page — the same page that the og:url property names. They should not appear in the body, in a JavaScript-injected fragment, or behind a single-page-app route that loads after first paint. Crawlers from social platforms typically read raw HTML, so anything loaded dynamically may be missed.
After deploying, inspect the source of the page and confirm the meta elements are present, in the order the generator produced them. Then use each platform's current preview debugger to check the share appearance: Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator, and any other service that matters to your audience. Each debugger crawls your page, fetches your image, and renders a preview using that platform's own rules.
A working preview on one platform does not guarantee the same on another. Social services apply their own image aspect ratio preferences, cache metadata for hours or days, crop images at platform-chosen focal points, and may ignore certain optional fields entirely. If you change a title or image after publishing, allow time for the platform's cache to refresh, or use the debugger's rescrape feature if available. The Open Graph tags themselves do not change; the cached version on the platform does.
Optional Properties Worth Knowing
Three optional properties are accepted by the generator and can enrich a preview when the basics are already working.
og:description is a short summary of the page. It is bounded in length, trimmed, and rejected if it contains control characters. Use a sentence or two that genuinely describes the content the reader will see.
og:site_name names the larger site the page belongs to. Use your brand or publication name. Keep it stable across all pages so each preview carries consistent branding.
og:locale uses a conservative language_TERRITORY shape such as en_US. The validator accepts a two-letter language and two-letter territory only; alternate locales and script subtags require additional protocol properties and editorial decisions outside the focused form.
None of these are required for a basic preview, but filling them in gives platforms enough context to apply the right language, region, and brand name when rendering the share.
Mistakes Beginners Make With Open Graph Tags
A few common patterns trip up first-time users. None of them are exotic; they are routine mistakes worth flagging once.
Putting relative URLs in og:url or og:image. Both fields must be absolute, starting with http:// or https://. A path like /cookies.jpg is not valid for either field, and the generator refuses to emit output with that value.
Leaving a #fragment on the page URL. Sharing the same page to different anchors splits one resource across many cache entries. The generator strips fragments during URL normalization so this cannot slip through, but the underlying habit still creates duplicate previews elsewhere.
Embedding credentials in a URL. An address such as https://user:[email protected]/cookies would copy the user information into public metadata. The generator rejects any URL containing an @ before the authority or an embedded password.
Assuming the tool fetches and tests the image. It does not. You need to confirm the image URL returns a valid MIME type, fits within the platform's byte and dimension limits, and is reachable to the platform's crawler.
Duplicating the meta block. If your framework already injects Open Graph tags and you also paste a hand-written block, the second copy will either override the first or trigger duplicate-property warnings in debuggers. Pick one source.
Treating Open Graph as a Twitter Card or Facebook-only concern. Some platforms read these tags as fallbacks, but service-specific protocols still exist. The generator emits Open Graph only; do not assume a Twitter or service-specific tag is being produced.
Writing metadata that does not match visible content. A misleading title, description, or image can earn the click and then disappoint the visitor. Trust compounds slowly and evaporates fast.
After publishing, compare the raw source, the fetched image response, and the live platform previews. When a page moves or changes identity, update all representations together.
Related reading: Extract URLs From a Sitemap for Beginners: First Guide.