What Are Hreflang Attributes & How Do You Implement Them?

What Is Hreflang?

Hreflang is an HTML property that specifies a webpage’s connection and sometimes the people geographical region. 

It’s utile if your website has the aforesaid webpage(s) successful aggregate languages. So hunt engines tin find which mentation of a leafage to amusement searchers depending connected their determination oregon preferred language.

Semrush uses hreflang tags similar this to make contented for antithetic regions. 

This is what searchers successful the U.S. should spot erstwhile they Google “semrush blog”:

But you should spot this if you’re successful Spain:

Note that the hreflang property is simply a signal, not a directive. So there’s nary warrant that hunt engines volition show a definite mentation of the page. 

And it’s worthy pointing retired that Google and Yandex usage hreflang attributes. While Baidu and Bing don’t—they trust connected the content-language HTML attribute. 

People often usage the presumption “hreflang tags” and “hreflang attributes” interchangeably. The second wording is much accurate, but some tin mostly beryllium used.

Hreflang tags are adjuvant for hunt engines and users.

Here are the specifics:

Boosts International SEO Performance

International SEO involves optimizing your contented for antithetic regions and languages to summation your visibility and thrust much postulation from antithetic regions. And utilizing hreflang tags tin help.

For example, let’s accidental you merchantability shoes. 

Your U.S. assemblage mightiness hunt for "sneakers," your Canadian customers mightiness usage the word "runners," and your Spanish-speaking assemblage mightiness hunt for “zapatillas.” 

Creating region-specific contented (and adding hreflang tags to each page) tin assistance hunt engines show the applicable leafage for each assemblage successful the hunt results.

Improves the User Experience

Using hreflang tags tin assistance you nonstop users to the astir applicable pages. 

Here are a fewer examples:

• An ecommerce tract tin redirect antithetic countries to pages that bespeak their country’s currency (i.e., U.S. postulation sees prices successful U.S. dollars and German postulation sees prices successful euros)
• A look blog tin redirect radical to pages with their measurement systems (i.e., imperial measurements for U.S. postulation and metric measurements for Australian traffic)
• A concern that serves planetary clients tin nonstop users to pages successful their autochthonal languages

When users person a bully acquisition connected your site, they whitethorn beryllium much apt to research it further. And perchance go customers.

Avoids Duplicate Content Issues

Implementing hreflang attributes helps you debar issues related to duplicate content—when you person identical oregon astir identical pieces of contented connected your site. Which confuses hunt engines astir which to amusement successful hunt results. 

For example, accidental you person 2 merchandise pages. One lists your products successful U.S. dollars and the different lists your merchandise successful Canadian dollars.

Aside from the antithetic currencies and immoderate different insignificant localizations (like region-specific spellings), the accusation connected each leafage is fundamentally identical.

Google whitethorn see these pages to beryllium duplicates. Which tin interaction your rankings, backlink distribution, and your site’s credibility.

Hreflang tags archer hunt engines that though the contented whitethorn beryllium similar, you’ve created each portion for a circumstantial audience. 

And erstwhile your hreflang tags are implemented properly, you shouldn’t look immoderate duplicate contented issues.

What Does an Hreflang Tag Look Like?

Hreflang tags usually look similar this:

Here’s what the syntax (computer language) means:

• link rel=“alternate” means the nexus successful this tag is an alternate mentation of this page
• href=“https://example.com” is wherever you tin find the alternate page
• hreflang=“en-us” is the connection (English) and state codification (U.S.)—adding a state is optional

You usage hreflang erstwhile determination are aggregate versions of your page. This means you’ll spot aggregate hreflang tags adjacent to each other, alternatively than conscionable 1 (and they’ll each person the “alternate” attribute).

A real-world illustration mightiness look similar this:

<link rel="alternate" href="https://www.semrush.com/blog/what-is-seo/" hreflang="en" /> 
<link rel="alternate" href="https://de.semrush.com/blog/was-ist-seo/" hreflang="de" />
<link rel="alternate" href="https://fr.semrush.com/blog/qu-est-ce-que-le-seo/" hreflang="fr" />

