Recommended Free Tools
To generate Open Graph metadata, add four properties to your page’s <head>: og:title, og:type, og:image and og:url. The generator below turns your page details into paste-ready markup, including an image description and optional description and site name. Add the result to the page, then check how the relevant platform reads it; markup alone cannot guarantee an identical preview everywhere.
Generate Open Graph tags for a page
Fill in the page title, object type, canonical URL and an absolute URL for the image you want shown when the page is shared. Add an image description as well. The Open Graph Protocol identifies og:title, og:type, og:image and og:url as its four required properties. Its source also says to specify og:image:alt when an image is specified. The code generator below produces those fields, plus optional description, locale and site-name fields when you supply them. Read the Open Graph Protocol specification.
Save the following as an HTML file and open it in a browser to use the local generator. It does not send your entries to a service. The default type, website, is an example—not a universal choice. Choose a type that describes the page, and check the protocol’s requirements for that type if it needs additional properties.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Open Graph tag generator</title>
<h1>Open Graph tag generator</h1>
<form id="og-form">
<p><label>Page title <input name="title" required value="A meaningful page title"></label></p>
<p><label>Object type <input name="type" required value="website"></label></p>
<p><label>Canonical page URL <input name="url" type="url" required value="https://example.com/page"></label></p>
<p><label>Image URL <input name="image" type="url" required value="https://example.com/share-image.jpg"></label></p>
<p><label>Image alt text <input name="alt" required value="A useful description of the image"></label></p>
<p><label>Description (optional) <textarea name="description">A concise description of this page.</textarea></label></p>
<p><label>Site name (optional) <input name="site_name"></label></p>
<p><label>Locale (optional) <input name="locale" placeholder="en_US"></label></p>
<button>Generate tags</button>
</form>
<h2>Generated markup</h2>
<textarea id="output" rows="12" cols="80" readonly aria-label="Generated Open Graph markup"></textarea>
<script>
const form = document.querySelector('#og-form');
const output = document.querySelector('#output');
const escapeAttribute = value => value.replace(/&/g, '&')
.replace(/"/g, '"').replace(/</g, '<')
.replace(/>/g, '>');
form.addEventListener('submit', event => {
event.preventDefault();
const data = new FormData(form);
const fields = [
['og:title', data.get('title')],
['og:type', data.get('type')],
['og:url', data.get('url')],
['og:image', data.get('image')],
['og:image:alt', data.get('alt')],
['og:description', data.get('description')],
['og:site_name', data.get('site_name')],
['og:locale', data.get('locale')]
];
output.value = fields.filter(([, value]) => String(value || '').trim())
.map(([property, value]) =>
`<meta property="${property}" content="${escapeAttribute(String(value).trim())}" />`
).join('n');
});
form.requestSubmit();
</script>The script escapes characters that would otherwise break a quoted HTML attribute, such as an ampersand or quotation mark. It generates markup only; it does not verify that the URLs work, that the image can be fetched by a platform, or that the selected object type is suitable. Those checks belong in your publishing and preview workflow.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
What the four required properties mean
| Property | What to enter | Practical check |
|---|---|---|
og:title |
A meaningful title for the shared page. | Make it identify this page rather than using a generic site-wide label. |
og:type |
The object type that fits the page. | website is an example value, not the right answer for every page. Some types require additional properties. |
og:image |
The URL of the intended share image. | Use an address that points to the image itself, not to a page containing it. |
og:url |
The canonical URL of the page. | The protocol defines this as the object’s permanent identifier in the graph, so use the URL you intend to represent that page. |
These tags belong in the document’s <head> as <meta> elements. The protocol’s example declares the Open Graph namespace on the HTML element with prefix="og: https://ogp.me/ns#". Follow the conventions of your existing document and framework when adding the tags.
Useful optional fields and image details
og:descriptionsupplies a concise description of the page.og:site_nameidentifies the site associated with the object.og:localedescribes the locale for the page.og:audioandog:videoare available for objects with relevant audio or video.- Image metadata can also include a secure URL, MIME type and dimensions. Add those when they accurately describe the image you publish.
- Provide
og:image:altwhen you provideog:image; the protocol says it should be specified. Describe the image’s relevant content rather than repeating the page title.
Do not add optional tags just to make the markup longer. Each value should describe the same page and intended preview. For a type that calls for extra properties, consult the protocol’s type-specific guidance rather than assuming the basic four-field snippet covers every requirement.
Rank #2
Put the generated tags in your page
- Generate the markup using the tool above, or write equivalent
<meta>elements yourself. - Open the template or source that produces the intended page. Place the tags inside that page’s
<head>, not in visible page content. - Use page-specific values. For a site with many URLs, make sure the title, canonical URL, description and image correspond to the current page rather than a shared default.
- Publish the page and inspect the rendered document to make sure the tags are present with the expected values. If a framework or CMS generates the head, check its output rather than relying only on the editor field.
- Use the relevant platform’s current preview or debugging method to inspect how it parses the live URL. If the preview is stale, check whether that platform offers a way to refresh its cached result; behavior and refresh options differ by platform.
Generating a snippet is only one part of the job: a platform must fetch and interpret the page before it can show a preview. A correct-looking source snippet therefore cannot guarantee that every platform renders the same title, description or image.
Or skip the browser setup
If you want to inspect the published page visually after adding its metadata, ScreenshotNeo can return a page screenshot through one GET request. It is a website screenshot API and MCP server for developers. A screenshot is useful for checking the rendered page; it is not a substitute for a platform’s own parser or preview.
Rank #3
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request details. Before capture, it accepts the cookie or consent banner as a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for AI agents and other MCP clients.
The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. See ScreenshotNeo or sign up for 1,000 free screenshots a month, with no card required.
Troubleshoot a missing or unexpected preview
- The preview has no title or image: Inspect the published page’s actual
<head>and confirm the required properties are present, populated and associated with the intended URL. - The preview shows an old value: The platform may be using cached data. Check that platform’s current refresh or debugger options; cache behavior is not uniform.
- The page source looks right but the preview differs: Confirm you are testing the exact canonical URL and inspect the result with the platform that owns the preview. A generator cannot guarantee identical parsing across platforms.
- The wrong image appears: Check the value in
og:imageand verify that it identifies the intended image. If you supply image metadata such as dimensions or MIME type, make sure those values describe the asset. - Text breaks the generated tag: The sample generator escapes HTML-sensitive characters for an attribute. If you replace it with another generator or a CMS field, ensure the output is safely escaped and inspect the final HTML.
- A page type needs more metadata: The four required properties are the baseline. Some selected object types can require additional properties, so consult the protocol for that type.
Common implementation choices
A static page can contain the tags directly in its HTML head. A site generated from templates should populate them from page data so each URL gets its own values. A CMS or SEO extension can expose similar fields in an editor, but confirm what it emits in the published document and whether it supports the fields your page type needs. These approaches change where you enter metadata; they do not change the need to inspect the final output.
Open Graph describes metadata for a rich object in a social graph. It does not by itself generate every platform’s specialized card metadata. If your goal includes platform-specific tags as well as Open Graph, treat those as an additional requirement and check the target platform’s current documentation rather than assuming an OG-only generator covers it.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Frequently Asked Questions
Can I use the same Open Graph values on every page of my site?
Use shared defaults only where they accurately describe the page. For pages with distinct titles, canonical URLs or intended images, generate page-specific values.
Does the generator create metadata for every social platform?
No. The sample creates Open Graph properties. Platform-specific metadata is a separate requirement and should be checked against the target platform’s current guidance.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
