Dowiedz się, jak napisać poprawny kod AMP HTML krok po kroku i zwiększ szybkość swojej strony! Sprawdź nasz poradnik już teraz.

Tutorial AMP html- szybko ładujące się strony www- poradnik

AMP HTML to kod HTML przyczyniający się do szybkiego ładowania strony www szczególnie na telefonach i tabletach. Wiele osób rezygnuje z przeglądania treści strony, jeżeli musi długo czekać aż coś się pojawi na ekranie.
Biblioteka AMP JS umieszczona w sekcji head kodu HTML zapewnia szybkie ładowanie stron AMP HTML. Ale najważniejsze jest zapisywanie ich na serwerach Google - strona wczytywana jest bezpośrednio na urządzenie: tablet, smartfon, telefon. Powinno się taką domenę, subdomenę zgłosić do Google dla webmasterów, wówczas otrzymuje się na maila informację o błędach, a bez ich usunięcia nie ma mowy o zapisaniu kopii na ich serwerach.
Musisz założyć konto na GSC i monitorować czy dodane przez Ciebie strony AMP zostały przez Google zaindeksowane- sprawdź- zakładka "stan w wyszukiwarce"- "Przyspieszone strony mobilne"
W moim przypadku trwało to około 7 dni, chociaż data wykrycia przez Google była kilka dni wcześniej.
Potem otrzymałem maila od Google o błędach, które należy usunąć . Najwięcej problemów miałem z danymi strukturalnymi.
Zastanawiasz się, jak wdrożyć AMP HTML samodzielnie? Przeczytaj praktyczny przewodnik i zacznij kodować z sukcesem!

Każdą stronę naszego serwisu z osobna należy sprawdzić na

https://search.google.com/test/amp?hl=pl
Wszystkie błędy oznaczone na czerwono muszą być usunięte- wówczas wyświetla się informacja "Validation Status: PASS"
Wszystkie nasze strony zostaną poddane jeszcze jednemu ważnemu testowi- test danych strukturalnych. Na stronie
https://validator.schema.org/
wpisujemy adres strony www i otrzymujemy wynik "Elementy z błędami (0) i elementy z ostrzeżeniami (0)" - jeżeli tak nie jest trzeba wszystkie błędy usunąć, a bez ich usunięcia nie zostaną nasze strony przyjęte przez Google.
Poznaj sprawdzone wskazówki dla piszących własny kod AMP HTML. Twórz szybsze strony i popraw swoje SEO łatwiej niż myślisz!

Dane strukturalne

Jest to bardzo ważny element strony AMP html. To kod w formacie JSON-LD w sekcji head strony www, który pobiera wyszukiwarka i prezentuje w wynikach wyszukiwania. To kolejne miejsce do prezentacji siebie, swoich produktów, tekstów. Znajdują się tu grafiki, obrazy, informacje o autorze, nasze strony na facebooku, twitterze, linkedin ...
Dane strukturalne są inne dla artykułów, inne dla filmów itp. Jest wiele obowiązkowych kodów, które muszą się znaleźć w tej sekcji i tu z pomocą przychodzi artykuł
https://developers.google.com/search/docs/appearance/structured-data/article?hl=pl#type_definitions
Poprawnie skonstruowane dane strukturalne znajdziesz w kodzie tej strony, ponieważ jest napisana jako AMP HTML. Kod tej strony można wyświetlić na przykład w przeglądarce firefox - u góry strony- przycisk narzędzia- dla twórców witryn- żródło strony. W części górnej znajdź:
script type="application/ld+json
Możesz je skopiować- są to zweryfikowane dane strukturalne dla artykułów.
Chcesz przyspieszyć swoją witrynę? Ten poradnik AMP HTML poprowadzi Cię przez cały proces kodowania krok po kroku.

Projektowanie stron AMP html

Poniżej znajdziesz kilka informacji ułatwiających pisanie kodu.
W języku polskim polecam: https://amp.dev/pl/documentation/guides-and-tutorials/?referrer=ampproject.org
Poradniki, tutoriale, przykładowe kody strony amp html -> https://beecommerce.pl/blog/tworzenie-stron-amp

Budowa stron AMP html różni się od zwykłego HTML, a każdy zauważony błąd w kodzie strony google żąda natychmiastowego usunięcia.

a. Obrazy.

Znacznik musi być zawarty pomiędzy znacznikami amp-img i musi mieć podaną szerokość i wysokość, która jest wykorzystywana do jego skalowania. Przydatne informacje na ten temat:
https://github.com/ampproject/amphtml/

b. Style

Dodaje się bezpośrednio do kodu strony w sekcji head lub za pomocą include można dodać tylko jeden plik .css, którego wielkość nie może przekroczyć 50 kilobajtów . Dodaje się go w tagu style amp-custom .

c. Formularze.

Są również zmiany w formularzach. Przesyłanie danych metodą POST jest możliwe za pomocą znacznika action-xhr . Bez zmian pozostaje przesyłanie danych metodą GET, ale w obu przypadkach wymagany jest kod java w sekcji head. Przydatna jest opcja dla pola tekstowego:
... placeholder="Wpisz szukane słowo..." required>
"Placeholder" - objaśnienie, które znika po rozpoczęciu wpisywania, a "required"- wymagane- zaznacza pole na czerwono, jeżeli nic nie zostało wpisane . Więcej informacji znajdziesz:
https://www.ampproject.org/docs/reference/components/dynamic/amp-form

Jeżeli wykorzystujesz na stronie opisany poniżej java script, musisz go zawrzeć w sekcji head dokumentu. Poniżej kilka przykładów:
"amp-analytics" - do wykorzystania google analitics
"amp-ad" - do publikacji na stronie reklam
"amp-social-share" dla komponentu własnych stron social media.
Kod do wklejenia wyszukasz w linkach poniżej:

Jak podłączyć Google analitics do strony znajdziesz tu:
https://amp.dev/documentation/components/websites/amp-analytics

Jeżeli na stronie chcesz wyświetlać reklamy np. Google to opis znajdziesz tu
https://www.ampproject.org/docs/reference/components/ads/amp-ad

Jeżeli chcesz wstawić mapę google na stronę www skorzystaj z tego poradnika
https://amp.dev/documentation/components/amp-iframe?format=websites

Szukasz konkretów na temat AMP HTML? Nasz poradnik dla samodzielnych programistów pokaże Ci praktyczne rozwiązania i przykłady.

Jeżeli ten artykuł Ci pomógł dodaj mu like, plusa czy gwiazdkę poniżej.

Komentarze do artykułu

Dodaj komentarz

Przeczytaj również: