#BlackLivesMatter
AMP
  • websites

Internationalization

Introduction

How to support hreflang and internationalization with AMP. Internationalization and localization of content is an important feature that websites often embrace to provide maximum reach for their content or services.

For static websites, a common site structure technique for addressing this is known as 'hreflang'. Hreflang is a part of the meta data of a website and is used to annotate a page such that crawlers can discover alternative translations of a particular article. Search engines such as Google recognise websites that use hreflang. The hreflang notation is used with the link tag to refer to another document:

<link rel="alternate" hreflang="fr" href="https://www.example.com/path/to/french.html" />

AMP documents can also use the hreflang notation to point crawlers towards other versions of themselves in other languages.

It's important, however, to set up the hreflang relationships among all AMP documents correctly - especially the existing metadata relationships between canonical documents and AMP documents. Below are two examples of how websites might structure their hreflang relationships for canonical and AMP documents across an article.

Example 1: Canonical + AMP

A common site structure pattern is pairing non-AMP canonical documents with AMP documents. The following diagram illustrates how to provide translations for this structure:

In this diagram, there is an English canonical desktop document and a corresponding AMP document. As per the official AMP Project documentation for discovery and distribution the English AMP document must include a link tag to the canonical document. Similarly, the canonical document includes a corresponding link tag to the AMP document.

Additionally, this diagram includes French translations of both the canonical document and the AMP document. Therefore the documents must include link tags with hreflang attributes to connect the various alternative language versions of the canonical and AMP documents. The following rules apply: Every canonical document must have a link tag with rel=amphtml pointing to its matching AMP document in the same language. Every AMP document must have a link tag with rel=canonical pointing to its matching canonical desktop document, again, in the same language. Every canonical document must have a link tag with rel=alternate and an hreflang attribute for each alternative language version of the canonical document. Every AMP document must have a link tag with rel=alternate and an hreflang attribute for each alternative language version of the AMP document.

Therefore, given an article with X language versions of itself (including English) each canonical document would include: 1 link tag with rel=amphtml And X link tags with rel=alternate and the hreflang attribute

View the Example

Example 2: Canonical + Alternate + AMP

The next example is an expanded version of the first example. This example includes 3 versions of any given document in a given language: A canonical desktop document An alternate mobile site document * An AMP document

The following diagram illustrates how to provide translations for this structure:

The same rules from the previous example apply in this example with the addition of the following rules: Every canonical document must have a link tag with rel=alternate and no hreflang attribute pointing to its matching alternate mobile document in the same language. Every alternate mobile document must have a link tag with rel=canonical pointing to its matching canonical desktop document, again, in the same language. * Every alternate mobile document must have a link tag with rel=alternate and an hreflang attribute for each alternative language version of the alternate mobile document.

View the Example

자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동
설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기