Podstawowy przegląd informacji na temat AMP

1. Przyspieszyć mobilność
Co powinieneś wiedzieć o AMP

2. Google zmienia zasady gry

3. ●
Pojawiają się 3 nowe wytyczne (protokół
HTTPS, dost pno na wiele urz dzeę ść ą ń,
indeksacja i widoczność treści)
●
Aktualizacja 7 istniejących wytycznych (m in.
robots.txt, znaczniki title i alt, szybkość
ładowania strony)
●
Metadane coraz ważniejsze

4. Nowy wygląd SERP

5. Google rozsyła komunikaty

6. Co to jest AMP?
Accelerated Mobile Pages to nowa konwencja
budowania stron zorientowana na zapewnienie
szybkiego renderowania się treści

7. Jakie korzyści niesie AMP?
●
(Znacznie) Szybszy czas ładowania strony
●
Zmniejszenie ilości zapytań kierowanych na serwer
●
Większa dostępność projektu
●
Potencjalne zwiększenie konwersji, poprawa CTR
●
Poprawa pozycji strony w wyszukiwarce
●
Strona może być ładowana np. z cache Google

8. … a jakie jest ryzyko?
●
Stosunkowo młody projekt, wiele rzeczy może
ulec zmianie
●
Niepoprawne wdrożenie może się skończyć
ostrzeżeniem od Google

9. Czym AMP różni się od RWD?
●
Nie używamy formularzy
●
Nie ładujemy zewnętrznych JS
●
Nie ładujemy zewnętrznych stylów CSS
●
Nie umieszczamy stylów inline
●
Minimalizujemy ilość i rozmiar plików

10. Czy AMP jest dla każdego?

11. ●
Projekt jest Open Source
●
AMP ma pomóc w szybkim renderowaniu treści
●
W pierwszej kolejności technologia kierowana
jest do stron publikujących newsy
Tak, skorzystać może każdy

12. Elementy składowe
●
Biblioteka JS (dostępna również przez CDN)
●
Dodatkowe komponenty HTML (amp-youtube,
amp-lightbox itp.)
●
Własne tagi HTML (np.: amp-image, amp-ad,
amp-video)

13. Pierwsza strona w AMP
●
Tworzymy jak normalną statyczną stronę html (zapisujemy
tak żebyśmy wiedzieli że to ta z formatem AMP)
●
Dokument musi zawierać podstawowe znaczniki
●
Określamy kodowanie, i znancznik viewport
●
Dodajemy biblionetkę AMP w nagłówku :<script async
src="https://cdn.ampproject.org/v0.js"></script>

14. Pierwsza strona w AMP cd
●
Zamieniamy podstawowe tagi HTML zgodnie z
dokumentacją AMP

15. AMP w WordPress

16. Ile może nam dać implementacja
AMP?

17. Źródło: https://penguinwp.com/

18. Czy wdrożenie AMP na WP jest
proste?

19. ...na szczęście TAK!
Wystarczy zainstalować wtyczkę:)

20. Następnie ją aktywujemy

21. Odpalamy pierwszą stronę
Do adresu dodajemy końcówkę /amp
np.: www.example.com/post-name/amp

22. Dodajemy odrobinę własnego stylu
W tym celu edytujemy plik template.php w źródle
wtyczki

23. Sprawdzamy poprawność
wdrożeniaOdpalamy Chrome Dev Tools i przechodzimy do zakładki
Console

24. A co jeśli wystąpią błędy?

25. Bibliografia i ciekawe linki
●
https://www.ampproject.org/docs/get_started/create_page.html
●
https://www.whitepress.pl/baza-wiedzy/193/accelerated-mobile-page
●
http://secureglass.net/wordpress-i-amp-instalacja-krok-po-kroku
●
http://secureglass.net/amp-przyspieszone-strony-mobilne
●
https://plus.google.com/
+GoogleWebmasters/posts/AzBeLZeefWx

26. Dziękuję za uwagę