Podstawy przyspieszonych stron mobilnych

1. Przegląd

Z tego kursu dowiesz się, jak tworzyć przyspieszone strony mobilne, czyli AMP. Aby to osiągnąć, wdrożysz prostą stronę internetową z artykułem informacyjnym, która jest zgodna ze specyfikacjami AMP i zawiera kilka typowych funkcji internetowych powszechnie używanych w mobilnych witrynach informacyjnych.

Czego się nauczysz

• Jak zgodność ze standardami AMP ułatwia przeglądanie stron użytkownikom urządzeń mobilnych.
• Podstawowe cechy witryny AMP.
• Ograniczenia AMP.
• W jaki sposób komponenty sieciowe AMP pomagają rozwiązać często spotykane problemy w witrynach z wiadomościami.
• Jak zweryfikować AMP.
• Jak przygotować strony AMP pod kątem wyszukiwarki Google.

Czego potrzebujesz

• Przykładowy kod
• Python (najlepiej 2.7) lub rozszerzenie Chrome 200 OK Web Server
• Chrome (lub równoważna przeglądarka, która może sprawdzać konsolę JavaScript)
• Edytor kodu (np. Atom, Sublime, Notepad++)

2. Pobieranie przykładowego kodu

Możesz pobrać cały przykładowy kod na komputer:

Pobierz plik ZIP

…lub sklonuj repozytorium GitHub z wiersza poleceń:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Pobierzesz plik ZIP zawierający kilka przykładowych plików zasobów i stronę początkową article.html.

Rozpakuj folder i przejdź do katalogu za pomocą wiersza poleceń na komputerze.

3. Uruchamianie przykładowej strony

Aby przetestować naszą przykładową stronę, musimy uzyskać dostęp do plików z serwera WWW. Istnieje kilka sposobów utworzenia tymczasowego lokalnego serwera WWW na potrzeby testowania. W tym module przedstawiamy instrukcje do 3 dostępnych opcji:

• Aplikacja Google Chrome „Web Server for Chrome” – jest to zalecane rozwiązanie, ponieważ jest najprostsze i działa na różnych platformach. Uwaga: ta metoda wymaga zainstalowania Google Chrome.
• Hosting Firebase – alternatywna opcja, jeśli chcesz poznać naszą nową platformę hostingu zasobów statycznych „Hosting Firebase”. Domyślnie włączone jest SSL.
• Lokalny serwer HTTP w Pythonie – wymaga dostępu do wiersza poleceń.

Uwaga: w środowiskach produkcyjnych zdecydowanie zalecamy korzystanie z protokołu HTTPS. HTTPS ma wiele zalet, nie tylko w zakresie bezpieczeństwa, ale też SEO. Więcej informacji na ten temat znajdziesz tutaj.

Opcja 1. Web Server for Chrome

Aplikację „Web Server for Chrome” znajdziesz w Chrome Web Store pod tym linkiem.

Po zainstalowaniu aplikacji Chrome musisz wskazać jej konkretny folder, klikając przycisk „Wybierz folder”. W tym module wybierz folder, w którym rozpakowano przykładowe pliki.

Dodatkowo zaznacz opcję „Automatycznie wyświetlaj plik index.html” i ustaw port na „8000”. Aby te zmiany zaczęły obowiązywać, musisz ponownie uruchomić serwer WWW.

Dostęp do tego adresu URL możesz uzyskać:

http://localhost:8000/article.html

Jeśli powyższy adres URL wczyta się prawidłowo, możesz przejść do następnego kroku.

Opcja 2. Hosting Firebase

Jeśli chcesz wypróbować nasz nowy hosting statycznych stron internetowych w Firebase, postępuj zgodnie z instrukcjami dostępnymi tutaj, aby wdrożyć witrynę AMP pod adresem URL hostingu Firebase.