The bid of the HTML attributes doesn’t typically matter. But you whitethorn privation to support things accordant wrong your ain website's code.

How to Build an Hreflang Tag

To make an hreflang tag, you request connection and state codes. 

Hreflang supports two-letterISO 639-1 language codes and ISO 3166-1 alpha-2 country and portion codes. 

(You won’t ever request the state oregon portion code. But it tin travel successful handy.) 

Let’s accidental your English blog has been translated into Spanish and Portuguese. The hreflang property for those articles mightiness look similar this:

<link rel="alternate" href="https://example.com" hreflang="en" />
<link rel="alternate" href="https://example.com/es/" hreflang="es" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt" />

But what if you targeted an further state beyond Portugal that besides speaks Portuguese? Like Brazil.

In that case, you’d request to adhd an other enactment and besides specify the state codes. 

Portuguese successful Portugal:

<link rel="alternate" href="https://example.com/pt/" hreflang="pt-pt" />

Portuguese successful Brazil: 

<link rel="alternate" href="https://example.com/br/" hreflang="pt-br" />

How to Implement Hreflang

There are 3 ways you tin instrumentality hreflang attributes: 

1. In the <head> conception of a page’s HTML
2. In the HTTP header (for non-HTML files similar PDFs)
3. In your XML sitemap

1. In the HTML

The astir basal mode to bespeak your alternate pages is successful that page’s HTML code. 

Simply adhd each the applicable hreflang attributes successful the <head> information of the page. 

And beryllium alert that each connection mentation of an nonfiction indispensable notation itself. As good arsenic each different connection versions (more connected that successful the adjacent conception connected champion practices).

Here’s what the syntax looks similar again for each element: 

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

The lone existent contented with this method is it tin beryllium messy and time-consuming. 

For example, each clip you construe an nonfiction into different language, you person to spell backmost and adhd different hreflang tag to each versions of it. 

To make oregon modify hreflang tags successful HTML, effort utilizing an hreflang tool. 

For this example, we’ll usage Aleyda Solis’s hreflang generator tool. 

Just participate the URL, language, and state for each mentation of the nonfiction you’re moving on. 

Select the ellipse adjacent to “Tags to see successful the caput country of the pages HTML” and click connected “Generate the Hreflang Tags for These URLs.”

Then, transcript the codification and paste it into each page's <head> tag. 

HTTP headers are large for implementing hreflang attributes for non-HTML contented connected your website. Like PDFs. 

HTTP headers are utilized to transportation accusation betwixt a server and a client. And incorporate metadata astir the petition oregon response, specified arsenic the day of the request, the referrer, the preferred language, and different applicable details.

Here’s the basal model for adding hreflang via HTTP headers:

Link: <url 1>; rel="alternate"; hreflang="language code 1", 
<url 2>; rel="alternate"; hreflang="language code 2"

Here’s what the syntax means:

• <url x> is the URL of the alternate leafage related to the locale assigned to the hreflang attribute. It indispensable see surrounding < and > marks.
• Language codification x is the connection (or region) codification targeted by this page

You indispensable bespeak a acceptable of <url>, rel="alternate," and hreflang values for each mentation of the page, including the requested version, separated by a comma. 

Say you make a PDF papers successful 3 versions—one successful English, 1 successful Spanish, and 1 successful Portuguese.

Your HTTP header should look similar this: 

Link: <https://example.com/doc.pdf>; rel="alternate"; hreflang="en", 
<https://example.com/es/doc.pdf>; rel="alternate"; hreflang="es", 
<https://example.com/pt/doc.pdf>; rel="alternate"; hreflang="pt" 

3. In Your XML Sitemap

An XML sitemap is simply a record that provides hunt engines with accusation astir the pages connected your site. And it allows you to marque immoderate changes to your hreflang attributes each successful 1 place, truthful you don’t person to update aggregate files each clip you construe a portion of content. 

