Główną zaletą AMP nie jest to, że dzięki niemu strony działają szybciej, tylko to, że tę szybkość uzyskujemy za pomocą standardu, który można weryfikować. W ten sposób serwisy takie jak Twitter, Instagram czy wyszukiwarka Google, mogą w coraz bardziej interesujący sposób oferować użytkownikom swoje treści.

Jak mogę sprawdzić, czy moja strona AMP jest prawidłowa?

Dokument AMP można sprawdzić na kilka sposobów. Każdy z nich da ten sam efekt, możesz więc korzystać z tego, który najbardziej Ci odpowiada.

Poza przeprowadzeniem weryfikacji AMP warto też upewnić się, czy Twój dokument AMP jest wykrywalny na platformach zewnętrznych.

Developer Console w przeglądarce

Narzędzie do weryfikacji stron AMP jest dołączane do biblioteki AMP JS, jest więc dostępne na każdej stronie AMP. Aby przeprowadzić weryfikację:

  • Otwórz stronę AMP w przeglądarce.
  • Dołącz do adresu URL atrybut „#development=1”, na przykład http://localhost:8000/released.amp.html#development=1
  • Otwórz konsolę Chrome DevTools i sprawdź błędy weryfikacji.

Błędy Developer Console będą wyglądać mniej więcej tak:

Interfejs internetowy

Narzędzia do weryfikacji stron AMP można użyć w postaci interfejsu internetowego na stronie validator.ampproject.org. Interfejs ten pokazuje błędy wyświetlone w tekście obok źródła HTML strony. Jest to edytor interaktywny: zmiany w źródle html powodują automatyczną, ponowną weryfikację.

Rozszerzenie do przeglądarki

Narzędzie do weryfikacji stron AMP można otworzyć bezpośrednio z przeglądarki za pomocą odpowiedniego rozszerzenia. Podczas przeglądania rozszerzenie automatycznie zweryfikuje każdą odwiedzoną stronę AMP, wyświetlając informacje weryfikacyjne za pomocą kolorowych ikon.

W przypadku wykrycia błędów na stronach AMP pojawi się czerwona ikona rozszerzenia pokazująca liczbę znalezionych błędów.
Gdy rozszerzenie nie wykryje błędów na stronie AMP, ikona będzie zielona i wyświetli liczbę ostrzeżeń, jeśli jakieś będą.
Gdy strona nie jest stroną AMP, ale wyświetla informację o dostępnej wersji AMP, ikona ma postać linku w kolorze niebieskim. Kliknięcie rozszerzenia spowoduje przekierowanie przeglądarki do wersji AMP.

Rozszerzenie narzędzia do weryfikacji stron AMP do przeglądarek ChromeOpera.

Narzędzie wiersza poleceń

Warunkiem wstępnym może być konieczność zainstalowania w systemie platformy Node.js z menedżerem pakietów npm.

Aby zainstalować narzędzie wiersza poleceń weryfikatora stron AMP HTML, wpisz npm install -g amphtml-validator.

A teraz zweryfikujemy istniejącą stronę AMP HTML.

$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS

Jak można się było spodziewać, ta strona zawiera prawidłowy kod AMP HTML. Sprawdźmy zatem stronę z błędami: several_errors.html. Aby uruchomić polecenie amphtml-validator, można podać adres URL strony albo ścieżkę do pliku zapisanego lokalnie. Pobierz i zapisz do pliku stronę several_errors.html, i uruchom:

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...

Format komunikatów o błędach składa się z nazwy pliku, linii, kolumny i komunikatu, po którym często następuje link do materiałów o AMP HTML. Niektóre edytory, np. Emacs (poszukaj polecenia kompilacji oraz trybu kompilacji), mogą interpretować ten format i umożliwić Ci przechodzenie bezpośrednio do błędów w pliku oryginalnym.

Dobrym punktem początkowym w tworzeniu własnej strony AMP jest minimum_valid_amp.html:

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

Narzędzie wiersza polecenia oferuje dodatkowe funkcje, w tym wyłączanie koloru, wydruk składni JSON czy uruchamianie określonej wersji weryfikatora JavaScriptu (domyślnie uruchamiany jest ostatnio opublikowany skrypt).

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

Co się stanie, jeśli moja strona okaże się nieprawidłowa?

Narzędzie do weryfikacji stron AMP ułatwia nie tylko tworzenie kodu. Korzystają z niego również platformy takie jak Twitter czy Google, integrujące Twoje strony AMP we własnych treściach i wynikach wyszukiwania. Co więcej, takie platformy zwykle nie żądają stron bezpośrednio z Twojego serwera, tylko korzystają z pamięci podręcznej Google AMP Cache – darmowej usługi przechowującej Twoje strony w pamięci podręcznej – co umożliwia jeszcze szybsze wczytywanie ich w dowolnym miejscu świata.

Jeśli usługa weryfikacji AMP znajdzie jakąś nieprawidłowość na Twojej stronie, nie zostanie ona wykryta przez witryny firm zewnętrznych i nie będzie przez nie rozpowszechniana. Nie pojawi się również w pamięci podręcznej Google AMP Cache. W takim przypadku nie tylko utracisz korzyści płynące z korzystania z pamięci podręcznej. Prawdopodobnie Twoja strona nie wyświetli się w wielu miejscach. Byłaby to wielka szkoda, dopilnujmy więc, by tak się nie stało.

Jak naprawić błędy wynikające ze sprawdzania poprawności kodu?

Większość błędów zgłoszonych w ramach weryfikacji można łatwo naprawić. Weźmy na przykład ten tag HTML:

<img src="cat.png">

Generuje on błąd weryfikacji AMP zgłaszany przez narzędzia:

  • Developer Console w przeglądarce

  • Interfejs internetowy

  • Rozszerzenie do przeglądarki

Każde z tych narzędzi podaje kilka informacji:

  1. Lokalizacja (linia i kolumna) w dokumencie HTML, w której wystąpił błąd. W niektórych interfejsach tę informację można kliknąć, by ją podświetlić w dokumencie. W tym przypadku problem pojawił się w linii 11, w kolumnie 2
  2. Linia tekstu opisującego błąd. W tym przypadku tekst wskazuje, że używamy tagu <img>, a powinniśmy używać tagu <amp-img>.
  3. Link do odpowiedniego dokumentu z informacjami o błędzie. W tym przypadku dokumentacja dotyczy tagu <amp-img>. Nie wszystkie błędy generują linki do dokumentacji.

Czytając uważnie specyfikację, zauważamy, że w kodzie znajduje się tag <img> zamiast tagu <amp-img>.

Aby poznać pełną listę potencjalnych błędów, zapoznaj się z przewodnikiem po błędach weryfikacji AMP. Jeśli po dokładnym sprawdzeniu, wciąż masz problem, zadaj pytanie – postaramy się pomóc.