Rozwiązywanie błędów walidacji
W tej sekcji przeanalizujemy i rozwiążemy błędy walidacji naszej strony AMP. Pamiętaj, że w Twojej konsoli błędy mogą być wyświetlane w innej kolejności.
Dodanie zestawu znaków
Zaczniemy od naprawienia następującego błędu:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Aby poprawnie wyświetlać tekst, AMP wymaga określenia zestawu znaków strony. Informacja meta o zestawie znaków musi być również pierwszym elementem podrzędnym znacznika <head>. Powodem, dla którego ten znacznik musi być pierwszy, jest uniknięcie ponownego interpretowania treści dodanej przed znacznikiem meta zestawu znaków.
Dodaj następujący kod jako pierwszy wiersz sekcji <head>:
<meta charset="utf-8" />
Zapisz plik i ponownie załaduj stronę. Sprawdź, czy błąd zestawu znaków już się nie pojawia.
Dodanie linku kanonicznego
Spójrzmy teraz na następujący błąd:
The mandatory tag 'link rel=canonical' is missing or incorrect.
Każdy dokument AMP musi zawierać link odwołujący się do „kanonicznej” wersji tegoż dokumentu. Dowiemy się więcej o tym, czym są strony kanoniczne i jakie są różne podejścia do linkowania kanonicznego w kroku Sprawianie, aby można było odnaleźć stronę w tym samouczku.
W tym samouczku użyjemy oryginalnego artykułu HTML, który przekonwertujemy na stronę kanoniczną.
Dodaj pod znacznikiem <meta charset="utf-8" /> następujący kod:
<link rel="canonical" href="/article.html" />
<link rel="canonical" href="article.amp.html" />
Załaduj ponownie stronę. Mimo że jest jeszcze wiele błędów do naprawienia, błąd linku kanonicznego nie jest już obecny.
Określenie atrybutu AMP
AMP wymaga podania atrybutu w głównym elemencie <html> strony, w celu zadeklarowania strony jako dokumentu 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.
Powyższe błędy można rozwiązać poprzez proste dodanie atrybutu ⚡do sekcji <html> w następujący sposób:
<html ⚡ lang="en"></html>
Załaduj ponownie stronę i sprawdź, czy oba błędy zniknęły.
⚡ jest podejściem zalecanym, ale można też użyć atrybutu amp, zamiast atrybutu ⚡, tak jak tu:
<html amp lang="en"></html>
Określenie okienka na ekranie
Następnie zajmijmy się tym błędem:
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP wymaga definicji atrybutów width i minimum-scale okienka na ekranie. Należy podać odpowiednio wartości device-width i 1. Okienko na ekranie definiuje się za pomocą zwykłego znacznika w sekcji <head> strony HTML.
Aby rozwiązać błąd dotyczący okienka na ekranie, dodaj do sekcji <head> następujący fragment kodu HTML:
<meta name="viewport" content="width=device-width" />
Podane wartości atrybutów width i minimum scale są wartościami wymaganymi w AMP. Zdefiniowanie atrybutu initial-scale nie jest obowiązkowe, ale jest powszechnie stosowane w programowaniu stron mobilnych i jest zalecane. Więcej informacji o okienku na ekranie i projekcie responsywnym zawiera artykuł Konfigurowanie okienka na ekranie.
Tak jak wcześniej, ponownie załaduj stronę i sprawdź, czy błąd zniknął.
Zamiana zewnętrznych arkuszy stylów
Poniższy błąd jest związany z naszym użyciem 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 błąd ten polega dotyczy następującego znacznika linku arkusza stylów w naszej sekcji <head>:
<link href="base.css" rel="stylesheet" />
Problem polega na tym, że jest to odniesienie do zewnętrznego arkusza stylów. W AMP, aby maksymalnie skrócić czas ładowania dokumentów, nie można dołączać zewnętrznych arkuszy stylów. Zamiast tego, wszystkie reguły arkuszy stylów muszą być osadzone w dokumencie AMP za pomocą znaczników <style amp-custom></style> lub jako style inline.
<style amp-custom>
/* The content from base.css */
</style>
Rozwiążmy ten błąd:
- Usuń znacznik
<link>wskazujący na arkusz stylów w sekcji<head>i zastąpmy go znacznikiem inline<style amp-custom></style>. Atrybutamp-customw znaczniku style jest obowiązkowy. - Skopiuj wszystkie style z pliku
base.cssdo znaczników<style amp-custom></style>.
Ponownie załaduj stronę i sprawdź, czy błąd dotyczący arkuszy stylów zniknął.
Wykluczenie kodu JavaScript strony trzeciej
Arkusze stylów można stosunkowo łatwo przerabiać za pomocą AMP poprzez wprowadzenie kodu CSS inline, ale w przypadku JavaScriptu jest inaczej.
The tag 'script' is disallowed except in specific forms.
Ogólnie rzecz biorąc, skrypty w AMP są dozwolone tylko wtedy, gdy spełniają dwa główne wymagania:
- Cały JavaScript musi być asynchroniczny (tzn. zawierać atrybut
asyncw znaczniku script). - JavaScript jest przeznaczony dla biblioteki AMP oraz dla wszystkich składników AMP na stronie.
To skutecznie wyklucza używanie w AMP wszelkiego generowanego przez użytkownika/stronę trzecią kodu JavaScript, z wyjątkiem sytuacji opisanych poniżej.
- Skrypt, który dodaje metadane do strony lub konfiguruje składniki AMP. Ma atrybut type
application/ld+jsonlubapplication/json. - Skrypt zawarty w ramkach iframe. JavaScript do ramki iframe należy włączać jedynie w ostateczności. Tam, gdzie to możliwe, funkcjonalność JavaScript należy zastąpić za pomocą składników AMP. Nasz pierwszy składnik AMP zbadamy w następnej sekcji.
Spróbuj otworzyć zewnętrzny plik base.js. Co widzisz? Plik powinien być pusty, bez jakiegokolwiek kodu JavaScript i zawierać tylko komentarz z informacją taką jak ta:
/*
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.
*/
Biorąc pod uwagę, że ten zewnętrzny plik JavaScript nie jest składnikiem funkcjonalnym naszej witryny internetowej, możemy bezpiecznie usunąć cały odnośnik.
Usuń z dokumentu następujący odnośnik do zewnętrznego skryptu JavaScript:
<script type="text/javascript" src="base.js"></script>
Ponownie załaduj stronę i sprawdź, czy błąd dotyczący skryptu zniknął.
Dodawanie kodu standardowego AMP CSS
Następujące błędy odnoszą się do brakującego kodu standardowego:
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.
Każdy dokument AMP musi zawierać następujący kod standardowy AMP:
<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 kod standardowy na końcu sekcji <head> dokumentu.
Znacznik <style amp-boilerplate> początkowo ukrywa zawartość sekcji body do chwili załadowania biblioteki JavaScript AMP, a następnie zawartość jest renderowana. AMP robi to, aby zapobiec renderowaniu zawartości bez stylów, co znane jest również jako Flash Of Unstyled Content (FOUC). Pozwala to zapewnić naprawdę natychmiastowe wrażenia użytkownika, ponieważ zawartość strony pojawia się cała naraz, a wszystko powyżej treści jest renderowane razem. Drugi znacznik odwraca tę logikę, jeśli obsługa JavaScript jest wyłączona w przeglądarce.
Zastąpienie znacznika <img> znacznikiem <amp-img>
AMP nie obsługuje w celu wyświetlania multimediów domyślnych odpowiedników HTML, co wyjaśnia następujący błąd:
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
Dostępny jest składnik internetowy AMP, zaprojektowany specjalnie do zastąpienia znacznika <img>, a mianowicie znacznik <amp-img>:
<amp-img src="mountains.jpg"></amp-img>
Zastąp znacznik <img> powyższym znacznikiem <amp-img> i ponownie uruchom walidator. Wyświetlonych zostanie kilka nowych błędów:
Layout not supported: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
Dlaczego element amp-img wywołał kolejny błąd? Ponieważ amp-img nie jest bezpośrednim substytutem tradycyjnego znacznika HTML img. Używania elementu amp-img dotyczą dodatkowe wymagania.
System układu AMP
Błąd układu mówi nam, że element amp-img nie obsługuje typu układu container. Jedną z najważniejszych koncepcji w projektowaniu AMP jest skupienie się na ograniczeniu zmian układu modelu DOM wymaganych do wyrenderowania jego stron internetowych.
Aby ograniczyć zmiany układu modelu DOM, AMP zawiera system układu zapewniający, że układ strony jest znany tak wcześnie, jak to możliwe w cyklu życia pobierania i renderowania strony.
Poniższy obraz porównuje sposób, w jaki często generowany jest układ strony HTML do podejścia narzucanego przez AMP. Zauważ w podejściu po lewej stronie jak zmieniany jest układ tekstu przy każdym ładowaniu reklamy lub obrazu. Podejście AMP do układu strony zapobiega przesuwaniu tekstu — nawet jeśli załadowanie obrazów i reklam zajmuje dużo czasu.
System układu AMP umożliwia rozmieszczanie i skalowanie elementów na stronie na różne sposoby — stałe wymiary, projekt responsywny, stała wysokość i inne.
W przypadku naszego artykułu system układu wyprowadził typ układu elementu amp-img jako typ container. Typ container ma jednak zastosowanie tylko do elementów, które zawierają elementy podrzędne. Typ container jest niezgodny ze znacznikiem amp-img, co jest przyczyną tego błędu.
Dlaczego wyprowadzony został typ container? Dlatego, że nie określiliśmy atrybutu heights znacznika amp-img. W HTML zmiany układu można ograniczyć poprzez konsekwentne określanie stałej szerokości i wysokości elementów na stronie. W AMP należy zdefiniować szerokość i wysokość elementów amp-img, aby AMP mógł wstępnie określić współczynnik proporcji elementu.
Dodaj atrybuty width i height do znacznika amp-img w następujący sposób:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
Odśwież stronę i sprawdź walidator; nie powinien już wyświetlać żadnych błędów!
Masz teraz prawidłowy dokument AMP, ale obraz nie wygląda zbyt dobrze, ponieważ jest dziwnie umieszczony na stronie. Domyślnie po określeniu wysokości i szerokości elementu amp-img AMP ustali podane wymiary, ale czy nie byłoby wspaniale, gdyby AMP przeskalował obraz tak, aby responsywnie się rozciągał odpowiednio do rozmiaru strony bez względu na rozmiar ekranu?
Na szczęście AMP może określić współczynnik proporcji elementów na podstawie podanej szerokości i wysokości. Pozwala to systemowi układu AMP na pozycjonowanie i skalowanie elementu na różne sposoby. Atrybut layout informuje AMP o tym, jak element ma być umieszczany i skalowany.
Ustawmy atrybut layout responsive, aby umożliwić skalowanie i zmienianie rozmiaru obrazu:
<amp-img
src="mountains.jpg"
layout="responsive"
width="266"
height="150"
></amp-img>
Voila! Nasz obraz jest wyświetlany w prawidłowych proporcjach i responsywnie wypełnia szerokość ekranu.
Sukces!
Teraz dokument AMP powinien wyglądać tak:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<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 Cię powitać następujący komunikat:
AMP validation successful.