How to Use Hreflang for SEO
What is Hreflang & What Does It Do?
The hreflang tag, like the canonical and pagination tags, is an HTML tag that indicates a relationship between two pages. In the case of hreflang, it says the two URLs house the same content in different languages, or in the same language but targeted at different geographical regions.
When done correctly, each hreflang tag tells bots reading the page where to find the appropriate content for users that don’t speak the first page’s language. When someone performs a search Google (Bing doesn’t use the hreflang tag) takes the following steps:
- It decides where to rank a URL based on its algorithm
- It checks a page’s code, looking for hreflang tags
- It looks at a user’s current location (based on IP address) and language settings
- It displays the most relevant URL in the SERP and sends the user (if the click) to that URL
The reason the search engine checks for hreflang tags is so that it can serve the right version of a page based on the user’s language settings. In short, it’s how Google knows which URL to display for a Spanish speaker and which one to use for an English speaker. It’s also how it knows which version to show someone in the United States and someone in the United Kingdom.
How To Add Hreflang To Your Pages
If you have an HTML page, the hreflang tag goes in the
<head> like this:
<link rel="alternate” hreflang=”en” href=”https://www.example.com”>
For non-HTML pages, like PDFs, add the hreflang annotation in the HTTP header:
Link: <https://www.example.com/>; rel="alternate”; hreflang=”en”
In the examples above, the hreflang="en” part of those tags tell Google the listed URL is the English version of the page. So it would show that URL to users who have their English set as their language in their browser and those in English-speaking countries. If they had hreflang=”es”, Google would display that URL for Spanish speakers.
When adding hreflang tags to your pages, you have to include a link to every version of the page, including a self-reference. So, if you have a page in English, Spanish and French, each page would have all three tags:
<link rel="alternate” hreflang=”en” href=”https://www.example.com”> <link rel="alternate” hreflang=”es” href=”https://www.example.com/es”> <link rel="alternate” hreflang=”fr” href=”https://www.example.com/fr”>
Adding geographies to your hreflang tags can be done by adding a country code after the language code in the hreflang attribute. So if the website above is targeting different countries with each language, they would look like this:
<link rel="alternate” hreflang=”en-us” href=”https://www.example.com”> <link rel="alternate” hreflang=”es-mx” href=”https://www.example.com/es”> <link rel="alternate” hreflang=”fr-fr” href=”https://www.example.com/fr”>
When Google sees these tags, it will know to show the English version to American users, Spanish to Mexican users and French to French users.
When adding hreflang tags to your pages, always use the ISO 639-1 format for languages and the ISO 3166-1 Alpha 2 format for countries. The hreflang value must always be written language-country, and geotargeting is limited to countries. Google does not support cities, regions or continents.