How to Create Social Preview Images for Multilingual Websites

Give each localized URL its own Open Graph title, canonical page URL, locale, and preview image. Render those values from the same language-specific content record, make the image publicly retrievable, and validate the HTML head for every language version. Use hreflang to connect translations for Google Search; it does not select social preview metadata.

1. Build a locale-to-page and image map

Keep metadata and image selection attached to the localized URL. This avoids a common template bug: translating the page title while every version still points to the default-language image.

Field	Example English record	Example French record
URL	https://example.com/en/article	https://example.com/fr/article
Title	How to Grow Tomatoes	Comment cultiver des tomates
Open Graph locale	en_US	fr_FR
Image URL	https://cdn.example.com/social/en/article.jpg	https://cdn.example.com/social/fr/article.jpg
Image alt	Tomato plants growing in a garden	Description of the same visual in French

Use the actual language and territory for each page where known. Open Graph gives en_US as an example locale format. Keep URLs absolute so crawlers can resolve them without guessing the site origin.

2. Render page-specific Open Graph tags

The Open Graph protocol’s four required properties are og:title, og:type, og:image, and og:url. Add og:locale for the current page’s locale and og:locale:alternate for other available locales. Provide descriptive og:image:alt text in the language of the page. The alt value describes the image; it is not a caption. See the Open Graph Protocol.

<head>
  <title>Comment cultiver des tomates</title>
  <meta property="og:title" content="Comment cultiver des tomates">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/fr/article">
  <meta property="og:image" content="https://cdn.example.com/social/fr/article.jpg">
  <meta property="og:image:alt" content="Des plants de tomates dans un jardin">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:locale:alternate" content="en_US">
  <meta property="og:description" content="Guide pratique pour cultiver des tomates.">
</head>

Use the page’s real type, title, URL, image, and localized description; the values above are examples. If you provide multiple images, Open Graph treats each og:image as the start of an image entry. Put that image’s structured properties, such as width, height, type, and alt, after its root tag and before the next image root. The first tag has preference in conflicts, so do not emit duplicate image tags accidentally.

Render from one locale record

Whether your site uses server templates, a CMS, or a static-site generator, select the page URL, title, locale, image URL, alt text, and alternates from one record. A minimal data shape might be:

const pages = {
  en: {
    url: 'https://example.com/en/article',
    title: 'How to Grow Tomatoes',
    locale: 'en_US',
    image: 'https://cdn.example.com/social/en/article.jpg',
    imageAlt: 'Tomato plants growing in a garden'
  },
  fr: {
    url: 'https://example.com/fr/article',
    title: 'Comment cultiver des tomates',
    locale: 'fr_FR',
    image: 'https://cdn.example.com/social/fr/article.jpg',
    imageAlt: 'Des plants de tomates dans un jardin'
  }
};

Adapt the syntax to your stack. The key check is that all metadata for the current page comes from the same selected locale record, not from separate defaults.

3. Localize the artwork and its description

If an image contains words, create a version with those words translated and check the layout with longer and shorter translations. Set og:image:alt to a concise description of what the artwork visibly shows, written in the page language. This keeps the shared asset and its accessible description aligned with the localized page.

4. Connect translations with hreflang

For Google Search, annotate alternate language or region URLs using HTML, HTTP response headers, or an XML sitemap. Google treats these methods as equivalent from Search’s perspective; choose the one easiest to maintain. Each version should include itself and every alternate, use fully qualified URLs, and link back reciprocally. Add x-default when there is a suitable language selector or fallback destination. See Google’s localized versions guidance.

<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">

Put the equivalent set on both localized pages. Here, the English page lists English and French, and the French page lists English and French. The example’s fallback is the language-neutral article URL; use one only if it is an appropriate destination. Google says hreflang helps it understand localized variations. It does not use hreflang or the HTML lang attribute to detect a page’s language, and hreflang is not a social preview selector.

5. Check platform requirements and crawler access

Image requirements differ by platform. For LinkedIn website shares, its help page specifies an image minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio, and sets a 5 MB maximum. Images under 401 pixels wide display as thumbnails. LinkedIn also asks for og:title, og:image, og:description, and og:url. These are LinkedIn requirements, not universal image rules. Check the current official guidance for every other platform you target; do not assume the same dimensions, file limits, or cache behavior. See LinkedIn’s website share guidance.