To get started, you request to adhd a <loc> constituent for each URL. With <xhtml:link> entries for each connection and portion mentation of the page. 

Which means:

If you person 3 versions of a blog post, your sitemap volition person 3 entries related to those pages. One for each URL. And each of those entries volition person 3 identical listings.

If we tally with our archetypal illustration of the English, Spanish, and Portuguese blog, this is what the information of the sitemap for this blog station would look like:

<url>
<loc>https://https://example.com</loc>
<xhtml:link rel="alternate" hreflang="en" 
href="https://example.com" />
<xhtml:link rel="alternate" hreflang="es" 
href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="pt" 
href="https://example.com/pt/" />
</url>
<url>
<loc>https://example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="en" 
href="https://example.com" />
<xhtml:link rel="alternate" hreflang="es" 
href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="pt" 
href="https://example.com/pt/" />
</url>
<url>
<loc>https://example.com/pt/</loc>
<xhtml:link rel="alternate" hreflang="en" 
href="https://example.com" />
<xhtml:link rel="alternate" hreflang="es" 
href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="pt" 
href="https://example.com/pt/" />
</url>

You tin usage the same hreflang generator tool we utilized earlier to make oregon modify hreflang tags successful an XML sitemap. 

Start by entering the URL, language, and state for each version. 

Then prime the ellipse adjacent to “Attributes successful an XML Sitemap” and click “Generate the Hreflang Tags for These URLs.”

Then, transcript the codification and adhd it to your site’s XML sitemap. 

Hreflang Implementation Best Practices

Hreflang tin beryllium tricky to implement. And you tin origin issues with your tract if you usage the attributes incorrectly. 

Follow these champion practices to debar communal hreflang mistakes.

List All Hreflang Attributes for Each Page

According to Google, each related pages request to database each hreflang tags. Including their own.

For example, ideate you person a services leafage successful English, French, and German. 

Each leafage needs a self-referencing hreflang tag. So, the English leafage needs an English hreflang tag, the French leafage needs a French hreflang tag, and the German leafage needs a German hreflang tag. 

If your hreflang attributes don’t notation each the applicable alternate pages, hunt engines whitethorn disregard oregon misinterpret your hreflang tags. Which could impact which mentation of the leafage they service users.

Include Bidirectional Links

Bidirectional links betwixt pages assistance hunt engines find the narration betwixt your pages. And it proves you person power implicit some pages.

So, if you person an English and a French mentation of a page, the English leafage indispensable usage hreflang tags to constituent to the French page. And the French leafage indispensable person hreflang tags that nexus to the English page.

English page:

<https://example.com/en/>; rel="alternate"; hreflang="en", 
<https://example.com/fr/>; rel="alternate"; hreflang="fr"

French page:

<https://example.com/fr/>; rel="alternate"; hreflang="fr",
<https://example.com/en/>; rel="alternate"; hreflang="en"

Without bidirectional links, hunt engines may ignore the tags altogether. And whitethorn not scale your pages for the close languages oregon regions.

Use X-Default Tags

X-default tags bespeak the fallback leafage for users erstwhile the hunt motor doesn’t deem determination to beryllium an due localized mentation to serve. They aren’t mandatory, but Google recommends them. 

To instrumentality an x-default tag, alteration the hreflang property to “x-default” for the URL wherever you privation users to onshore if your tract doesn’t enactment their language. 

Like this (the past line):

<link rel="alternate" href="https://example.com/es/" hreflang="es" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt" />
<link rel="alternate" href="https://example.com/us/" hreflang="en-us" />
<link rel="alternate" href="https://example.com/" hreflang="x-default" />

In the supra example, Google whitethorn nonstop users to “https://example.com/” if they don’t lucifer immoderate of the different connection versions listed.

How to Find and Fix Hreflang Issues

You tin find and hole hreflang issues by regularly auditing your website.

