How to Use an AI Agent to Create Social Preview Images from Web Pages

An AI agent can help create a social preview image by inspecting a page, collecting its real title and subject, generating or rendering an image, and wiring the result into the page’s Open Graph metadata. The finished image must live at a public, stable URL, and the deployed page must point to that exact URL. Creating an image file locally does not guarantee that a social platform can retrieve or display it.

For a reliable workflow, give the agent the public page URL and the target platform, ask it to inspect the page and existing metadata, choose between generated artwork and a repeatable template, export a suitable image, update the page tags, and check the actual public preview. Platform-specific dimensions and limits can differ, so confirm current requirements for the platform you care about.

1. What the agent needs to create

A social preview image is the image a platform may show when someone shares a page. Open Graph is a common way to provide that information. Its specification defines four required properties for a page: og:title, og:type, og:image, and og:url. The image property is the URL of the image representing the page in the graph. The protocol also defines optional image properties such as MIME type, width, height, an HTTPS alternate URL, and alternative text. See the Open Graph protocol specification.

LinkedIn’s shareability guidance shows og:title, og:image, og:description, and og:url. It gives a maximum file size of 5 MB, minimum dimensions of 1200 × 627 pixels, and a recommended 1.91:1 ratio for its sharing module. Its help page also says images narrower than 401 pixels display as thumbnails and notes that protected or blocked image URLs can prevent retrieval. The page reports that it was last updated two years before the October 2026 research date, so check LinkedIn’s current guidance before relying on these limits. See LinkedIn’s shareability guidance.

There is no single image size that every social service will display identically. Ask the agent to target the platform you intend to support, keep important content away from the edges in case of cropping, and check the final preview. A wide composition is a practical starting point for many link cards, but it is not a guarantee of acceptance or identical display.

2. Give the agent page context

Start with the page’s subject, not just its URL. Ask the agent to inspect the public page and report its title, description, headings, existing Open Graph and Twitter metadata, and the strongest visual subject. Ask it to use a screenshot or extracted page content when useful. Then have it propose an image concept that accurately represents the page.

For example, OpenGraph.io documents an MCP workflow with tools for retrieving metadata and page content, taking screenshots, generating images, iterating, inspecting generation sessions, and exporting assets. Its image generator describes using URL metadata, extracted content, and screenshots as context, with 16:9, 1:1, 9:16, and 4:1 scenarios. Those are the vendor’s described options, not a promise that a platform accepts any particular ratio. See the OpenGraph.io documentation.

Inspect this public page: https://example.com/guides/page-topic

Report:
- The page's actual title, description, and main subject
- Its main headings and intended audience
- Existing og:title, og:description, og:type, og:url, og:image,
  twitter:card, twitter:title, twitter:description, and twitter:image values
- Whether the current image URL is publicly reachable
- One accurate social-card concept that fits the target platform

Do not infer the page content from its URL alone. If available, use the
rendered page or a screenshot as context. Do not invent claims about the
page. Identify any facts or brand assets that need human approval.

Use a real, public page URL. If the page requires authentication, blocks the agent’s retrieval method, or has little rendered content, provide the relevant page text or a screenshot through an authorized method. Do not ask the agent to reproduce a brand logo or use brand assets unless you have permission to use them.

3. Choose an image creation route

Route	Good fit	Trade-offs to check
Prompt-based image generation	Original illustration or a visual that should not look like a standard template	Check brand consistency, editability, repeatability, and the amount of human review needed. Generated results are not guaranteed to be legible or on-brand.
Code-generated canvas	Repeatable cards with exact typography and structured fields, especially when assets belong in a repository	Check design flexibility, template maintenance, and how reliably the agent maps page fields into layers.
HTML rendered to an image	Data-driven layouts or cards built with familiar web design techniques	Check browser setup, font availability, rendering differences, and how the output is integrated into the site.

OSIG describes a deterministic typed canvas built from text, image, and rectangle layers, with PNG or JPEG export into a repository or publishing workflow. AgenticFlow documents rendering HTML into a static image in a headless browser, including Open Graph and quote-card use cases. These descriptions explain the approaches; they are not comparative benchmarks. See OSIG and AgenticFlow’s HTML-to-image documentation.

