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.

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

https://validator.ampproject.org/#
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://search.google.com/structured-data/testing-tool
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.

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, google+ ...
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/data-types/articles#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.

Projektowanie stron AMP html

Poniżej znajdziesz kilka informacji ułatwiających pisanie kodu.
W języku polskim polecam:
https://www.ampproject.org/pl/docs/get_started/create
Są tu poradniki, tutoriale, przykładowe kody strony amp html.

Jest dużo zmian w stosunku poprzednika html 5. Są one bardzo rygorystycznie przestrzegane.

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/blob/master/spec/amp-html-layout.md
Polecam także tę stronę:
https://ampbyexample.com/components/amp-img/

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://ampbyexample.com/components/amp-form/
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://developers.google.com/analytics/devguides/collection/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

Aby wyświetlały się strony socjal media zobacz:
https://ampbyexample.com/components/amp-social-share/

Facebook wyświetla się inaczej zajrzyj tu:
https://ampbyexample.com/components/amp-facebook/

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

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

Autor artykułu- Admin

Dodaj komentarz

Przeczytaj również: