TikTok Open Graph Image Generator

A TikTok Open Graph image generator creates the image file used by a webpage’s sharing metadata. It does not, by itself, add metadata to your site or guarantee that TikTok will display the image in every sharing surface. The complete workflow is:

Create a readable image at a stable public URL.
Add og:image and the other Open Graph properties to the page’s rendered HTML.
Verify that crawlers can fetch the page and image.
Inspect the published URL with a preview checker and test an actual TikTok share.

The Open Graph Protocol defines the metadata format, while TikTok’s official developer documentation covers specific products such as Link Sharing beta and TikTok Minis. Those documents do not provide one universal specification for previews of every ordinary external URL.

1. What an Open Graph image generator actually does

An Open Graph image is an image referenced by page metadata. A generator may create a PNG, JPEG, or WebP from a template, headline, author name, product photograph, or other inputs. The generator’s output is only an asset until your page points to it.

The core Open Graph properties are og:title, og:type, og:image, and og:url. og:description is recommended. Image structured properties include og:image:url, og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt. The protocol’s example uses 400 by 300 pixels as illustrative markup; it is not a TikTok image-size requirement. See the Open Graph Protocol.

The protocol says: “If the page specifies an og:image it should specify og:image:alt.” Write useful alt text that describes the image’s purpose rather than repeating the page title.

2. Create the image asset

Choose a dependable format and layout

Use a widely served raster format such as JPEG or PNG. WebP can reduce transfer size when the consuming surface supports it.
Keep the main subject and title away from the edges so crops remain understandable.
Use strong contrast and a short headline. Treat the image as a small card, not a full article.
Keep the file at a stable HTTPS URL with a normal image content type.
Do not put essential information only in the image. The HTML title and description remain the accessible, machine-readable summary.

There is no source-backed universal TikTok dimension in the reviewed documentation. If your image will be reused for other social surfaces, select a size and aspect ratio that fit those surfaces, then test the resulting crop.

An image file becomes useful to a sharing surface only after the page metadata points to its public URL.

Generate with a repeatable template

A template makes every article consistent and lets you regenerate an image when a title changes. Inputs commonly include a title, category, author, date, background color, and optional photo. Sanitize user-provided text, set a maximum line count, and render fonts on the server so the output does not depend on a browser’s installed fonts.

Store the final file under a versioned or content-addressed path, for example /og/articles/my-post-v2.jpg. Changing the URL when the artwork changes makes cache invalidation easier than overwriting one permanent file.

3. Add Open Graph metadata to the page

Place tags in the <head> of the HTML that your server sends for the public URL:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to optimize a database query</title>
  <meta name="description" content="A practical guide to finding and fixing slow queries.">

  <meta property="og:title" content="How to optimize a database query">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/query-optimization">
  <meta property="og:description" content="A practical guide to finding and fixing slow queries.">
  <meta property="og:image" content="https://example.com/og/query-optimization-v2.jpg">
  <meta property="og:image:url" content="https://example.com/og/query-optimization-v2.jpg">
  <meta property="og:image:secure_url" content="https://example.com/og/query-optimization-v2.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="Diagram showing the stages of database query optimization">
</head>
<body>...</body>
</html>

Use the canonical, publicly shareable URL in og:url. Keep the image URL absolute, HTTPS, and reachable without a login, cookie, or client-side interaction. If your framework renders metadata in JavaScript after the initial response, check the raw HTML returned by the server; a crawler that does not execute JavaScript may never see those tags.

4. Framework implementation patterns

Static HTML and templates

Generate the image during publishing, copy it to your CDN or object storage, and interpolate its absolute URL into the template. Add a default image for pages that do not have a custom one, but avoid emitting duplicate og:image tags with conflicting values.

Next.js or another server-rendered framework

Return Open Graph values from the framework’s server metadata API or document head. Confirm the generated response with curl, because a browser’s DOM inspector can show tags that were added after load.

Single-page applications

For an SPA, use prerendering or server-side rendering for publicly shared routes. A client-only update to document.head is unreliable for crawlers that fetch only the initial HTML.

5. Validate the published URL

Request the page with an HTTP client and inspect the returned source for og:title, og:url, and og:image.
Request the image URL separately. Check for a successful response, an image Content-Type, and no authentication redirect.
Use a preview checker to view the metadata that a tool can fetch. A checker can expose malformed tags or an inaccessible image; it cannot guarantee TikTok’s behavior in every app version, region, or sharing surface.
Share the real URL in TikTok and compare the result with the fetched metadata. Allow for caching when you publish a replacement image.

