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 上的示例