Hosting Firebase to dostawca hostingu statycznego, którego możesz używać do szybkiego wdrażania i hostowania witryny statycznej oraz jej zasobów, w tym plików HTML, CSS i JavaScript. Użytkownicy korzystają z mniejszych opóźnień, ponieważ statyczne treści są buforowane w sieci dostarczania treści (CDN) z punktami obecności (PoP) rozmieszczonymi na całym świecie.

Hosting Firebase zawsze korzysta z protokołu SSL, dlatego świetnie sprawdza się w przypadku AMP i ogólnie w internecie. Jeśli chcesz skupić się wyłącznie na AMP, zignoruj tę opcję.

Opcja 3. Serwer HTTP w Pythonie

Jeśli nie używasz Chrome lub masz problem z zainstalowaniem rozszerzenia do Chrome, możesz też użyć Pythona z wiersza poleceń, aby uruchomić lokalny serwer WWW.

Aby uruchomić wbudowany serwer HTTP Pythona z wiersza poleceń, wykonaj to polecenie:

python -m SimpleHTTPServer

i otwórz ten adres URL:

http://localhost:8000/article.html

4. Tworzenie zwykłej strony HTML

W pobranym pliku ZIP znajdziesz plik o nazwie article.html. To artykuł, dla którego tworzymy odpowiednik w AMP.

Skopiuj kod z przykładowego pliku article.html i wklej go do nowego pliku. Zapisz ten plik jako article.amp.html.

Uwaga: nie musisz nazywać plików AMP jako .amp.html. Pliki AMP mogą mieć dowolne rozszerzenie. Wydawcy często odróżniają strony AMP od ich wersji kanonicznych, używając parametrów w adresie URL. Np. http://publisher.com/article.html?amp

Plik article.amp.html powinien teraz wyglądać tak:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Jest to celowo uproszczona strona z typowymi statycznymi elementami artykułu informacyjnego: CSS, JavaScript i tagiem obrazu.

Nasza wersja AMP artykułu jest obecnie tylko kopią oryginalnego artykułu. Przekonwertujmy go na AMP. Na początek dodamy plik biblioteki JavaScript AMP i sprawdzimy, jakie błędy pojawią się po włączeniu walidatora AMP.

Aby uwzględnić bibliotekę AMP, dodaj ten wiersz na końcu tagu <head>:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Teraz wczytajmy nową stronę article.amp.html w przeglądarce, korzystając z tego linku, i otwórzmy konsolę programisty w Chrome, klikając Menu > More Tools > Developer Tools:

Teraz sprawdź dane wyjściowe JavaScriptu w konsoli dewelopera. Upewnij się, że wybrana jest karta Konsola:

Powinien się pojawić ten dziennik:

Powered by AMP ⚡ HTML

Aby włączyć walidator AMP, dodaj do adresu URL ten identyfikator fragmentu:

#development=1

Na przykład:

http://localhost:8000/article.amp.html#development=1

Konieczne może być ręczne odświeżenie strony w przeglądarce. Możesz ręcznie odświeżyć stronę w przeglądarce, naciskając ten przycisk:

Powinno pojawić się kilka błędów weryfikacji:

Chociaż AMP to skrót od Accelerated Mobile Pages (przyspieszone strony mobilne), można go używać do tworzenia elastycznych stron, które dobrze się wyświetlają na ekranach o różnych rozmiarach. Więcej informacji znajdziesz w sekcji Elastyczne projektowanie stron internetowych na stronie Google Developers.

Symulowanie działania urządzenia mobilnego w Narzędziach deweloperskich w Chrome. Kliknij ikonę urządzenia mobilnego:

Teraz wybierz urządzenie mobilne (np. „Pixel 2”) z tego menu:

W przeglądarce powinna pojawić się symulowana rozdzielczość urządzenia mobilnego, np. taka:

Teraz możemy zacząć pracę. Przyjrzyjmy się po kolei błędom weryfikacji i sprawdźmy, jak odnoszą się one do AMP.

5. Rozwiązywanie błędów weryfikacji

Wymagany zestaw znaków

Zaczniemy od naprawienia tego błędu:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Aby tekst był wyświetlany prawidłowo, AMP wymaga ustawienia zestawu znaków dla strony. Musi być też pierwszym elementem podrzędnym tagu head. Dzieje się tak, aby uniknąć ponownej interpretacji treści dodanych przed tagiem meta charset.

Dodaj ten kod jako pierwszy wiersz tagu head:

<meta charset="utf-8" />  

Zapisz plik, załaduj ponownie stronę i sprawdź, czy błąd już się nie pojawia.

Pliki AMP muszą zawierać tag <link rel=canonical>.

Każdy dokument AMP musi zawierać link do strony kanonicznej. Dodajmy więc link do oryginalnego artykułu.

Dodaj ten kod pod tagiem <meta charset="utf-8" />:

<link rel="canonical" href="/article.html">

Ważne: można utworzyć samodzielną stronę AMP, która nie ma strony kanonicznej. W tym scenariuszu link kanoniczny jest nadal wymagany, ale powinien prowadzić do samego artykułu AMP:

<link rel="canonical" href="/article.amp.html">

W razie potrzeby uruchom ponownie serwer i załaduj stronę. Chociaż nadal jest wiele błędów do naprawienia, błąd „Pliki AMP muszą zawierać tag <link rel=canonical>” już nie występuje.

Wymagany atrybut AMP

AMP wymaga atrybutu w głównym elemencie HTML strony, aby zadeklarować ją jako dokument AMP:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Możesz to rozwiązać, dodając atrybut ⚡ do tagu <html> w ten sposób:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Teraz załaduj ponownie stronę i sprawdź, czy oba błędy zniknęły.

Uwaga: chociaż zalecamy używanie symbolu ⚡, zamiast atrybutu ⚡ można też użyć atrybutu amp. Znacznik będzie wyglądać tak:

<!doctype html>

<html amp lang="en">

<head>

...

Wymagany widoczny obszar

Teraz zajmiemy się tym błędem:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP wymaga zdefiniowania elementów width i minimum-scale w przypadku obszaru wyświetlania. Wartości te muszą być zdefiniowane odpowiednio jako device-width i 1. Widoczny obszar to popularny tag umieszczany w sekcji <head> strony HTML.

Najlepiej to naprawić, dodając ten fragment kodu HTML do tagu <head>. Dodaj ten tag meta:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Są to jedyne prawidłowe wartości parametrów width i minimum-scale w AMP. Definiowanie initial-scale nie jest obowiązkowe, ale jest powszechnie stosowane w przypadku programowania stron mobilnych i zalecane. Więcej informacji o obszarze widoku i projektowaniu responsywnym znajdziesz tutaj.

Podobnie jak wcześniej załaduj ponownie stronę i sprawdź, czy błąd zniknął.

Zewnętrzne arkusze stylów

Ten błąd jest związany z używaniem arkuszy stylów:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

W szczególności dotyczy to tego tagu linku do arkusza stylów w naszym tagu <head>:

<link href="base.css" rel="stylesheet" />

Problem polega na tym, że jest to odwołanie do zewnętrznego arkusza stylów. Aby maksymalnie skrócić czas ładowania dokumentów AMP, deweloperzy nie mogą umieszczać w nich zewnętrznych arkuszy stylów. Zamiast tego wszystkie reguły arkusza stylów muszą być zawarte w treści dokumentu AMP.

Dlatego usuń tag linku w sekcjach <head> i zastąp go tagiem wbudowanym, np. takim:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Zawartość tagu stylu powinna być skopiowana bezpośrednio z pliku base.css w katalogu projektu. Atrybut amp-custom w tagu stylu jest obowiązkowy.

Odśwież stronę i sprawdź, czy błąd arkuszy stylów zniknął.

Uwaga: wymagane jest nie tylko stylizowanie wbudowane, ale też limit rozmiaru pliku wynoszący 50 kilobajtów dla wszystkich informacji o stylu. Zalecamy używanie preprocesorów CSS, takich jak SASS, i zmniejszanie rozmiaru plików CSS przed wstawieniem ich w kodzie stron.