Make sure the image URL is public and the platform crawler can fetch it. A correct tag cannot produce a preview if the image is in a protected directory or the site blocks the crawler. Avoid treating a successful browser load while logged in as proof that an unauthenticated crawler can access the asset.

6. Validate every language version

1. Open each localized URL and inspect its rendered HTML head, including the final server-rendered or browser-rendered output your sharing platform will receive.
2. Verify og:title, og:url, og:image, og:locale, and og:image:alt match that same locale record.
3. Fetch the absolute image URL without a logged-in session. Confirm it returns the intended image and is not blocked by access controls.
4. For LinkedIn, check dimensions, aspect ratio, and file size against its published guidance.
5. Check each page’s hreflang set for a self-reference, fully qualified alternate URLs, and reciprocal links.
6. Use the destination platform’s current official preview inspection or refresh method, if available. Platform caching and tools are not covered by one universal rule.

Or skip the browser setup

If your goal is to inspect how localized pages render before sharing, ScreenshotNeo is a website screenshot API and MCP server. One GET request captures a URL as PNG, JPEG, WebP, or PDF. It does not replace checking the metadata tags or a platform’s own preview: use it to see the rendered page, then inspect the head and crawler access separately.

See the ScreenshotNeo API documentation. This runnable cURL example captures a localized page:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/fr/article -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/fr/article"},
    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/fr/article'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server offers 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. Every feature is on every plan.

Sign up for ScreenshotNeo’s free 1,000 screenshots a month, with no card.

Troubleshooting

Symptom	Likely cause	Fix
Every language shows the same preview image	The template uses a global default image rather than the selected locale record.	Choose the image URL from the same per-locale record as the page title and URL; inspect each rendered head.
A preview shows an old title or image	The page or platform may be serving cached metadata or an older asset URL.	Confirm the current HTML and image response first, then use the platform’s current official inspection or refresh mechanism. Do not assume all platforms refresh on the same schedule.
The image is missing	The image URL may be relative, protected, unavailable to crawlers, or incorrect.	Use an absolute public URL, verify it without authentication, and check access rules and the response.
Translation page is not associated with its alternate	One version may omit itself, use a malformed URL, or fail to link back.	Include self and alternate links on every version, use fully qualified URLs, and make the sets reciprocal.
LinkedIn displays a small thumbnail	The image width may be under 401 pixels.	Use an image meeting LinkedIn’s stated 1200 × 627 minimum and recommended 1.91:1 ratio, and keep it within the 5 MB maximum.
Image description appears in the wrong language	og:image:alt is shared across locale templates.	Store and render descriptive alt text per locale; describe the visible image rather than repeating a caption.
Conflicting image appears in the preview	Multiple og:image tags are emitted and the first has preference.	Remove unintended duplicates or order image entries and their structured properties deliberately.

Performance, reliability, and cost

Generate metadata from the page record during the normal page render rather than making a separate request per social tag. Keep social images on stable, public URLs and avoid regenerating identical assets on every page request. For reliability, validate the metadata and image URL across all locales after publishing changes to templates, translations, or CDN rules. No universal social image dimensions or cache timing can be inferred from the LinkedIn requirement; check each target platform’s current documentation.

This workflow does not require a screenshot API. If you use ScreenshotNeo to inspect page rendering, its free tier covers 1,000 shots per month without a card, with paid plans starting at $5 for 3,000; choose based on capture volume and the plan details on the product site.

FAQ

Does og:locale:alternate replace hreflang?

No. Open Graph locale tags describe the object’s locale context for social metadata. Google’s hreflang annotations connect localized URLs for Search.

Do I need a different image for every language?

Only when the image needs localized content or a different locale-specific treatment. In all cases, deliberately select the intended image for each page and provide matching localized alt text.

Should the Open Graph URL be the language selector?

Set og:url to the URL intended to identify that localized page. A selector or fallback URL may be appropriate as x-default when it serves that role, but it does not replace each version’s own metadata.

Is LinkedIn’s image size a universal standard?

No. The dimensions and file limit cited here are LinkedIn’s stated requirements. Verify the current specifications for other target platforms separately.