For a generated illustration, have the agent produce one clear subject, a short accurate message if text is needed, a wide composition with safe margins, and the requested dimensions and file format. Review small-size readability and cropping rather than assuming the image model has handled those details.

For a template, pass structured values such as the page title, short description, selected image, and brand colors into named layers. Keep the text separate from the background artwork where possible so the agent can revise copy without regenerating the illustration. For HTML rendering, ensure the required fonts and images load before capture and that the page is rendered at the intended output size.

4. Ask the agent to create and export the asset

Have the agent save the final image into your site’s existing asset pipeline, or use a service that gives you a public image URL. Ask for the exact pixel dimensions, format, file size, and final path or URL. Check that the image actually exists, opens without a login, and is served with the correct image content type.

Create a social preview image for the page using the verified page context.

Requirements:
- Target platform: [platform]
- Target dimensions and file-size limit: confirm against its current guidance
- Keep the important subject and any text inside a safe central area
- Use only approved brand assets and accurate page claims
- Export as [PNG or JPEG] at the requested dimensions
- Save it in the site's existing public asset pipeline
- Report the final path, public URL, dimensions, format, and file size
- Do not update metadata until the asset is present and publicly reachable

Keep the image URL stable after publication. If you replace the image but keep the same URL, a platform may still show a previously fetched preview; use that platform’s preview or refresh mechanism when available. A generated file in a local build directory is not enough if the deployed image path differs.

5. Add Open Graph metadata

Place the tags in the page’s HTML head and use absolute public URLs. The values below are placeholders: replace them with the page’s real title, description, canonical URL, and deployed image URL. The image dimensions should describe the actual exported file.

<meta property="og:title" content="A clear title for this page">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/page-topic">
<meta property="og:image" content="https://example.com/assets/page-topic-card.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="A concise description of the preview image">
<meta property="og:description" content="A short, accurate summary of the page.">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A clear title for this page">
<meta name="twitter:description" content="A short, accurate summary of the page.">
<meta name="twitter:image" content="https://example.com/assets/page-topic-card.jpg">

Open Graph specifies the four required properties named above; the other tags shown provide description, image details, and a Twitter card declaration. Match the MIME type and dimensions to the real file. Do not publish a tag that points to a local path, a temporary preview URL, or a protected resource.

Ask the agent to inspect the rendered HTML after deployment, not only the source template. Frameworks can generate metadata in different places, and the deployed page is what a crawler attempts to fetch.

6. Verify the deployed share preview

1. Deploy the page and image to their final public URLs.
2. Open the page source or request the page as an unauthenticated visitor. Confirm the metadata values are present and point to the intended image.
3. Open the image URL directly in a private browser session. Confirm it returns the image without a login, redirect to an error page, or access-denied response.
4. Check the target platform’s current preview or audit tool. OpenGraph.io documents a link-preview check and social-site audits alongside its agent tools; use the relevant platform’s own checker when available.
5. Inspect the preview for correct title and image, readability at small size, and unexpected cropping. Recheck after any change to the image URL or metadata.

LinkedIn’s guidance specifically warns that a protected image directory or a site blocking its crawler can prevent image retrieval. If a preview tool cannot fetch the image, test the public image URL and your site’s access rules before changing the design.

7. Use ScreenshotNeo to inspect the rendered page

If the agent needs a rendered screenshot as page context, ScreenshotNeo is a website screenshot API and MCP server for developers. It can return a screenshot or PDF from one GET request, and its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients such as Claude and Cursor. A screenshot helps an agent inspect the page’s visible subject and layout; it does not replace checking metadata or the deployed social preview.

These examples capture the page as WebP. See the ScreenshotNeo API documentation for its request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/page-topic -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/page-topic"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/guides/page-topic'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Replace YOUR_API_KEY with your key and the example URL with the page to inspect. Keep the key in a server-side environment variable or a secret store; do not expose it in client-side page code or commit it to a public repository. The API also supports full-page capture, CSS selectors, device presets and custom viewports, retina scale, dark mode, custom CSS and JavaScript, waits, request blocking, headers and cookies, and other capture options documented in its API reference.

