Creative agency glossarySEO and Analytics

Hreflang

Hreflang is an HTML attribute that tells search engines which language and region each version of a page is meant for, so the right version is shown to the right searcher.

What is hreflang?

Hreflang is a label on a link. When a site publishes the same page in several languages or for several countries, each version carries a set of link elements that list all the others, with an hreflang value naming the language and, optionally, the region: en-us for American English, en-gb for British English, fr-ca for Canadian French, and so on. A special value, x-default, marks the version to show when nothing matches. Search engines read the set and understand that these pages are siblings, not duplicates.

The attribute can sit in the page's head, in the HTTP header for files that are not HTML, or in an XML sitemap, which is often the tidiest option on large sites.

Why it matters

Why hreflang matters

It matters because without it, international sites compete with themselves. Google may show the Spanish page to an English speaker because it has more links, or treat the American and British versions as duplicate content and index only one. Hreflang fixes the targeting: the searcher in Montreal sees the French Canadian page, the searcher in Sydney sees the Australian one, and the link authority the versions earn is understood as belonging to one family of pages rather than being split between rivals.

For brands that trade on precision of voice, the point is sharper. Showing a British customer American spelling, American prices and an American phone number is a small failure of brand every time it happens, and hreflang is how a site stops doing it.

In practice

How hreflang works in practice

  1. 01

    The rules are strict and the mistakes are common. Every version must list every other version and itself, so a set of five pages carries five annotations on each page. The links must be absolute URLs and must point at pages that return a 200 and are indexable. Language codes follow ISO 639-1 and region codes follow ISO 3166-1, and the region on its own is not valid: you cannot target a country without a language. Add x-default for the fallback, usually a language selector or the global English page.

  2. 02

    On a site of any size this is generated, not typed. The content management system or the sitemap builder holds the mapping between translated pages and writes the annotations from it, and a crawler such as Screaming Frog checks them. Search Console reports hreflang errors under international targeting, which is where missing return links and bad codes show up.

Watch out

What people get wrong about hreflang

Forgetting the return link. If the English page points to the French page but the French page does not point back, Google ignores the pair. The other mistake is thinking hreflang redirects; it does not send anyone anywhere, it only tells search engines which version to show. Forcing visitors to a localized page based on their IP address is a separate decision, and usually a bad one. The third is using it as a substitute for translation. Pages that are identical except for the hreflang tag give the user nothing and give Google a reason to collapse them.

Questions

People also ask

Is hreflang a ranking factor?

No. It does not make a page rank higher; it makes sure the correct language or regional version is the one that appears for a given searcher. The benefit is better targeting and less duplication, not a boost.

Do I need hreflang if my site is only in English?

Only if you have separate pages for different English-speaking countries, such as US and UK versions with different spelling, pricing or products. A single English site serving everyone does not need it.

Where should hreflang tags go?

In the HTML head of each page, in the HTTP header for non-HTML files, or in the XML sitemap. The sitemap is often easiest to manage on large sites, but whichever method you pick, use one consistently rather than mixing them.

Next to it in the glossary

  1. Header TagsHeader tags are the six HTML heading elements, H1 through H6, that give a page its outline so readers can scan it and search engines can understand its structure.
  2. HeatmapA heatmap is a visual overlay on a web page that uses color to show where visitors click, move and scroll, so you can see how a page is actually used.
  3. Holistic SEOHolistic SEO is an approach to search that treats the whole site as the thing being ranked: content, technical health, user experience, authority and brand, worked on together rather than as separate tricks.
  4. Image OptimizationImage optimization is the work of making the pictures on a website as small, fast and well described as they can be without losing the quality the brand needs.
  5. Image SitemapAn image sitemap is an XML file, or a set of image entries inside a regular sitemap, that tells search engines which images a site wants indexed and which pages they belong to.
  6. Inbound LinksAn inbound link is a link from another website to yours, and the number and quality of them is one of the strongest signals search engines use to judge a site's authority.

Every SEO and Analytics term →

In the work

Where it shows up

All our creations →

From the journal

Read around it

The journal →

Talking the talk is one thing

We make the work.

RIOT is a creative agency and production studio in New York. Strategy, brand, film, photography, design and the campaigns that carry them, made by one team. A few lines is enough to start: we read every brief the same day.

    Footage