Ważne: w całym dokumencie AMP możesz mieć tylko jeden tag stylu. Jeśli Twoje artykuły odwołują się do kilku zewnętrznych arkuszy stylów, musisz zebrać je w jeden zestaw reguł. Więcej informacji o tym, które reguły CSS są prawidłowe w dokumentach AMP, znajdziesz na tej stronie dokumentacji.

JavaScript firmy zewnętrznej

Arkusz stylów można stosunkowo łatwo przekształcić za pomocą AMP, ale w przypadku JavaScriptu nie jest to takie proste.

The tag 'script' is disallowed except in specific forms.

W AMP skrypty generowane przez użytkowników są niedozwolone. Skrypty w AMP są dozwolone tylko wtedy, gdy spełniają 2 główne wymagania:

• Cały kod JavaScript musi być asynchroniczny, tzn. tag skryptu musi zawierać atrybut async.
• Można dołączyć tylko bibliotekę AMP i komponenty AMP.

Skutecznie wyklucza to użycie całego kodu JavaScript firm zewnętrznych. Wyjątkiem jest JavaScript innej firmy, który może być używany w elementach iframe.

Spróbuj otworzyć zewnętrzny plik base.js. Co widzisz? Plik nie powinien zawierać żadnego kodu JavaScript, a jedynie komentarz z informacjami, np. takimi:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Ponieważ ten zewnętrzny plik JavaScript nie jest funkcjonalnym komponentem naszej witryny, możemy bezpiecznie całkowicie usunąć odwołanie do niego.

Usuń z dokumentu to zewnętrzne odwołanie do JavaScriptu:

<script type="text/javascript" src="base.js"></script>

Teraz odśwież stronę i sprawdź, czy błąd skryptu zniknął.

Ważne: dołączanie JavaScriptu za pomocą ramki iframe powinno być traktowane jako ostateczność. W miarę możliwości funkcje JavaScriptu należy zastępować wbudowanymi komponentami AMP. W następnej sekcji omówimy pierwszy komponent AMP.

Uwaga: wyjątkiem są skrypty generowane przez użytkowników, w których atrybut type ma wartość application/ld+json lub application/json. Służą one do dodawania metadanych do strony i konfigurowania komponentów AMP. W przyszłości możemy dodać inne skrypty niewykonywalne.

Powtarzalny kod CSS AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Kolejne błędy dotyczą 2 brakujących tagów w tagu <head>. Każdy dokument AMP musi zawierać te tagi:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Dodaj powyższy fragment kodu na końcu tagu <head> w dokumencie.

Pierwszy tag sprawia, że zawartość strony jest niewidoczna, dopóki biblioteka JavaScript AMP nie zaktualizuje tagu body, aby ponownie stał się widoczny po przygotowaniu zawartości strony do renderowania. AMP robi to, aby zapobiec wyświetlaniu treści strony, które nie zostały jeszcze ostylowane. Dzięki temu użytkownik ma wrażenie, że strona wczytuje się natychmiast, ponieważ jej zawartość pojawia się od razu, a wszystko, co znajduje się w części strony widocznej na ekranie, jest renderowane razem. Drugi tag przywraca tę logikę, jeśli JavaScript jest wyłączony w przeglądarce.

Tag amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP ma komponent internetowy zaprojektowany specjalnie do zastępowania tagu obrazu, o nazwie amp-img:

<amp-img src="mountains.jpg"></amp-img>

Spróbuj dodać powyższy tag amp-img i ponownie uruchomić walidator. Powinno pojawić się kilka nowych błędów:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

Dlaczego amp-img spowodował kolejny błąd? Ponieważ tag amp-img nie jest bezpośrednim zamiennikiem tradycyjnego tagu HTML img. W przypadku korzystania z elementu amp-img obowiązują dodatkowe wymagania.

System układu

Ten błąd informuje, że element amp-img nie obsługuje typu układu „container”. Jedną z najważniejszych koncepcji w projekcie AMP jest ograniczenie liczby zmian w DOM wymaganych do renderowania stron internetowych.

