How to Set Open Graph Images for Localized Pages with hreflang

Give every localized page its own Open Graph metadata in the rendered HTML head. Set og:image to an absolute URL for an image that represents that locale’s page, and set og:url to that page’s canonical object URL. Declare hreflang separately: it maps language and regional variants for Google Search; it does not choose a social share image.

Open Graph and hreflang answer different questions. Open Graph describes a page when it is represented in a social graph. Hreflang tells Google Search which URLs are localized variants. Use both where they are useful, but configure and validate them independently.

1. What each tag does

The Open Graph Protocol identifies og:title, og:type, og:image, and og:url as required properties. The image is the URL of an image representing the object; the URL is its canonical identifier. og:locale describes the locale of the page’s Open Graph tags, while og:locale:alternate can list other available locales. These locale properties do not replace hreflang.

Metadata	Purpose	Example
og:image	Image representing this page in Open Graph previews	https://example.com/images/rose-pruning-en.jpg
og:url	Canonical object URL for this localized page	https://example.com/en/article
og:locale	Locale of the Open Graph metadata	en_US
hreflang	Relationship between localized URLs for Search	en, fr, x-default

The Open Graph Protocol recommends that a page specifying og:image also specify og:image:alt. Describe the image itself; do not use the alt value as a caption or a keyword list. Optional structured image properties include secure URL, MIME type, width, and height.

2. Choose shared or localized images

A single image can be used across language versions when it accurately represents every version and suits each audience. Use separate images when the image contains localized text, shows locale-specific product details, or relies on imagery that differs in cultural context or relevance.

Use a relevant, representative image, rather than a generic logo. Google says image preview selection is automated and can use multiple sources; metadata such as og:image can influence the selection, but it does not guarantee that a particular platform will show that exact image. There is no universal image dimension established here for every social platform.

3. Render a complete head for every locale

Each URL should serve metadata for that page in its rendered HTML. The following illustrative example has an English and a French version. Replace the example URLs and image paths with URLs that your site actually serves.

English page: /en/article

<!doctype html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <title>How to prune roses</title>

  <meta property="og:title" content="How to prune roses">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/en/article">
  <meta property="og:image" content="https://example.com/images/rose-pruning-en.jpg">
  <meta property="og:image:alt" content="A gardener pruning a rose bush">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="fr_FR">

  <link rel="alternate" hreflang="en" href="https://example.com/en/article">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/article">
</head>
<body>
  <h1>How to prune roses</h1>
</body>
</html>

French page: /fr/article

<!doctype html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <title>Tailler les rosiers</title>

  <meta property="og:title" content="Tailler les rosiers">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/fr/article">
  <meta property="og:image" content="https://example.com/images/taille-rosier-fr.jpg">
  <meta property="og:image:alt" content="Une personne taille un rosier">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:locale:alternate" content="en_US">

  <link rel="alternate" hreflang="en" href="https://example.com/en/article">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/article">
</head>
<body>
  <h1>Tailler les rosiers</h1>
</body>
</html>

These are examples, not observed site output. Notice that the English page points to the English object URL and image, and the French page points to the French object URL and image. The hreflang set is the same on both pages and includes each page itself.

Checklist for the rendered head

• Give each locale URL its own appropriate og:title, og:url, og:image, and og:locale.
• Use an absolute, publicly reachable image URL and confirm it returns the intended image.
• Use an image that represents the localized page; set og:image:alt to a concise description.
• Keep every localized page’s hreflang alternate set consistent, including a self-reference and reciprocal links.
• Confirm that the page’s visible content is in the language indicated by its URL and metadata.

4. Configure hreflang for the localized URLs

Google Search Central describes hreflang as a way to tell Google about content variations so it can understand pages as localized variants of the same content. Each page should identify itself and its other variants with fully qualified URLs. The alternate set should be reciprocal: if page A lists page B, page B should list page A. Missing return links can cause annotations to be ignored or interpreted incorrectly.

Language and region codes

• Use a language code, with an optional region code when you target a regional audience, such as en, en-GB, or fr-CA.
• A region by itself is not a valid hreflang value; include a language.
• Use x-default for a fallback URL when appropriate, commonly a language selector for visitors whose language does not match a listed variant.
• Use the same set of alternate URLs on every page in the cluster, including the current page.

For example, if a language selector is the fallback, include it in the same set on every variant:

<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/language/article">

Google supports hreflang declarations in HTML, HTTP response headers, and XML sitemaps. It treats these methods as equivalent for Search, so choose a method your team can maintain reliably; there is no Search benefit to maintaining all three at once. For HTML, place the alternate links in each localized page’s head.

Prefer distinct URLs for language versions. Google warns that cookie- or browser-dependent language delivery can prevent it from discovering and crawling every variation. Avoid redirects that stop a visitor or crawler from accessing other locale URLs, and provide visible language-switching links. Visible page content helps Google determine language; a URL folder, hreflang declaration, or HTML lang attribute alone does not establish it.

5. Generate metadata from locale data

On a multi-page site, store each locale’s canonical URL, title, image URL, image description, and Open Graph locale in the content or route data. Render those values into the head for that request, and render the same locale cluster’s alternate links on every variant. Do not infer a French image path from an English URL unless your content model guarantees that mapping.

