The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To generate an Open Graph (OG) image, create a public image file or render one from page data, then reference its absolute URL with og:image in the document head. Add the other core Open Graph properties—og:title, og:type, and og:url—and verify the deployed HTML and image URL before sharing. A static file is simplest for a few stable pages; a generated route is better when every article, product, or author needs its own card.
What an Open Graph image does
The Open Graph Protocol lets a web page become a rich object in a social graph. An OG image is the visual asset a destination may use when someone shares your URL. It is connected through metadata in the page’s <head>; it is not automatically the same as the visible hero image. You can deliberately use the same file, but the two serve different purposes and can be maintained independently.
The protocol defines four basic properties:
og:title— the title of the shared object.og:type— the object type, such as an article.og:image— an absolute URL to the image.og:url— the canonical URL for the object.
og:description is optional but generally recommended. The protocol also defines structured image properties for a secure URL, MIME type, width, height, and alternative text. Alt text describes the image; it is not a caption printed on the card.
Choose a static file or a generated image route
Static images for stable pages
Design and export one image when a site has a small number of landing pages, a consistent brand card, or content that rarely changes. Put the file in your public asset storage, make sure it is reachable over HTTPS, and point og:image at its absolute URL. Updating the artwork is a design and deployment task, but the rendering path is easy to inspect.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Generated images for data-driven pages
Generate an image from page data when titles, products, authors, prices, or categories vary by URL. A template can produce a card for each route while keeping typography and branding consistent. This requires an image-rendering implementation and a caching strategy, but avoids manually exporting hundreds of files.
| Decision | Static file | Generated route |
|---|---|---|
| Best fit | Few stable pages or one reusable campaign image | Many pages with changing data |
| Maintenance | Design and replace files manually | Maintain template, data mapping, and rendering code |
| Control | Pixel-level manual art direction | Repeatable output for every route |
| Operational concerns | Asset hosting and cache invalidation | Rendering, supported CSS, deployment, and cache behavior |
Compose an image that survives card cropping
Use the page’s recognizable title or subject, strong contrast, and type that remains legible at thumbnail size. Keep critical text and logos away from the edges: receiving clients can resize or crop cards differently. Limit decorative elements so the title remains the first thing a reader can identify. Preview the design at a small size before publishing.
Next.js documentation uses 1200 × 630 pixels as an example for generated Open Graph images. Treat that as a practical framework example, not a universal requirement for every social network, messaging app, or card format. Check the current documentation for each destination you care about.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11For Next.js file conventions, the documented ceilings are 8 MB for opengraph-image and 5 MB for twitter-image. Those are framework file limits, not a claim that every receiving platform accepts those sizes. PNG, JPG, JPEG, and GIF are supported by the convention described in the Next.js documentation.
Add the metadata to your page
Place the following in the rendered document head, replacing the values with data for the page being shared:
<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:description" content="A concise description of the page.">
<meta property="og:image:alt" content="Description of the image">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Choose an og:type that reflects the page and use the canonical URL in og:url. Include image type and dimensions when known. Keep the image URL absolute and publicly reachable; a relative path or a URL that only works inside your development network cannot be fetched by a card crawler.
Implement Open Graph images in Next.js App Router
Use a static file convention
For a static asset, place opengraph-image.jpg, opengraph-image.jpeg, opengraph-image.png, or opengraph-image.gif in the relevant route segment. Next.js evaluates the convention and adds the corresponding metadata tags. Add opengraph-image.alt.txt beside it when you need explicit image alternative text.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
For example, a route at app/articles/[slug]/ can contain:
app/
└── articles/
└── [slug]/
├── page.tsx
├── opengraph-image.png
└── opengraph-image.alt.txtThe static file is appropriate when every page in that segment can share one approved card. If each slug needs different text, use a generated route instead.
Generate a route with ImageResponse
Create opengraph-image.tsx in the route segment and return an ImageResponse from next/og. Next.js documents exporting alt, size, and contentType, then rendering JSX-like content into a PNG. Route parameters can supply a title or other page data.
import { ImageResponse } from 'next/og'
export const alt = 'Article share image'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const title = await getTitleForSlug(slug)
return new ImageResponse(
(
<div
style={{
background: '#101827',
color: 'white',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '72px',
fontSize: 64,
}}
>
<div>{title}</div>
</div>
),
{ ...size },
)
}Replace getTitleForSlug with your own data lookup. Keep the implementation within the CSS subset supported by ImageResponse: flexbox and supported properties are documented, while advanced layouts such as CSS Grid are outside that documented subset. Check the current ImageResponse API reference for version-specific details.
Next.js states that generated images are statically optimized and cached by default unless you use dynamic APIs or uncached data. That default can make repeated previews inexpensive, but it also means a changed title or template may remain cached until the relevant route is rebuilt or its cache is invalidated according to your deployment setup.
Publish, inspect, and test the actual URL
- Deploy the page and generated or static image route.
- View the deployed page source or rendered HTML and confirm that the intended
og:title,og:url, andog:imageappear in the head. - Open the exact image URL directly. Confirm it returns an image rather than an error page, login screen, redirect loop, or development-only hostname.
- Check that the image’s MIME type, dimensions, and alternative text match your metadata.
- Paste the production URL into the target social network or messaging client. Use that platform’s current preview/debugging or re-scrape feature when available.
- After changing metadata, test the shared URL again. Recipients can display cached metadata, so a previously fetched card may not change immediately.
The protocol and framework documentation do not establish one universal crawler policy or cache lifetime. Treat each destination’s current documentation and debugging tool as authoritative for its own behavior.
Why isn’t my link preview showing the right image?
The image is missing entirely
- Inspect deployed HTML, not only the template source, for a correctly rendered
og:imagetag. - Verify the value is an absolute HTTPS URL and that the image route is publicly accessible.
- Open the URL directly and check for authentication, a 404, a redirect loop, or an HTML response.
- For Next.js, confirm the
opengraph-imagefile is in the route segment you are sharing, or thatopengraph-image.tsxbuilds and responds successfully.
An old image is still shown
Inspect the current head and image first, then use the destination’s re-scrape or debugger feature. A client may have cached the earlier metadata or asset; the exact expiry and refresh controls vary by platform.
The wrong page’s image appears
Check that og:url identifies the canonical page you intend to share and that route-specific generation is receiving the correct parameters. A shared URL, canonical URL, title, and generated image should all describe the same page.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →The generated route fails after deployment
Request the image URL directly in production and read the deployment logs. Look for unavailable data at build time, unsupported styling, missing fonts or assets, and dynamic code that your hosting environment cannot execute. Reduce the template to supported flexbox-based styling, then add data and decoration incrementally.
The card is cropped or text is unreadable
Reduce the amount of text, increase contrast, and move critical content inward from the edges. Preview at thumbnail size. Do not assume that a 1200 × 630 canvas will be displayed without cropping on every destination.
Performance, reliability, and cost considerations
Static files have no per-request rendering step, so their main operational concerns are delivery, invalidation, and keeping the asset synchronized with the page. Generated routes centralize design and can produce unique cards, but rendering and data access become part of the preview request. Let Next.js cache generated output where appropriate, avoid uncached data unless the image truly must be live, and keep the template small.
There is no source-supported universal benchmark for preview speed, crawler success, or conversion rate. Measure your own deployed routes with the destinations that matter to your audience. Record the URL, deployment version, image response, and resulting preview when diagnosing regressions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Or skip the browser setup
If you also need a reliable screenshot of the rendered page—for QA, documentation, or a card workflow—ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or PDF. Before capture it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. 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.
One request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for all options. The same endpoint supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper settings and page ranges, HTML/CSS-to-image, custom JavaScript and CSS, pre-capture clicks, hidden selectors, waits for selectors, delays or network idle, blocking ads/trackers/requests/resource types, custom headers/cookies/user agents/Authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed public image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and compatible parameter names used by other screenshot APIs.
For a script, the documented request patterns are:
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)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also exposes MCP tools named take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
Rank #4
FAQ
Is an OG image required for every page?
No. Pages can still be shared without one, but the destination may choose an unsuitable image or no image. Add one when the shared presentation matters.
Recommended Free Tools
Can I use the visible hero image as og:image?
Yes, if it is publicly available and represents the page, but the metadata image remains a separate choice. A dedicated card often gives you better control over text and cropping.
Does og:image:alt put a caption on the card?
No. It supplies a description of the image for consumers that use the structured metadata; it is not visible caption text.
Should every generated image be dynamic?
No. If the content is stable, a static asset is simpler. Generate images when route-specific data justifies the added rendering and cache complexity.
Frequently Asked Questions
How do I create an Open Graph image for my website?
Create a static or generated image, host it at a public absolute URL, add that URL as og:image in the page head, and include og:title, og:type, and og:url. Then inspect the deployed HTML and test the real shared URL.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsWhy isn’t my link preview showing the right image?
Check the deployed metadata, open the image URL directly, verify route placement and production generation, and use the destination platform’s debugger or re-scrape control. Previously fetched metadata may be cached.
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.
