フレフラン

What is Hreflang?

Hreflang is an attribute that tells search engines the language and regional version of a webpage to serve visitors. It is specified using the hreflang 属性。

For example, when a visitor living in an English-speaking country like the United States searches for “Apple’s website,” Google returns a results page of Apple’s website in the English language.

However, when a visitor residing in France searches for Apple’s website, Google returns the Apple website intended for French speakers living in France.

Apple can do this because they included relevant hreflang attributes to their site. Specifically, their site contains the HTML code indicating the webpage version intended for English-speaking visitors residing in the United States.

Similarly, it contains the code specifying the webpage intended for French-speaking visitors living in France.

Importance of the Hreflang Attribute

The hreflang attribute is used by sites that translate their content into multiple languages or publish content targeted at audiences within a specific country.

This is important for international SEO, which refers to the search engine optimization techniques bloggers use to ensure their content is accessible to visitors, regardless of their country or language.

For example, let us assume we have a website that caters to English, French, and Spanish-speaking visitors. Our homepage would contain the hreflang attributes below:

<link rel="alternate" hreflang="en" href="https://yourdomain.com/" />
<link rel="alternate" hreflang="fr" href="https://yourdomain.com/fr/" />
<link rel="alternate" hreflang="es" href="https://yourdomain.com/es/" /> 
<link rel="alternate" hreflang="x-default" href="https://yourdomain.com/" />

This attribute tells search engines to show the webpage at:

• yourdomain.com to English-speaking visitors
• yourdomain.com/fr/ to French-speaking visitors
• yourdomain.com/es/ to Spanish-speaking visitors
• yourdomain.com to visitors with unclear language preferences and visitors who speak languages other than English and French

Such practices improve the user experience for visitors, prevent duplicate content issues, and enhance the site’s ranking on international search results pages. Without the hreflang attribute, search engines may treat language and country-specific pages as duplicates and may refuse to index them.

How to Specify the Hreflang Attribute

The hreflang tag contains the following:

• The language code
• The language and country code
• x-default

1 Language Code

You can specify the hreflang attribute using the language code specified in ISO 639-1 format. The language code must be in two letters, as three-letter language codes are not supported. For example:

• hreflang="en" for English
• hreflang="fr" for French
• hreflang="de" ドイツ語用

2 Language and Country Code

You can also specify the hreflang attribute using a combination of the language and country code. In this case, you will specify the language in ISO 639-1 format, while the country will be in ISO 3166-1 alpha-2 country code format.

The language and country codes must be in two-letter formats and should be separated by a hyphen. Three-letter ISO codes are not supported. For example:

• hreflang="en-us" for English speakers in the United States
• hreflang="fr-fr" for French speakers in France
• hreflang="fr-ca" for French speakers in Canada

3 X-Default

You can also set the hreflang attribute to x-default (hreflang="x-default").  This hreflang attribute indicates the webpage is language and region-neutral. Such a webpage is displayed when:

• The visitor’s language or country is unknown
• The visitor’s language or country is not among the ones already specified by other hreflang attributes

How to Add the Hreflang Attribute to Your Site

There are multiple methods of adding the hreflang attribute to your site. However, three common methods include using the HTML code, HTTP header, or the XML sitemap. Whichever one you use is up to you. Just make sure to only use one method to avoid conflict.

1 HTML Code

You can add the hreflang attribute to the link <link> tag in the head <head> tag of your page’s HTML code. This is the most popular method of adding the hreflang attribute to a page and is commonly used on static sites.

<head>
   <link rel="alternate" hreflang="en-us" href="https://yourdomain.com/us/" />
   <link rel="alternate" hreflang="fr-fr" href="https://yourdomain.com/fr/" />
   <link rel="alternate" hreflang="x-default" href="https://yourdomain.com/" />
</head>

2 HTTP Headers

You can add the hreflang attribute to the リンク header of the page’s HTTP header. This method is usually used for dynamically generated webpages and non-HTML files like images, videos, and PDFs.

リンク: <https://yourdomain.com/us/>; rel="alternate"; hreflang="en-us",
      <https://yourdomain.com/fr/>; rel="alternate"; hreflang="fr-fr"
      <https://yourdomain.com/>; rel="alternate"; hreflang="x-default"

3 XMLサイトマップ

You can also add the hreflang attribute to your XML sitemap. This method is quite common on large sites as it centralizes your hreflang data in one place. It is also scalable and easy to maintain.

<url>
  <loc>https://yourdomain.com/us/</loc>
  <xhtml:リンク rel="alternate" hreflang="en-us" href="https://yourdomain.com/us/" />
  <xhtml:リンク rel="alternate" hreflang="fr-fr" href="https://yourdomain.com/fr/" />
  <xhtml:リンク rel="alternate" hreflang="x-default" href="https://yourdomain.com/" />
</url>

Hreflang Attribute Best Practices

The hreflang attribute is a crucial aspect of international SEO. It can also have SEO consequences when executed improperly. So, to get the most out of it, it is recommended to follow the best practices listed below.

1 Add a Hreflang Attribute to All Related Pages

Make sure to include a hreflang attribute on all regional and language-specific pages. Each page should contain its own hreflang attribute (called self-referencing) along with the hreflang attribute of its sister pages.

For example, if you have a hreflang page for English and French speakers, the French page should contain the hreflang attribute of the French, English, and default pages. Similarly, the English and default pages should contain the hreflang attributes of the French, English, and default pages.

Hreflang pages that do not self-reference themselves or other hreflang pages can confuse search engines and cause SEO and usability issues. 

2 Use the Correct Language and Country ISO Code

Always use the correct ISO codes for your hreflang attributes. That is, use the ISO 639-1 format for language codes (e.g., fr for French) and the ISO 3166-1 alpha 2 format for country codes (e.g., fr-ca for French speakers residing in Canada).

Ensure to only use the two-letter ISO code as a three-letter code like eng (for English) or fre (for French) will not work. Incorrect, nonexistent, and poorly formatted ISO codes will not work either.

3 Ensure the Content Matches the Hreflang Attribute

The hreflang attribute must match the page’s content. For example, a webpage containing the en language attribute must be written in English, while one with the fr attribute must be in French. 

4 Use Consistent Hreflang Attributes

You can specify your hreflang attribute using the language (e.g., en) or the language and region (e.g., en-us). Keep it consistent. Stick to one method and do not use both on your pages.

5 Include an X-Default Hreflang Attribute

ザ x-default value helps to specify the default page for visitors that cannot be matched with a language or country. Ensure to include it in your attributes so that such visitors can access your content.

6 Use a Single Hreflang Attribute Method

While there are multiple methods to add the hreflang, such as the HTML head tag, HTTP header, and XML sitemap, be sure to use only one method; otherwise, it may lead to conflict and potential SEO and usability issues. 

7 Ensure All Hreflang URLs Return a 200 OK Status Code

Every URL with a hreflang attribute must return a valid and accessible page. That is, they must return a 200 OK status code. They must not return 404 Not Found pages.

8 Only Use Absolute URLs With Hreflang Attributes

Hreflang attributes do not support relative URLs. So, a URL like /en/ will not work. Instead, always use the absolute (full) URL. For example, https://yourdomain.com/en/. 

9 Ensure to Update Your Hreflang Attributes

Update your hreflang attributes as you add or remove pages or stop supporting specific languages and countries. For example, if you add a new page for French speakers, then update the hreflang attributes on all related pages.

Similarly, if you stop supporting Spanish speakers, make sure to remove its hreflang attribute from all sister pages. This ensures search engines can always identify your existing or removed pages and treat them appropriately.