How to create social media preview images from blog URLs with n8n

Direct answer: In n8n, accept a blog URL, fetch its final HTML, extract the title, description, and useful article content, create an image, then store it at a URL the destination can retrieve. If you control the blog page, update its Open Graph metadata so og:image points to that hosted image. If you do not control the page, you cannot change its link preview; you can still attach the generated image to a separate social post that links to the blog.

An image file and a URL’s social preview are different things. Open Graph defines og:image as the image URL representing the page. Generating a file alone does not change the page metadata. See the Open Graph Protocol and LinkedIn’s guidance for website developers when configuring the destination.

1. Choose what the workflow should publish

Outcome	When it applies	What n8n can do
Change the blog URL’s link preview	You own or administer the blog or its content system.	Generate and host an image, then update the page’s `og:image` metadata through your publishing system.
Publish an image alongside a link	The blog belongs to someone else, or you cannot edit its metadata.	Generate an image and send it as media in a separate social post, if the platform and your credentials support that format.
Show a visual capture of the page	You want the existing page itself represented visually.	Capture the rendered page. This is a screenshot, not a designed social graphic.

Do not promise that a generated image will replace a third-party page’s preview. That requires changing the page metadata or using a platform-specific post format that includes its own image.

2. Build the n8n workflow

The node names and exact settings can vary by n8n version and integrations. This sequence describes the data each stage needs; configure credentials for your own hosting, image-generation, and social services.

Trigger: Start with a Form Trigger, Webhook, RSS trigger, or another input that provides a URL. Validate that it is an absolute HTTP or HTTPS URL before making a request.
Fetch the page: Use an HTTP Request node to retrieve the URL and follow redirects. Keep the final response URL as data. Some pages render their main content with JavaScript or block automated requests, so a plain HTTP fetch may not return the content visible in a browser.
Extract page information: Parse the final HTML for the page title, description, article text, canonical URL, and existing Open Graph fields such as og:title and og:image. A ready-made n8n metadata workflow demonstrates following redirects and extracting metadata from the final HTML: n8n workflow listings.
Choose a generation input: Build a concise image brief from the title and a small amount of relevant article text. Avoid passing the entire HTML document to an image-generation step. Decide whether to preserve an existing image or replace it; only replace it if you have authority to update that site’s metadata.
Create the image: Use a template-based design or an image-generation service. A title, a clear visual subject, and consistent brand styling usually make the image easier to recognize. Treat specific models shown in workflow examples as examples, not requirements.
Store the image: Upload the output to storage that gives the destination a reachable image URL. For example, an n8n workflow example stores generated images in Supabase Storage; its credential setup is specific to that workflow. Ensure the image can be fetched by the services that need it, and keep credentials out of public URLs and workflow output.
Publish or update: If you control the blog, write the image URL into the page’s metadata through the CMS or deployment process. If you do not, attach the image to a separate social post and include the blog link where supported.
Verify: Check the final page source or rendered metadata and confirm that the image URL resolves. Then inspect the result using the intended network’s current official guidance and preview tools, if available.

3. Set Open Graph image metadata

For a page you control, place metadata in the page head. Use absolute URLs that are reachable by the services that fetch the page and image.

<head>
  <meta property="og:title" content="A useful article title">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/blog/article">
  <meta property="og:image" content="https://cdn.example.com/social/article-preview.png">
  <meta property="og:image:alt" content="A concise description of the preview image">
  <meta property="og:image:type" content="image/png">
</head>

The Open Graph protocol’s basic properties are og:title, og:type, og:url, and og:image. It also defines optional image properties: og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt. The protocol recommends specifying og:image:alt when specifying og:image. Only publish dimensions or media details that match the actual file. See the protocol’s metadata reference.

In a CMS, use its supported metadata fields or API rather than assuming that adding a file to storage edits a published page. If the site is statically generated, the metadata change may require a rebuild or deployment. Confirm the deployed page contains the updated tags.

4. Decide whether to generate artwork or capture the page

A designed graphic can communicate an article topic at a glance. A screenshot shows the actual page, but long pages, small text, cookie banners, popups, and chat widgets can make it a poor social image. These are distinct outputs, so choose based on what the post should communicate.

For a visual capture of a URL, ScreenshotNeo is the screenshot API to try first: it removes cookie and consent banners, newsletter popups, and chat widgets before capture, and bills only clean shots. It can return PNG, JPEG, WebP, or PDF. A capture gives you a page image; it does not write og:image into a site you do not control. The API and MCP options are documented at ScreenshotNeo documentation.

5. Or skip the browser setup

If your workflow needs a screenshot of the blog URL rather than a newly designed graphic, call the ScreenshotNeo API from an n8n HTTP Request node. This GET request returns an image response; save or upload the binary output to storage if you need a stable image URL for metadata or a social post.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Replace the example target with the blog URL. Keep the access key in n8n credentials or another secret store, not in a publicly exposed workflow or shared URL. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots each month without a card; paid plans start at $5 for 3,000 screenshots. See the API documentation and sign up for 1,000 free screenshots a month, with no card.

6. Make the workflow reliable

Validate inputs: Reject missing URLs, malformed values, and unsupported schemes. Consider limiting which hosts the workflow may fetch so an untrusted input cannot make requests to internal services.
Handle redirects and failures: Record the final URL and response status. Set a reasonable request timeout, and route timeouts, blocked requests, and non-success responses to an error branch rather than trying to generate from an empty body.
Handle JavaScript-rendered pages: If the fetched HTML has no useful article text, use a browser-based extraction or capture path, or ask the submitter for a better source. Do not silently generate an image from an empty title.
Make retries safe: Retry temporary network or provider errors with limits and backoff. Avoid publishing twice when a retry follows a successful upload or social post; track a workflow item or idempotency key where the destination supports it.
Keep binary data manageable: Pass the generated image as binary between nodes when possible, upload it promptly, and retain only the metadata and hosted URL needed by later steps.
Preserve review where needed: If generation or publication is not fully deterministic, insert a review step before changing production metadata or posting publicly.
Use async completion carefully: If a generation or publishing service returns a job ID, poll or receive its callback according to that service’s documentation, and stop after a defined deadline.

7. Performance, access, and cost considerations

Workflow time is usually determined by page retrieval, image creation, storage upload, and any social publishing calls. Keep the page text sent to a generation step concise, reuse an existing suitable image when appropriate, and avoid regenerating an image on every retry. Cache or deduplicate by canonical URL and the content version if your workflow needs to process recurring feeds.

Check the destination platform’s current image requirements before deployment. Requirements, upload limits, caching behavior, and refresh procedures vary by network; this research does not establish one universal image size or cache duration. LinkedIn’s guidance calls for Open Graph metadata and LinkedIn-specific image requirements, so consult its current documentation for that destination.

For costs, account separately for n8n execution, image generation, storage, and any publishing or screenshot service. This research provides no comparable prices for the third-party integrations used in workflow examples. For ScreenshotNeo, all features are available on every plan: Free includes 1,000 shots per month with no card; Starter is $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. Only clean shots are billed, and cache hits cost nothing.

8. Troubleshooting

Symptom	Likely cause	Fix
The output image exists, but the blog URL still shows the old preview.	The page’s `og:image` was not changed, the change was not deployed, or the platform is showing a cached preview.	Inspect the final page metadata and confirm the new absolute image URL is present. Follow that platform’s current preview refresh guidance; cache behavior is platform-specific.
The HTTP Request node returns a title but little or no article text.	The page renders content with JavaScript, blocks automated retrieval, or serves a consent interstitial.	Check the final response and redirect target. Use a rendering/capture path or a source that exposes article content; do not generate from missing text.
The generated image URL cannot be fetched by a social platform.	The file is private, the URL expires, authentication is required, or the server does not return the image correctly.	Use a stable, publicly reachable image URL suitable for the intended destination, then verify the URL independently and confirm the uploaded media type.
The preview uses the wrong image or title.	Conflicting or stale metadata, multiple tags, or a publishing system that overrides the supplied fields.	Inspect the deployed page’s metadata, use the intended canonical URL, and remove or correct conflicting values in the system that renders the page.
The workflow posts twice after a retry.	The first publish succeeded but the workflow did not record the result before retrying.	Track completion before retrying publication and use a destination idempotency mechanism if available.
A screenshot call returns an error or unexpected content.	The target may redirect, require authentication, render slowly, or return a bot check or blank page.	Check the response status and ScreenshotNeo’s `X-Page-Verdict` and `X-Billed` headers. Adjust supported wait, cookie, header, or viewport settings as appropriate; consult the documentation.

9. FAQ

Can n8n replace a preview image on any blog URL?

No. Replacing the preview requires access to the page’s metadata or publishing system. For a third-party URL, use the generated image in a separate social post if the platform supports it.

Does a screenshot automatically become the link preview?

No. A screenshot is an image file. The blog page must reference it through metadata such as og:image for it to serve as that page’s Open Graph image.

Should I reuse the page’s current Open Graph image?

Inspect it first. If it already fits the intended use, reuse may avoid unnecessary generation. Replace it only when you control the page and intend to change its preview.

Do not assume so. Check the intended platform’s current official requirements and verify the published result for each destination.