Rel Alternate is the basic source code for showing alternative representations of webpages with the same or similar content. The hreflang link attribute, indicating different languages and regions, is the most common link rel=”alternate” combination.

Learn the specifics of both link rel= ”alternate” and link rel= ”alternate” hreflang including how, why, and when to use them. 

Link Rel=”Alternate”: The Basics

Rel= “alternate” is the basic source code for an alternative representation of a webpage. It is the foundation of several source codes showing Google that there are other versions of essentially the same content.

The link relation attribute indicates that pages are related to each other. In its most basic form it is written as follows:

<link rel=“alternate”>

This source code is always written in the HTML. Certain plugins in WordPress and similar website building tools can include these source codes automatically.

Using the rel=”alternate” attribute tells Google that the contents of the pages are nearly identical but not duplicates of each other. This is of great SEO value as the next section explains.

Why You Should Use the Rel=”Alternate” Attribute

The main reason why you should incorporate html rel alternate attributes is that it prevents Google from labeling a webpage as a duplicate. Duplicate pages downgrade your ranking on Google SERPs which is what everyone wants to avoid.

The only time a duplicate page is accepted by Google is when it is indicated with the rel=”canonical” attribute. This saves the website from being downgraded by bots when a duplicate page is absolutely necessary.

Another reason why you should use rel=”alternate” source codes is to personalise webpages. Each rel alternate combination has its own specific purpose for making the webpage more applicable to its audience.

Not only does this improve the SEO ranking, it also reduces the bounce rate. That is why most e-commerce websites heavily use the rel=”alternate” attribute to create highly personalised webpages.

Rel Alternate Attribute Combinations

Below are examples of the most common link rel alternate combinations.

Specifying languages and regions: link rel=”alternate” hreflang

Specifying device i.e. desktop or mobile: link rel=”alternate” media

Specifying web feed type: link rel=”alternate” type

What You Need to Know About the Hreflang Attribute

One of the most useful alternate attributes is link rel=”hreflang” The hreflang link indicates the webpage alternatives in different languages.

In practice, this is useful for international brands and websites with an audience in other parts of the world. These days, that includes most websites.

In its basic form the source code looks like this: 

<link rel= “alternate” hreflang=”language code” href=”http://www.website.com/” />

The following are examples using recognised language codes. These language codes follow the ISO 639-1 format, as required by Google.

French: <link rel= “alternate” hreflang=”fr” href=”https://fr.website.com/” />

Spanish: <link rel= “alternate” hreflang=”es” href=”https://es.website.com/” />

Hebrew: <link rel= “alternate” hreflang=”he” href=”https://he.website.com/” />

The hreflang link can also be used to specify a localised audience. For example, you can create a webpage in British English for an IP address in the UK and an American English webpage for an IP address in the United States.

British English for UK audience:

<link rel= “alternate” hreflang=”en-gb” href=”https://en-gb.website.com/” />

American English for US audience:

<link rel= “alternate” hreflang=”en-us” href=”https://en-us.website.com/” />

Similarly, you can use the link rel=”hreflang” to specify a website for a country’s audience where several languages are spoke.

French-Speaking Canada:

 <link rel= “alternate” hreflang=”fr-ca” href=”https://fr-ca.website.com/” />

English-Speaking Canada:

 <link rel= “alternate” hreflang=”en-ca” href=”https://en-ca.website.com/” />

When specifying languages for countries, you have to use a combination of a language code and a country code. Google does not recognise which language to use when only providing a country code. Only using the country code may restrict the webpage to a certain region but Google will not automatically switch to the local language.

Pro Tips on Using the Hreflang Link Attribute

1. Language Alternatives Must Have Return Links

Both webpages must have return links to each other or the hreflang tag attribute will not work. This is also a preventative measure so that external parties cannot create an unauthorised alternative webpage.

2. Use the HTML Form

All pages must be in html rel=”alternate” form for the tag to be recognised. For example, //website.com/en does not qualify but http://en.website.com/ is fully qualified.

3. Include a Default Language Option

Decide on the default language for the website. This is useful for when the web visitor’s geographic location does not match their preferred language.

Set up a default language using the following attribute:

<link rel= “alternate” hreflang=”code-default” href=”http://www.website.com/” />

As an example, English as the default language is written like this:

<link rel= “alternate” hreflang=”en-default” href=”http://www.website.com/” />

4. Organise Language Alternatives in the Sitemap

Make it easier for Google bots by including all the alternative languages and region-specific pages in the Sitemap. Do this by creating a separate URL for each alternative with the same child entries across all URLs.

Number of alternatives = number of URLs = number of child entries.

So, a website with 7 language and region alternatives has 7 separate URLs and the same 7 child entries for each URL.

These days, clients request websites with multiple languages making the alternate hreflang attribute an essential element. As more and more brands cater to a global market, organising these many language alternatives is extremely important.

Keep this in mind whenever you are expanding the website’s target audience and make sure that the corresponding webpages are classified properly to avoid getting marked as a duplicate.