Use a landscape master image around 1200 × 630 pixels, publish it at a public HTTPS URL, and reference that file with og:image. Open Graph does not define a template-file format. A template is your repeatable design; the generated PNG, JPEG or WebP is the asset that crawlers download; Open Graph tags tell platforms which asset and page details to show.
This guide explains the dimensions, layout, metadata, automation, platform differences and fixes for missing previews.
What an Open Graph image template actually is
Open Graph (OG) is a metadata protocol. The protocol’s required properties are og:title, og:type, og:image and og:url. Your template is a visual system—background, typography, logo placement and safe margins—that you reuse to produce the image referenced by og:image.
The protocol documentation describes developer simplicity as a key goal. It does not require a particular design application, file extension or canvas size. Generate an ordinary image file, host it, and expose its URL in the page head.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Keep the three layers separate
- Template: the editable design or code used to create consistent artwork.
- Generated asset: the rendered PNG, JPEG or WebP at a stable, publicly fetchable URL.
- Metadata: HTML properties that associate the page and image.
Choose a practical canvas and export settings
A 1200 × 630 pixel landscape canvas is a practical cross-platform starting convention. It is close to LinkedIn’s recommended 1.91:1 ratio, but it is not a universal mandate. LinkedIn’s cited sharing guidance requires at least 1200 × 627 pixels, recommends 1.91:1, and limits the image file to 5 MB for organic sharing. Images narrower than 401 pixels may be shown as thumbnails.
| Decision | Practical choice | Qualification |
|---|---|---|
| Master dimensions | 1200 × 630 px | Common convention, not an Open Graph protocol requirement. |
| LinkedIn minimum | 1200 × 627 px | From LinkedIn’s cited help guidance; re-check because that page was last updated two years before this article’s research date. |
| Aspect ratio | Approximately 1.91:1 | LinkedIn’s recommendation; other services can crop differently. |
| File size | Keep comfortably below 5 MB | 5 MB is the cited LinkedIn organic-sharing maximum. |
| Format | PNG, JPEG or WebP | Choose the format your target crawlers and publishing stack reliably serve. |
Design a safe area
- Use one clear title or subject instead of a paragraph of copy.
- Keep logos and essential text well inside every edge; previews can be cropped or reduced.
- Create strong foreground/background contrast and test at thumbnail size.
- Use a consistent brand mark, color system and type scale so a reader recognizes related pages.
- Prepare a variant when a target platform’s card shape materially differs from your master.
These are design recommendations, not measured engagement guarantees. No cited source establishes an engagement lift from a particular template or dimension.
Build a reusable template
Option 1: design-tool workflow
- Create a 1200 × 630 px artboard (or a 1200 × 627 px variant when LinkedIn’s minimum is your hard constraint).
- Add background, logo and a title placeholder inside a generous internal margin.
- Define text styles for short and long titles, then set an overflow rule: wrap to a fixed number of lines, reduce size within limits, or substitute a shorter editorial title.
- Export each page’s final image with a deterministic filename such as
/images/og/articles/my-slug.webp. - Publish the image before the HTML page or deploy both atomically so crawlers never receive a missing file.
Option 2: HTML/CSS as the source template
A browser-rendered template is convenient for data-driven pages. The following minimal document gives you a 1200 × 630 composition; your renderer can replace the title and brand values before capturing it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body{margin:0;width:1200px;height:630px}
body{font-family:Arial,sans-serif;background:#101827;color:#fff}
.card{box-sizing:border-box;width:100%;height:100%;padding:72px;display:flex;flex-direction:column;justify-content:space-between}
h1{font-size:64px;line-height:1.08;max-width:1000px;margin:0}
.brand{font-size:26px;font-weight:700;letter-spacing:.04em}
</style>
</head>
<body>
<main class="card">
<div class="brand">Example site</div>
<h1>Your page title goes here</h1>
</main>
</body>
</html>Whatever tool renders this page, verify that fonts are available in the rendering environment, external assets load over HTTPS, and the resulting encoded file has the intended dimensions.
Windows 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 reinstallOutdated 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 matchAdd the metadata to every shareable page
Place these properties in the document’s <head>. Replace every example value, and ensure the image URL is absolute.
<meta property="og:title" content="Page title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/images/page-share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="A concise description of the image">
<meta property="og:description" content="A short page description">Required versus useful properties
The protocol identifies og:title, og:type, og:image and og:url as required. Width, height, MIME type, secure URL and alt text are structured image metadata that helps consumers interpret the asset. Description is useful page metadata but is not one of those four required properties.
og:image:alt should describe what is visibly in the image; it is not a caption or a keyword list. Use article for an article page and keep og:url as the canonical URL you want associated with the share.
Do you need Twitter Card tags?
For pages intended to render a large card on X, the cited vendor guidance recommends:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #3
- Used Book in Good Condition
<meta name="twitter:card" content="summary_large_image">That guidance also reports that X can fall back to some Open Graph values. X’s behavior and documentation can change, so treat this as a compatibility measure and verify the current card inspector behavior before relying on it. Keep the Open Graph tags even when you add Twitter Card tags; they serve other consumers as well.
Platform differences that affect your template
| Platform | What to account for |
|---|---|
| Uses standard Open Graph fields. Cited guidance specifies at least 1200 × 627 px, 1.91:1 recommended, 5 MB maximum, and thumbnail treatment below 401 px wide. A blocked image or protected directory can prevent a preview. | |
| The vendor guide reports that it reads core Open Graph tags. Cropping and cache refresh should be checked with its current sharing debugger. | |
| X | Use twitter:card; the vendor guide reports Open Graph fallbacks for some fields. Confirm current behavior in X’s tools. |
| Discord | The vendor guide reports use of common Open Graph fields plus og:site_name and theme-color. |
This is a practical map from vendor documentation, not a standards-body rulebook. Preview dimensions, fetch policies and cache lifetimes can change.
Automate image generation and publishing
For a small site, export images manually. For a CMS or large catalogue, render from front-matter data (title, category, author and theme) and write the asset URL into the page template. Use stable URLs when possible; if you replace an image at the same URL, expect platforms to keep an older copy until their cache refreshes.
Using a screenshot renderer
A browser renderer should set the viewport to 1200 × 630, wait for fonts and images, and save a PNG, JPEG or WebP. Hide interactive elements, disable animations, and use a deterministic seed for any decorative art. Validate the output dimensions and encoded byte size in CI before deployment.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can render a URL as PNG, JPEG, WebP or PDF, which is useful when your Open Graph artwork is a rendered HTML template. It can accept cookie banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP tools—take_screenshot, get_page_info and capture_pdf—let Claude, Cursor or another MCP client perform captures.
For a rendered template URL, call the API as shown in the ScreenshotNeo documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);You can set full-page capture, a CSS selector, dark mode, device or viewport, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agent, timezone, geolocation, transparency, resizing, a chosen cache TTL, signed links, asynchronous webhooks and bulk capture (up to 100 URLs per call). The service also exposes usage data and an OpenAPI specification, and accepts parameter names used by other screenshot APIs. For OG work, confirm the returned image dimensions and keep the generated file below your target platform’s limit.
Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try the workflow.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Why a preview is missing: a systematic checklist
- Inspect the final HTML. View source or fetch the deployed page and confirm the intended
og:image, title, type and URL are present once and point to the right page. - Open the image URL directly. It must resolve over HTTPS without a login, hotlink token that has expired, robots restriction or IP allow-list.
- Check bytes and dimensions. Confirm the encoded file is valid, meets the target’s minimum dimensions and stays under the applicable size limit.
- Check crawler access. LinkedIn specifically warns that blocked images and protected directories can stop an otherwise compliant preview.
- Use the platform inspector. Submit the URL to the current debugger or preview tool to request a fresh fetch; a changed image may remain cached.
- Test both mobile and desktop. Look for crop, unreadable type, missing fonts and overlays that cover the subject.
Common symptoms and fixes
- Old image: the platform cache has not expired. Keep the URL stable when appropriate, use the platform’s refresh tool, or publish a versioned filename when you intentionally need a new asset.
- No image, correct tags: test the asset URL without cookies and from an external network; remove authentication and server rules that reject crawler requests.
- Thumbnail instead of a large card: check width, aspect ratio and the platform’s card declaration; LinkedIn’s cited guidance says under 401 px wide is thumbnail territory.
- Wrong page image: remove duplicate or stale tags generated by a theme, plugin or CMS and ensure the canonical page template supplies one authoritative set.
- Text clipped: enlarge safe margins, shorten the title or render a title-specific variant rather than shrinking type until it is illegible.
Performance, reliability and cost considerations
- Pre-render at publish time for stable, fast responses; render on demand only when content changes frequently.
- Serve images from a cacheable HTTPS origin and monitor 4xx/5xx responses.
- Keep source templates and generated files versioned so a design change can be rolled back.
- Generate one master plus platform-specific variants when cropping cannot preserve the subject.
- Do not infer engagement results from dimensions; the available specifications describe technical compatibility, not conversion performance.
- Re-check platform limits and cache behavior before launch. The cited vendor guide reports that LinkedIn caching can last up to seven days, but volatile platform behavior should be verified at publication time.
FAQ
Is an OG template the same as an OG image?
No. The template is the reusable design; the OG image is the rendered file whose URL appears in og:image.
Can I use a transparent PNG?
Only if every target platform renders transparency acceptably. A solid background is safer for predictable previews.
Should every page have a unique image?
Unique images improve page identification, but a controlled fallback image is preferable to a broken or inaccessible URL when production time is limited.
Do query-string image URLs work?
They can, provided the complete URL is public, stable and returns the image to unauthenticated crawler requests. Test the exact URL rather than assuming your browser session represents a crawler.
Recommended Free Tools
The Bottom Line
A dependable Open Graph workflow is: render a readable landscape asset, publish it at a public HTTPS URL, add the four core Open Graph properties plus useful image metadata, include a current X card declaration when needed, and validate each target platform’s cache and crop behavior.
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.