Aby ograniczyć ponowne renderowanie DOM, AMP zawiera system układu, który zapewnia, że układ strony jest jak najbardziej sztywny jak najwcześniej w cyklu życia pobierania i renderowania strony.

System układu umożliwia pozycjonowanie i skalowanie elementów na stronie na różne sposoby – stałe wymiary, projektowanie elastyczne, stała wysokość i inne.

W naszym przypadku system układu wywnioskował, że układ amp-img jest typu container. Typ kontenera jest jednak przeznaczony dla elementów, które zawierają elementy podrzędne, i jest niezgodny z tagiem amp-img, co jest przyczyną tego błędu.

Dlaczego typ kontenera został wywnioskowany? Nie określiliśmy atrybutu wysokości dla tagu amp-img. W HTML-u można ograniczyć ponowne wczytywanie, zawsze określając stałą szerokość i wysokość elementów na stronie. W przypadku AMP zalecamy zdefiniowanie szerokości i wysokości elementów amp-img, ponieważ dzięki temu AMP może określić współczynnik proporcji elementu.

Ustaw szerokość i wysokość w ten sposób:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Odśwież stronę i sprawdź walidator – nie powinno już być żadnych błędów. Obraz nie wygląda jednak zbyt dobrze, ponieważ jest nieporęcznie umieszczony na stronie. Byłoby świetnie, gdybyśmy mogli elastycznie skalować obraz, aby rozciągał się i dopasowywał do strony niezależnie od rozmiaru ekranu.

Co ciekawe, zdefiniowanie szerokości i wysokości nie ogranicza elementu do całkowicie stałego rozmiaru. System układu AMP może pozycjonować i skalować element na różne sposoby, znając jego format obrazu. Atrybut układu informuje AMP, jak chcesz pozycjonować i skalować element.

Możesz to osiągnąć, ustawiając atrybut układ na responsive:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Voila! Obraz ma prawidłowy format i dopasowuje się do szerokości ekranu.

Gotowe!

Dokument AMP powinien teraz wyglądać mniej więcej tak:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Odśwież stronę i sprawdź dane wyjściowe konsoli. Powinien wyświetlić się ten komunikat:

AMP validation successful.

Najczęstsze pytania

• Co to jest przeformatowanie DOM?
• Co się stanie, jeśli atrybut układu nie jest zdefiniowany?
• Co się stanie, jeśli szerokość i wysokość nie są zdefiniowane?

6. Kanoniczne adresy URL, metadane i wyszukiwanie

W ramach nowej inicjatywy AMP w interfejsie wyników wyszukiwania Google będą wyróżniane prawidłowe dokumenty AMP w nowym interfejsie karuzeli. Ten interfejs zapewnia lepsze wrażenia użytkownikom, którzy szukają artykułów w internecie. Aby ta funkcja działała jak najlepiej, strony muszą spełniać określone kryteria, które wykraczają poza pozytywny wynik weryfikacji AMP.

Ten krok zawiera omówienie wszystkich wymagań.

Łączenie stron kanonicznych i dokumentów AMP

AMP ma na celu przyspieszenie działania internetu. Chociaż na początku projekt koncentrował się na treściach statycznych, dodanie komponentów takich jak amp-bind sprawia, że nadaje się on do wielu różnych witryn, np. wydawców wiadomości, sklepów internetowych, stron poświęconych podróżom, blogów i innych.

Warto jednak poznać pełny zakres tego, jak AMP powinien być umieszczony w strukturze witryny. Chociaż AMP może być używany do tworzenia całych witryn, wielu wydawców woli stosować go w połączeniu z innymi technologiami. W takim przypadku dokumenty AMP są generowane jako uzupełnienie zwykłych artykułów HTML, które wydawca hostuje w swojej witrynie.

Uwaga: więcej informacji o używaniu AMP do tworzenia całej witryny, czyli kanonicznych witryn AMP, znajdziesz w kursie „Atrakcyjne, interaktywne i kanoniczne strony AMP”.

