A UK English page can inherit og:locale="en_US" from a shared social template, while its French translation inherits the same value. Correct the metadata for each edition instead of copying one locale everywhere. Also check the field format: Open Graph and HTML language attributes use different separators.
This guide uses two fictional studio-hours pages. The exercise changes their social locale metadata; it does not translate text, create another edition or guarantee a particular sharing preview.
Write a small map for the two existing editions
Record each real page URL and the language of its content before editing its template. For our example, the English edition is written for the UK and the French edition for France:
| Example page | HTML lang value | Open Graph locale |
|---|---|---|
https://example.com/en-gb/studio-hours/ |
en-GB |
en_GB |
https://example.com/fr-fr/horaires/ |
fr-FR |
fr_FR |
These addresses are placeholders. Do not add a locale just because a dropdown offers it; first identify the edition you actually maintain. Keep the page URL beside the values so a future editor can check which output belongs where.
Use the format expected by each field
The Open Graph protocol defines og:locale in language_TERRITORY form and gives en_US as its default. It also defines og:locale:alternate for other available locales. These properties belong to the social metadata.
The HTML lang attribute instead takes a BCP 47 language tag, such as en-GB. See the MDN language attribute reference. Do not run a global underscore-to-hyphen replacement across the head: that would change fields which need different syntax.
A translation relationship for Google Search is another setting. Its localized-page documentation uses hreflang annotations with language and optional region codes, such as en-GB, linked to page URLs. An Open Graph locale value does not supply those URL relationships.
Replace the default in a controlled generator comparison
Open the Open Graph Generator. For this comparison, keep og:type at website, enter https://example.com/en-gb/studio-hours/ as og:url and Quince Studio Hours as og:title.
- Inspect the initial og:locale selection, en_US.
- Change it to en_GB and select Generate Open Graph Tags.
- Confirm that the locale line changes to
en_GBwhile the entered URL and title remain the same. - Repeat for the French page using its example URL, the title Horaires du studio Quince and fr_FR.
This is a locale comparison, not a complete share-card setup. With no image entered, the tool warns about the missing image. Review our complete Open Graph example when preparing the other required properties. The generator formats entries; it does not fetch the pages, translate the title or save anything to your website.
Add alternate locales through the existing metadata provider
The current generator has one locale dropdown and no alternate-locale field. If both editions exist, use the CMS integration or template that already manages their social tags. The English page can carry this locale-only excerpt:
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
The French page uses its own locale, with English as the alternate:
<meta property="og:locale" content="fr_FR">
<meta property="og:locale:alternate" content="en_GB">
For several alternates, repeat the alternate property for each value rather than combining them into one comma-separated value. These excerpts contain locale values, not destination URLs. Keep any existing complete social block and edit its locale output; adding another independent block can leave conflicting values.
Check both public outputs after saving
- Open each published edition and inspect its head source. Find the actual meta elements rather than escaped examples in visible content.
- Compare the primary locale and alternates with the saved two-row map. Look for an old
en_USvalue from a shared template or duplicate primary properties. - Check that the title, description and page URL still belong to that edition. A locale change alone does not rewrite them.
- Inspect the real opening HTML element separately. Our document language guide explains that declaration.
- Test the visible language-switch links. Confirm that each reaches the intended page and its readable content.
Keep the observed values with the URLs and editing date. That record helps distinguish a template which still emits the wrong locale from a sharing service which has not refreshed its earlier preview.