For a server-rendered application, the logic is conceptually:

page = localizedContent[route.locale][route.slug]
cluster = localizedRoutes[route.slug]

renderHead({
  title: page.title,
  ogTitle: page.title,
  ogUrl: page.canonicalUrl,
  ogImage: page.shareImageUrl,
  ogImageAlt: page.shareImageAlt,
  ogLocale: page.openGraphLocale,
  alternateLocales: cluster
})

This pseudocode shows the data relationship rather than a framework API. Escape attribute values using your template engine’s normal HTML escaping. If a framework injects metadata client-side, check the HTML as fetched by the crawler or preview bot: a tag visible only after browser JavaScript runs may not be available to every consumer.

6. Validate each locale independently

1. Request every localized URL and inspect its rendered HTML head, including the final response after any allowed redirects.
2. Check that og:url points to that localized page and that og:image is absolute, accessible, and locale-appropriate.
3. Check that every page has the same hreflang cluster, contains a self-reference, and has reciprocal links.
4. Check that language and optional region values are valid, and that any x-default destination is a useful fallback.
5. Inspect the page’s actual visible language and content; do not rely only on metadata to communicate localization.
6. Use the relevant social platform’s current preview or debugging tool to check how it reads the page. Preview behavior varies, and declared metadata does not guarantee a particular rendering.

For pages that change frequently or are difficult to inspect by hand, a screenshot can help you compare what a visitor sees on each locale. It cannot verify that the Open Graph tags are present in the HTML head; inspect the source or rendered markup for that check. ScreenshotNeo is a website screenshot API and MCP server for developers.

7. Common problems and fixes

Symptom	Likely cause	Fix
Every locale shares the wrong social image	All pages render the same hard-coded og:image, or metadata is cached across locales	Render the image URL from the requested locale’s page data. Check the final HTML and any page or CDN cache key for locale separation.
A preview shows no image	The URL is relative, inaccessible to the preview fetcher, returns an error, or does not point to an image	Use a fully qualified HTTPS URL that serves the image successfully. Inspect the response and confirm the rendered og:image value.
Hreflang annotations are ignored or incomplete	Alternate URLs are not reciprocal, omit the current page, or use malformed values	Use fully qualified URLs, valid language values, a self-reference, and the same alternate set on every variant.
Google does not discover all locale pages	Language selection depends on cookies or browser settings, or redirects prevent access to variants	Give every version a distinct URL, keep it accessible, avoid blocking redirects, and link to language alternatives visibly.
The preview uses an outdated image	A consumer may have retained an earlier preview, or the page still serves stale metadata through a cache	Check the current response first, then use the platform’s current preview/debugging tool where available. Do not assume metadata changes immediately refresh all previews.
Tags look right in the browser but are absent to a crawler	The tags may be added only by client-side JavaScript, or a crawler receives different output	Inspect the response HTML and crawler-accessible rendered output. Prefer metadata present in server-rendered HTML when consumers do not execute the page’s JavaScript.

8. Performance, reliability, and maintenance

• Keep image URLs stable. Replacing the image at the same URL can interact with preview caching. Use a versioned URL when an image’s contents change and you need consumers to request the new asset.
• Make image delivery dependable. Serve the image from a stable, publicly reachable URL and avoid access rules that block the systems fetching previews.
• Do not create locale mismatches through caching. If HTML varies by locale, ensure the cache serves the matching title, canonical URL, image, and alternate set together.
• Choose one hreflang source of truth. HTML, headers, or a sitemap can all carry the annotations. Multiple independently maintained copies raise the chance of drift.
• Validate after publishing route changes. URL migrations and removed locales can leave stale alternate links or nonreciprocal clusters.

There is no topic-specific speed or engagement figure established for adding localized Open Graph metadata. Keep implementation straightforward: the metadata itself is small, and the main reliability work is serving accurate HTML and accessible images for each URL.

Or skip the browser setup

If you need a visual check across localized pages, ScreenshotNeo’s API documentation covers its screenshot API. For example, this request captures a page and saves the response as a WebP file:

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

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("french-page.webp", "wb").write(r.content)

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('french-page.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with response headers indicating 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 a month with no card; paid plans start at $5 for 3,000 shots. A screenshot is useful for visual comparison, while the metadata checks above still require inspecting the page head.

Sign up free for 1,000 screenshots a month, no card required.

Frequently asked questions

Does hreflang control the social share image?

No. Set og:image on each page. Hreflang maps locale variants for Google Search; Open Graph has its own image and locale properties.

Can two localized URLs use the same image?

Yes, when the image represents both pages accurately and is appropriate for both audiences. Use separate images when language, product details, or cultural context changes the right image.

Should og:url point to the default-language page?

For a localized page, use that page’s canonical object URL. The example English and French pages each identify their own URL.

Do I need hreflang in HTML, headers, and a sitemap?

No. Google supports all three methods and treats them as equivalent for Search. Choose a method you can keep accurate and reciprocal.

Will setting og:image guarantee that every platform displays it?

No. The declaration can influence image selection, but previews are selected and rendered by the consuming platform.

References

• The Open Graph protocol
• Google Search Central: Localized Versions of your Pages
• Google Search Central: Managing Multi-Regional and Multilingual Sites
• Google Search Central: Image SEO Best Practices