Use Semrush’s Site Audit instrumentality for this.

Start by entering your domain and clicking “Start Audit.” 

Configure your crawl settings, past click “Start Site Audit” erstwhile you’re ready.

After the instrumentality crawls your site, caput to the “Issues” tab. Then, hunt for “hreflang” utilizing the hunt bar. 

You’ll spot a database of each your hreflang conflicts. Click “Why and however to hole it” adjacent to each contented to larn more.

Here are immoderate of the astir communal hreflang issues and however to hole them:

Issues with Hreflang Values

This benignant of informing triggers erstwhile the state oregon connection codes aren’t successful the close format. 

It’s important to hole this contented due to the fact that hunt engines whitethorn disregard hreflang tags with incorrect codes. 

And if they disregard the tag, they whitethorn amusement users the incorrect mentation of your page. Which is atrocious for the idiosyncratic acquisition and your SEO.

Fix this contented by reviewing the hreflang tags successful each affected URL. And marque definite the syntax successful each property follows the close codes: ISO 639-1 for languages and ISO 3166-1 alpha-2 for countries and regions. 

No Self-Referencing Hreflang Attribute

The hreflang property connected each leafage should see a notation to each the pages that service arsenic alternates. Including a notation to itself. 

Fix this contented by reviewing each affected URL and adding a self-referencing hreflang tag to the acceptable of hreflang attributes. 

Issues with Incorrect Hreflang Links

This benignant of informing triggers erstwhile there’s an contented with the nexus successful the hreflang attribute. 

For example, the nexus mightiness constituent to a leafage that’s breached oregon has been redirected. 

If this happens, hunt engines whitethorn disregard your hreflang attributes. 

Fix this contented by reviewing each affected URL and ensuring it points to a valid page. 

Conflicting Hreflang and Canonical URLs

This benignant of contented appears erstwhile an hreflang tag references a non-canonical URL.

A canonical tag is an HTML property that indicates the main mentation of a leafage erstwhile you person duplicate (or near-duplicate) pages. It tells hunt engines which mentation of a leafage is astir authoritative and should look successful hunt results.

So, if your hreflang attributes notation a non-canonical mentation of a peculiar page, it tin confuse hunt engines. And they mightiness disregard the hreflang, the canonical, oregon both.

Fix this contented by going to each affected URL and ensuring your hreflang annotations lucifer the canonical URLs.

Language Mismatch Issues

This contented triggers if you specify a connection successful the hreflang property that doesn’t lucifer the page’s language. 

This tin confuse hunt engines, and your hreflang tags whitethorn beryllium interpreted incorrect oregon ignored completely.

To debar this issue, conscionable guarantee you usage the close hreflang connection codification for each mentation of the page. 

How to Automate Your Hreflang Tag Audits 

Automating your hreflang audits ensures you’ll beryllium notified of immoderate issues earlier they go bigger problems. 

To automate your hreflang audits, acceptable a recurring docket in Site Audit. 

In the apical close country of your Site Audit task from the erstwhile section, click connected the cogwheel symbol. 

Then, scroll down and click the “Schedule” option.

You’ll past spot a pop-up wherever you tin take however often you privation to tally your audit. 

Set it to your preferred time oregon take daily. Then, tick the container to beryllium notified via email. 

And click “Save.” 

New hreflang issues volition amusement successful your dashboard's “International SEO” container aft each crawl. 

Now, you’re acceptable to hole immoderate hreflang implementation issues that popular up. And support your planetary SEO efforts moving smoothly.

Manage and Monitor Your Hreflang Attributes

Implementing hreflang is reasonably straightforward successful galore cases. But a tiny mistake tin confuse hunt engines and pb them to disregard your hreflang attributes completely.

Semrush’s Site Audit instrumentality tin show your tract and archer you erstwhile you person issues with your hreflang tags. So you cognize precisely what to hole earlier it causes large problems.

Make definite your hreflang tags are error-free with Site Audit.