One third-party TikTok preview utility describes a card containing an image, title, and domain and says its TikTokSpider does not execute JavaScript and respects robots.txt. That is the utility’s description of its own checks, not a universal statement confirmed by TikTok. TikTok’s developer documentation separately describes URL verification for some features, including Link Sharing beta; that requirement should not be assumed for ordinary web links.

6. TikTok APIs are a separate integration

TikTok Minis sharing has explicit title, desc, and imageUrl parameters. Those parameters belong to the Minis SDK and do not prove how arbitrary external website links are rendered.

If you are building an app that posts content through TikTok’s APIs, read the Content Posting API documentation and its content sharing guidelines. The guidelines require an API client to show a preview of content before upload and obtain express consent. They also address restrictions on unverified clients and promotional branding. These posting rules are different from adding og:image to a normal webpage.

7. Or skip the browser setup

If your goal is a dependable screenshot of the published page, ScreenshotNeo captures the URL through one API request. It can produce PNG, JPEG, WebP, or PDF and supports full-page capture, custom CSS, a chosen viewport, device presets, dark mode, waiting for a selector or network idle, and element capture. The request below captures the page itself; it does not replace the Open Graph tags required for a social preview.

A clean capture removes common overlays before the screenshot is returned.

See the ScreenshotNeo API documentation for all options.

cURL

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

Python

import requests

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

Node.js

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

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

8. Troubleshooting checklist

Symptom	Likely cause	Fix
No image tag in the fetched HTML	Metadata is injected only in the browser or the wrong template is deployed.	Render tags on the server and inspect the raw HTTP response.
Image URL returns HTML	A CDN, login page, or error handler is serving a redirect or document.	Request the image directly; return the correct image bytes and MIME type without authentication.
Preview shows an old image	A crawler or CDN cached the previous URL.	Publish a versioned image URL, then validate the new URL.
Title or description is wrong	Duplicate tags, incorrect route data, or a mismatch between canonical URL and metadata.	Emit one authoritative value per property and verify the final route.
Image is cropped unexpectedly	The consuming surface chooses its own card dimensions.	Keep essential content centered, test several crops, and avoid edge-bound text.
Preview checker cannot fetch the page	Robots rules, firewall policy, geo restrictions, or a slow server response.	Review access logs and crawler rules; make the public page and image reachable over HTTPS.
SPA route has no preview metadata	The crawler receives an app shell before JavaScript runs.	Use SSR, prerendering, or a static HTML fallback for shared routes.

9. Performance, reliability, and cost

Rendering: Generate images at publish time instead of on every request. Cache fonts and templates, and avoid remote assets that can fail during rendering.
Delivery: Serve images from a CDN with long-lived caching. Change the filename when the artwork changes.
HTML: Keep metadata in the initial response and use absolute HTTPS URLs. A fast page helps crawlers complete their fetch before timeouts.
Accessibility: Supply meaningful og:image:alt; do not rely on text embedded in the artwork.
Screenshot automation: Wait for a meaningful selector or network idle when the page is dynamic. Use caching for repeated captures and asynchronous jobs or bulk capture for large URL sets.
Cost: A generator may charge for image rendering or storage, while preview tools may have account limits. ScreenshotNeo bills only clean shots; failed loads, bot checks, blank pages, timeouts, and cache hits cost nothing.

10. FAQ

Does generating an image automatically add it to TikTok?

No. You must publish the image and add an og:image tag to the webpage. TikTok may still choose a different presentation.

Is there a required TikTok Open Graph image size?

The reviewed official sources do not establish a universal dimension. Choose a practical size for your other sharing targets and test the crop.

Should I add both `og:image` and `og:image:url`?

og:image is the core property. The structured URL property can make your intent explicit; keep values consistent.

Can JavaScript add the tags after page load?

It can update a browser document, but it is unreliable for crawlers that do not execute JavaScript. Prefer server-rendered or prerendered metadata.

Does a preview checker guarantee the TikTok result?

No. It reports what its own crawler can read. TikTok can vary by app version, region, cache, and sharing surface.

Can ScreenshotNeo generate the Open Graph artwork?

ScreenshotNeo captures a rendered webpage and can return an image or PDF. Use an image-generation or templating step for artwork, then use ScreenshotNeo when you need a clean page capture.