og:locale and Hreflang: How They Work Together
How og:locale Open Graph tags and hreflang tags work together, where they overlap, and how to implement both correctly for multilingual and multiregional sites.
If you run a multilingual website, you have probably encountered both og:locale and hreflang tags. They look similar -- both deal with language and region codes -- but they serve completely different purposes for completely different systems. Confusing the two leads to wasted effort or incorrect implementations.
This guide explains what each one does, where they overlap, and how to implement both correctly. For a full hreflang reference, see our hreflang guide.
What og:locale Does
og:locale is an Open Graph meta tag. Open Graph is a protocol created by Facebook (now Meta) that controls how your pages appear when shared on social media platforms. The og:locale tag tells social platforms what language your page content is in.
When someone shares your URL on Facebook, LinkedIn, or another platform that reads Open Graph tags, the platform uses og:locale to:
- Display the correct language version of the shared content
- Format dates, numbers, and other locale-specific elements appropriately
- Identify alternate language versions of the content (via
og:locale:alternate)
Basic og:locale syntax
<meta property="og:locale" content="en_US" />
The format is language_TERRITORY using an underscore separator. This is different from hreflang, which uses a hyphen. The language code follows ISO 639-1, and the territory code follows ISO 3166-1 alpha-2, just like hreflang.
Common og:locale values
| og:locale value | Meaning |
|---|---|
| en_US | English (United States) |
| en_GB | English (United Kingdom) |
| fr_FR | French (France) |
| de_DE | German (Germany) |
| es_ES | Spanish (Spain) |
| ja_JP | Japanese (Japan) |
| zh_CN | Chinese (China) |
| pt_BR | Portuguese (Brazil) |
If you do not include og:locale, Facebook defaults to en_US.
og:locale:alternate
The og:locale:alternate tag tells social platforms about other language versions of the same content. This is conceptually similar to hreflang -- it signals that alternate versions exist -- but it is only used by social platforms, not search engines.
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:locale:alternate" content="es_ES" />
This tells Facebook: "This page is in US English, and French, German, and Spanish versions also exist." Facebook can then show users a link to the version in their preferred language when the content appears in their feed.
What Hreflang Does
Hreflang tags tell search engines (primarily Google) which language and regional version of a page to show in search results. They are HTML link elements or XML sitemap annotations that define the relationship between alternate-language pages.
Basic hreflang syntax
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/page/" />
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/page/" />
<link rel="alternate" hreflang="de-DE" href="https://example.com/de-de/page/" />
Hreflang uses a hyphen between the language and region codes, not an underscore. The language code is lowercase, and the region code is uppercase.
Key Differences
| | og:locale | Hreflang |
|---|---|---|
| Purpose | Social media display | Search engine version serving |
| Used by | Facebook, LinkedIn, social platforms | Google, Yandex |
| Format | language_TERRITORY (underscore) | language-REGION (hyphen) |
| Placement | <meta> tag in <head> | <link> tag in <head> or XML sitemap |
| URLs included | No (just locale codes) | Yes (full URLs for each version) |
| Self-referencing | Yes (og:locale for current page) | Yes (required for each page) |
| Alternate versions | og:locale:alternate (codes only) | hreflang with full URLs for each alternate |
The fundamental difference: og:locale is about social media presentation. Hreflang is about search engine version serving. They are solving different problems for different platforms.
How They Work Together
Despite serving different systems, og:locale and hreflang are complementary. A multilingual site should have both.
Consistent language signals
Having og:locale and hreflang agree on the language and region of a page reinforces your overall language signal. If your hreflang says en-GB and your og:locale says en_GB, everything is consistent. If they disagree (hreflang says en-US but og:locale says fr_FR), it does not cause SEO problems (Google ignores og:locale for search), but it creates a confusing social sharing experience.
Complete multilingual implementation
A fully implemented multilingual page includes both sets of tags:
<head>
<!-- Hreflang for search engines -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/page/" />
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/page/" />
<link rel="alternate" hreflang="de-DE" href="https://example.com/de-de/page/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en-us/page/" />
<!-- Open Graph for social platforms -->
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/en-us/page/" />
</head>
The hreflang tags handle search engines. The og:locale tags handle social platforms. Both are present, both are consistent, and each serves its own purpose.
Does og:locale Affect SEO?
No. Google does not use og:locale for language detection, region targeting, or any other search ranking or serving purpose. Google has its own methods for determining a page's language (primarily content analysis) and region (hreflang, ccTLDs, Search Console settings). See our article on how Google determines a page's language and region for the full explanation.
The confusion arises because og:locale looks like it should be an SEO signal. It has language codes, region codes, and alternate version declarations. But it lives in the Open Graph namespace, which is Facebook's protocol. Google reads Open Graph tags for specific purposes (like generating rich snippets from og:title and og:image), but og:locale is not one of the tags it uses.
Does og:locale:alternate replace hreflang?
No. og:locale:alternate tells Facebook about alternate language versions. It does not include URLs -- just locale codes. It has no effect on Google. You cannot use og:locale:alternate as a substitute for hreflang tags.
Similarly, hreflang tags do not affect social media sharing. Facebook does not read hreflang. You need both systems if you want correct behavior on both search engines and social platforms.
Implementation Guide
Step 1: Set og:locale on every page
Each page should have an og:locale tag matching its language and region:
<!-- On your French page -->
<meta property="og:locale" content="fr_FR" />
<!-- On your German page -->
<meta property="og:locale" content="de_DE" />
Use the underscore format. The language code is lowercase, the territory code is uppercase.
Step 2: Add og:locale:alternate for other versions
On each page, list the locales of the other versions:
<!-- On your French page -->
<meta property="og:locale" content="fr_FR" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="de_DE" />
Do not include the current page's locale in the alternate list. It is already specified in og:locale.
Step 3: Add hreflang tags (separately)
On the same page, add hreflang tags with full URLs for every version, including the current page:
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/page/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/page/" />
<link rel="alternate" hreflang="de-DE" href="https://example.com/de-de/page/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en-us/page/" />
Note the hyphen in hreflang codes versus the underscore in og:locale codes.
Step 4: Keep them in sync
When you add a new language version, update both og:locale:alternate and hreflang on every existing page. When you remove a language version, remove it from both. Inconsistencies between the two will not break anything, but they create maintenance confusion and may cause incorrect social sharing behavior.
Handling og:locale Without a Region
Some sites use language-only hreflang codes (en, fr, de without a region). og:locale always requires a territory code. Facebook does not accept en alone -- it needs en_US or en_GB.
If your hreflang is language-only, pick a default territory for og:locale:
| Hreflang | Suggested og:locale |
|---|---|
| en | en_US (or en_GB if your content leans British) |
| fr | fr_FR |
| de | de_DE |
| es | es_ES (or es_MX if targeting Latin America) |
| pt | pt_PT (or pt_BR if targeting Brazil) |
| ja | ja_JP |
| zh-Hans | zh_CN |
| zh-Hant | zh_TW |
This is not a perfect mapping, but og:locale requires the territory code, so you need to pick one. It does not affect SEO.
CMS and Framework Considerations
WordPress
SEO plugins like Yoast SEO and Rank Math generate og:locale automatically based on your WordPress locale setting. If you use a multilingual plugin like WPML or Polylang, the og:locale should update per language. Verify this by checking the page source of each language version.
Hreflang is usually handled separately, either by the multilingual plugin or a dedicated hreflang plugin. Make sure both are configured.
Next.js and React frameworks
You will typically set Open Graph tags and hreflang tags in your page's <head> section through your framework's head management (Next.js metadata API, React Helmet, etc.). Generate both sets of tags dynamically based on the current locale and available translations.
Static site generators
Generate both og:locale and hreflang tags during the build process. Pull the list of available translations from your content source and render both tag sets on every page.
Facebook's locale list
Facebook maintains a list of supported og:locale values. Not every language-territory combination is supported. If you use an unsupported locale, Facebook falls back to en_US. Check Facebook's documentation for the current list of valid locales.
Common Mistakes
Using hreflang format in og:locale
Using en-US (hyphen) instead of en_US (underscore) in og:locale. Facebook expects the underscore format. Using a hyphen may cause the tag to be ignored.
Using og:locale format in hreflang
Using en_US (underscore) instead of en-US (hyphen) in hreflang. Google expects the hyphen format. Using an underscore produces an invalid hreflang tag.
Forgetting og:locale entirely
If you do not include og:locale, Facebook defaults to en_US. If your page is in German, shared links will be treated as English content by Facebook's systems. This can affect how the shared content is displayed and recommended.
Thinking og:locale:alternate replaces hreflang
These are separate systems for separate platforms. You need both. og:locale:alternate does not affect search engines. Hreflang does not affect social platforms.
Summary
og:locale and hreflang serve different systems but work together on multilingual sites. og:locale tells social platforms about your content's language and region. Hreflang tells search engines. Use both, keep them consistent, and remember the format difference: underscores for og:locale, hyphens for hreflang. Neither replaces the other.
Generate hreflang tags for your multilingual site
Enter your URLs, select your languages, and get correct hreflang markup. Pair it with og:locale for full coverage.
Try Hreflang Generator