8. Or skip the browser setup

Use ScreenshotNeo when you want an agent or script to retrieve a page screenshot with one request instead of managing browser capture. Before the shot, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/page-topic -o shot.webp

Python and Node.js examples are in the previous section, and the API documentation covers the available capture options. Sign up for 1,000 free screenshots a month with no card.

9. Troubleshooting

Symptom	Likely cause	What to do
The preview has no image	The image URL is private, blocked, malformed, or points to a missing file; the crawler may also be blocked by site rules.	Open the exact image URL without authentication, check the deployed HTML for the absolute URL, and review access rules for the platform crawler.
The old image still appears	The platform may be showing a previously fetched preview, or the deployed metadata still references an old URL.	Verify the live HTML and image URL, then use the target platform’s preview refresh or audit tool if available.
The image is cropped or text is clipped	The platform uses a different crop or display size than the design anticipated.	Move essential content toward the center, simplify the composition, and inspect the target platform’s rendered preview.
The card uses the wrong title or description	Metadata is missing, duplicated, stale, or generated from a different page template.	Inspect the deployed page head, remove conflicting values, and set metadata from the page’s verified content.
The image looks soft or too small	The exported asset may be undersized or rendered at a different size than its metadata declares.	Check the actual pixel dimensions and export again for the platform’s current guidance. Ensure width and height tags describe the exported file.
The HTML card has missing fonts or images	Resources were unavailable or had not loaded when the headless browser rendered the template.	Make assets accessible to the renderer, wait for required resources, and confirm the intended fonts are available in its environment.
The agent proposes inaccurate image text	It inferred details instead of using the page’s actual content.	Provide the page title and verified summary, ask it to remove unsupported claims, and review all text before publishing.
The screenshot request returns an unexpected result	The page may show a bot check, be blank, time out, or fail to load; capture settings may also target the wrong viewport or selector.	Check the response’s X-Page-Verdict and X-Billed headers, confirm the URL, and adjust waits or capture settings as needed.

10. Performance, reliability, and cost

Keep the workflow bounded: retrieve only the page information the design needs, render the card at its final target size, and avoid repeated image generation when only metadata has changed. Template rendering can make repeated cards consistent, while prompt-based generation offers more visual variety; the sources do not establish a universal speed or quality winner.

For reliability, keep the final image at a stable public URL, confirm the crawler can fetch it, and verify the metadata in the deployed page. Preserve the source asset and the inputs used to generate a card so you can update it later. If the image is generated or rendered in a build pipeline, make asset publication complete before publishing metadata that refers to it.

Cost depends on the image-generation or rendering service and the workflow you choose; the reviewed sources do not provide a comparable cost benchmark for these routes. ScreenshotNeo pricing is Free for 1,000 shots a month with no card, Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. Only clean shots are billed; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed.

11. Pre-publish checklist

• The image accurately represents the page and its claims.
• The image’s rights are cleared, and brand assets are used with permission.
• Text remains readable at small preview size and important details survive likely crops.
• Dimensions and file size match the target platform’s current guidance.
• The image URL is public, stable, and returns the intended image.
• The deployed page’s Open Graph values point to the final title, canonical URL, and image.
• The target platform’s preview or audit tool shows the expected result.

12. FAQ

Should an AI agent generate the whole card or just the artwork?

Use generation for original artwork when visual variety matters. Use a code or HTML template when the same layout must be populated repeatedly with precise, editable text.

Can a social image be hosted behind a login?

It needs to be reachable by the platform crawler. A protected image URL can prevent retrieval even if it works for a signed-in editor.

Does adding Open Graph tags guarantee a preview will look the same everywhere?

No. Platforms may display different crops and have different requirements. Check the target platform’s current documentation and preview after deployment.

Can a screenshot prove that the social card metadata is correct?

No. A screenshot shows rendered page content. Inspect the deployed HTML metadata and the platform’s actual share preview as separate checks.