og:locale and hreflang: Multilingual Open Graph Tags Guide

How to use og:locale and og:locale:alternate for multilingual sites — plus how hreflang works alongside Open Graph and what each platform does with locale metadata.

Updated March 2026

What is og:locale?

og:locale is an Open Graph meta tag that declares the language and territory of your page content. It uses IETF language tags in underscore format (not hyphens):

<!-- English (US) -->
<meta property="og:locale" content="en_US" />

<!-- French (France) -->
<meta property="og:locale" content="fr_FR" />

<!-- Spanish (Latin America) -->
<meta property="og:locale" content="es_LA" />

<!-- German (Germany) -->
<meta property="og:locale" content="de_DE" />

<!-- Japanese -->
<meta property="og:locale" content="ja_JP" />

Note the underscore separator — en_US not en-US. The OG protocol spec requires underscores even though HTML lang attributes use hyphens.

og:locale:alternate — Declaring Other Language Versions

If your content is available in multiple languages, use og:locale:alternate to list the other available locales:

<!-- This page is English (US), but also available in French and Spanish -->
<meta property="og:locale"           content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:locale:alternate" content="de_DE" />

Facebook and a few other scrapers use this to understand your internationalization structure.

hreflang vs og:locale — What's the Difference?

These two signals serve different systems:

Signal	Who reads it	Format	Purpose
`hreflang`	Google, Bing, Yandex	en-US (hyphen)	Tells search engines which language version to show to which users
`og:locale`	Facebook, LinkedIn, social crawlers	en_US (underscore)	Declares the language of your OG content for social sharing

You need both for a fully internationalized site. They are not substitutes for each other.

hreflang Implementation

Place hreflang tags in the <head> of every language version of a page:

<!-- On your English page -->
<link rel="alternate" hreflang="en-US" href="https://yoursite.com/en/page" />
<link rel="alternate" hreflang="fr-FR" href="https://yoursite.com/fr/page" />
<link rel="alternate" hreflang="de-DE" href="https://yoursite.com/de/page" />
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/en/page" />

<!-- On your French page (same set of links!) -->
<link rel="alternate" hreflang="en-US" href="https://yoursite.com/en/page" />
<link rel="alternate" hreflang="fr-FR" href="https://yoursite.com/fr/page" />
<link rel="alternate" hreflang="de-DE" href="https://yoursite.com/de/page" />
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/en/page" />

Key rules: every page must include hreflang links to ALL language versions including itself. The x-default tag points to the default/fallback URL.

Next.js Multilingual Setup

// app/[locale]/page.tsx
import type { Metadata } from "next";

const localeToOg: Record<string, string> = {
  en: "en_US",
  fr: "fr_FR",
  de: "de_DE",
  es: "es_ES",
};

export async function generateMetadata({
  params,
}: {
  params: { locale: string };
}): Promise<Metadata> {
  const locales = ["en", "fr", "de", "es"];
  const baseUrl = "https://yoursite.com";

  return {
    title: "Page Title",
    description: "Page description",
    alternates: {
      canonical: `${baseUrl}/${params.locale}/page`,
      languages: Object.fromEntries(
        locales.map((l) => [l, `${baseUrl}/${l}/page`])
      ),
    },
    openGraph: {
      locale: localeToOg[params.locale] ?? "en_US",
      alternateLocale: locales
        .filter((l) => l !== params.locale)
        .map((l) => localeToOg[l]),
    },
  };
}

What Platforms Actually Do With og:locale

Facebook/Meta: Uses og:locale to localize how the share dialog appears. Most important platform for this tag.
LinkedIn: Reads it for content language signals, but doesn't visibly change the preview.
Twitter/X: Generally ignores og:locale; uses twitter:lang instead (rarely needed).
Discord/Slack: Do not use og:locale for rendering.

Common og:locale Mistakes

Using hyphens instead of underscores: en-US → should be en_US
Setting a single locale for all pages of a multilingual site (doesn't match the actual content language)
Omitting og:locale entirely — defaults to en_US on most crawlers, which is wrong for non-English content
Mismatching hreflang and og:locale (using different locales for the same page)

Verify your OG locale tags →

OGFixer shows the raw og:locale value your page returns, so you can confirm it matches your expected locale.

Check my OG tags →