Linkowanie kanoniczne na zwykłych stronach HTML to popularna technika deklarowania, która strona powinna być uznawana za preferowaną, gdy wiele stron zawiera te same treści. Dokumenty AMP mogą być generowane tak, aby były dostępne obok tradycyjnych stron z artykułami w witrynie. W takim przypadku tradycyjne strony HTML powinny być traktowane jako strony „kanoniczne”.

W dokumencie AMP zrobiliśmy już pierwszy krok w tym kierunku, dodając w sekcji <head> tag linku prowadzący z powrotem do strony kanonicznej:

<link rel="canonical" href="/article.html">

Następnym krokiem jest połączenie artykułu kanonicznego ze stroną AMP. W tym celu dodaj tag <link rel="amphtml"> do sekcji <head> artykułu kanonicznego.

Dodaj ten kod do sekcji <head> w pliku article.html:

<link rel="amphtml" href="/article.amp.html">

Ten diagram ilustruje kierunki tagów linków:

Aby robot wyszukiwarki Google mógł poznać relację między zwykłym dokumentem kanonicznym HTML a dokumentem AMP, musisz skonfigurować to dwukierunkowe linkowanie. Jeśli nie podasz linków, robot indeksujący nie będzie wiedzieć, które artykuły są „wersjami AMP” zwykłych dokumentów HTML. Dzięki wyraźnemu podaniu tych linków unikamy niejasności.

Metadane wyszukiwarki Schema.org

Kolejnym wymaganiem, które muszą spełniać dokumenty AMP, aby pojawiać się w nowym interfejsie karuzeli, jest zgodność ze specyfikacją metadanych wyszukiwarki Schema.org. Te metadane są umieszczane w tagu <head> w dokumentach za pomocą tagu skryptu typu application/ld+json.

Dodaj ten kod na końcu sekcji <head> dokumentu AMP:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Odśwież stronę w przeglądarce i sprawdź, czy nie pojawiły się żadne błędy weryfikacji AMP.

Teraz otwórz Narzędzie do testowania uporządkowanych danych w nowym oknie przeglądarki i kliknij „Testuj moje znaczniki”. Następnie kliknij kartę „Fragment kodu”, skopiuj pełny kod źródłowy ze strony AMP i wklej go w panelu edytora tekstu narzędzia do weryfikacji, a potem kliknij „Uruchom test”:

Na stronie powinien pojawić się tekst podobny do tego:

Ważne: upewnij się, że wyświetla się zielony tekst „Wszystko w porządku”. Tylko strony AMP, które przejdą tę weryfikację, będą wyświetlane w karuzeli AMP.

Uwaga: treść powinna być zawsze taka sama. W przypadku artykułów informacyjnych użyj typu „NewsArticle”. Nagłówek powinien być zgodny z tytułem artykułu. Obraz odnosi się do baneru powitalnego artykułu.

Aby wyświetlać się w nowej karuzeli w wyszukiwarce Google w przypadku artykułów z wiadomościami w formacie AMP, musisz spełnić te wymagania:

1. Sprawdź, czy dokument AMP przechodzi weryfikację.
2. Odwołuj się do dokumentu AMP ze strony HTML za pomocą tagu <link> i odwrotnie.
3. Dodaj powyższy tag metadanych wyszukiwarki.

Więcej informacji znajdziesz na stronie dotyczącej wykrywania stron.

7. Gratulacje!

Ukończono ćwiczenie z programowania i poznano wiele podstawowych koncepcji dokumentów AMP.

Mamy nadzieję, że nie tylko rozumiesz, jak te koncepcje i funkcje można wdrożyć w dokumencie AMP, ale także dlaczego AMP został zaprojektowany w taki sposób.

Poniżej znajdziesz dodatkowe tematy i linki, które mogą Ci pomóc w dalszym rozwoju.

• Wszystko o wyświetlaniu strony
• Niedozwolone tagi HTML
• Ograniczone reguły CSS i animacje
• Więcej informacji o elementach iframe
• Sieć CDN AMP
• Lista dostępnych komponentów AMP