Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →An OG image tag generator creates the Open Graph <meta> elements that tell social platforms how to represent a page when its URL is shared. The minimum useful output is a canonical URL, title, object type and absolute image URL:
<meta property='og:title' content='Article title' />
<meta property='og:type' content='website' />
<meta property='og:url' content='https://example.com/article' />
<meta property='og:image' content='https://example.com/og-image.jpg' />Place these tags in the initial document <head>. The Open Graph protocol defines the syntax; a generator simply makes the values easy to enter, validates them and produces copy-ready HTML. See the official Open Graph protocol documentation.
What an OG image tag generator actually creates
Open Graph metadata turns an ordinary web page into a shareable object with a chosen title, description and preview image. The protocol describes this as enabling a web page to become “a rich object in a social graph.” A generator does not create or host the image itself. It outputs metadata that points crawlers to an image you already host.
Use the generated markup in the server-rendered head of the page, not only after client-side JavaScript runs. Use a fully qualified HTTPS image URL so a crawler can request it directly.
#1 Best Overall
The required Open Graph properties
The protocol identifies four required properties. A useful generator should expose each as a separate field and prevent accidental omission.
| Property | What to enter | Example |
|---|---|---|
og:title |
The title shown in a share preview | Article title |
og:type |
The kind of object represented by the URL | website |
og:url |
The permanent, canonical URL for this object | https://example.com/article |
og:image |
An absolute URL to the preview image | https://example.com/og-image.jpg |
og:url is the object’s permanent identifier. If the same page is available at several URLs, enter the canonical one rather than a tracking or session URL.
Optional tags that improve a preview
Add og:description for a short summary and og:site_name for the publication or product name. Image-specific properties provide more context to a consumer that supports them:
og:image:secure_url— an HTTPS version of the image URL.og:image:type— the image MIME type, such asimage/jpegorimage/png.og:image:widthandog:image:height— the pixel dimensions of the file.og:image:alt— concise alternative text. The protocol documentation says that when a page specifiesog:image, it should specifyog:image:altas well.
Related image properties must follow their root og:image declaration. When a property has multiple values, the first tag in source order wins if there is a conflict.
What size should an OG image be?
The Open Graph protocol defines width and height metadata but does not mandate a pixel size. A guide last updated in July 2026 recommends 1200 × 630 pixels (approximately a 1.91:1 ratio) as a practical default for broad compatibility. Treat that as implementation guidance, not a protocol requirement.
| Target or guidance | Suggested dimensions | Qualification |
|---|---|---|
| General default | 1200 × 630 | Practical recommendation from the July 2026 guide |
| LinkedIn guidance | 1200 × 627 | Platform-specific recommendation cited by that guide |
| X large card | 2:1 ratio | A 1.91:1 image may receive slight top or bottom cropping |
Keep important text and logos away from the edges because different platforms can crop the same source image. Check each platform’s current documentation before adopting a precise minimum, file-size limit or format rule; those limits are not established by the protocol itself.
A complete generator output
For most pages, this expanded template is a sensible starting point:
<meta property='og:title' content='Article title' />
<meta property='og:type' content='website' />
<meta property='og:url' content='https://example.com/article' />
<meta property='og:image' content='https://example.com/og-image.jpg' />
<meta property='og:image:secure_url' content='https://example.com/og-image.jpg' />
<meta property='og:image:type' content='image/jpeg' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />
<meta property='og:image:alt' content='Descriptive alternative text' />
<meta property='og:description' content='A concise description of the page.' />
<meta property='og:site_name' content='Example site' />Escape characters correctly when inserting user-entered values into HTML attributes. A production generator should HTML-escape quotation marks, ampersands and angle brackets, trim surrounding whitespace, and reject an og:url or og:image value that is not an absolute URL.
Recommended Free Tools
How to use an OG image tag generator
- Enter the canonical page URL. Use the URL you want search and social systems to identify as the object.
- Write the share title and description. Keep them specific to the page; do not rely on the document title being copied automatically.
- Choose the object type. Use the value appropriate to the page represented by the URL. The basic protocol example uses
website. - Paste an absolute image URL. The file must be reachable without a relative path, login session or browser-only rendering.
- Add image metadata. Include dimensions, MIME type, HTTPS URL and alt text when those values are known.
- Generate and copy the markup. Insert it into the initial
<head>returned for that URL. - Inspect the final HTML. Confirm that the deployed page, rather than a local template, contains the values you entered.
Multiple images and source order
The protocol allows more than one og:image. Put the preferred image first, then place its related width, height, type and alt tags immediately after that root declaration. Repeat the pattern for another image only when you intentionally want a fallback or additional candidate. If two declarations conflict, consumers use the first value in source order, so do not leave an old tag above the newly generated one.
Platform and implementation checks
Use the standard Open Graph names even when your page also contains platform-specific metadata. Before publishing, verify these implementation details:
- The tags are inside the initial HTML
<head>, not injected only after hydration. og:urlis canonical and stable.og:imageis a fully qualified HTTPS URL and returns the intended file.- The declared dimensions match the actual image.
- The image has enough contrast and safe margins for possible cropping.
- There is no duplicate, stale tag earlier in the document.
Preview tools can help you inspect the generated result. OG Preview is an example of a workflow that requests an absolute HTTPS image URL. Platform preview behavior, crawler timing and cache-refresh controls vary, so verify current requirements with the platform where the link will be shared.
Troubleshooting generated tags
The preview shows the wrong image
Inspect the deployed source for duplicate og:image tags. Because the first value wins in a conflict, an older declaration can override the one you just added. Also confirm that the image URL returns the intended file and that the related image properties follow the correct root tag.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesNo image appears
Replace relative, protocol-relative or browser-only URLs with a complete HTTPS URL. Confirm that the image is publicly reachable and that the initial HTML contains the tag before any client-side code executes.
The title or description is outdated
Check the canonical URL and the final server response, then remove duplicate declarations. A platform may retain a previously fetched preview; its own documentation determines how and when that preview can be refreshed.
The image is cropped unexpectedly
Use the 1200 × 630 practical default only as a starting point, keep essential content away from edges, and adapt the source ratio when a platform’s current guidance calls for something different.
Accessibility metadata is missing
Add og:image:alt whenever og:image is present. Keep the text meaningful rather than repeating the filename.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Automating generation safely
A generator can be a form, a build-time script or a CMS field. Whatever the interface, store the canonical URL and image URL separately from display text, escape every value for an HTML attribute, and emit one deterministic block per page. If your templates support multiple images, preserve the user’s order and keep each image’s related properties grouped beneath its root declaration.
For a site with many pages, generate tags during the build or server-rendering step so crawlers receive them in the first response. A browser extension or client-side preview can verify the result, but it should not be the only place the tags exist.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you also need a rendered screenshot of the page or its generated preview, ScreenshotNeo is a website screenshot API and MCP server. It removes cookie-consent banners, newsletter popups and chat widgets before capture; bot checks, blank pages, failed loads, timeouts and cache hits are not billed, and each response identifies the page verdict and billing status.
One GET request returns a PNG, JPEG, WebP or PDF. The full option set includes full-page and selector capture, device and retina settings, dark mode, custom CSS or JavaScript, waits, request blocking, headers, cookies, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks and bulk capture. An MCP server provides take_screenshot, get_page_info and capture_pdf tools to Claude, Cursor and other MCP clients.
See the ScreenshotNeo API documentation for authentication and options.
Best Value
cURL
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpPython
import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://example.com/article'}, timeout=90)
open('shot.webp', 'wb').write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
FAQ
Does the Open Graph protocol require 1200 × 630 pixels?
No. The protocol defines image metadata fields, not a universal pixel size. 1200 × 630 is a practical, third-party recommendation that should be adjusted when a target platform documents a different ratio.
Should I include og:image:alt?
Yes. The protocol documentation says a page specifying og:image should specify og:image:alt; write concise text describing the image.
Free tools Windows power users keep installed
One-click scans. No signup required.
Where can I verify the formal property definitions?
Use the Open Graph protocol site, which is the authoritative reference for the property syntax used by the generator.
Frequently Asked Questions
Can one page have more than one OG image?
Yes. Put the preferred og:image first and keep each image’s related properties directly below its root declaration; the first value wins when declarations conflict.
Is an OG generator also an image-hosting service?
No. It produces HTML metadata. You must host the image at a publicly reachable, fully qualified URL.
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.
