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

Google zmienia zasady gry

● 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

Nowy wygląd SERP

Google rozsyła komunikaty

Co to jest AMP?

Accelerated Mobile Pages to nowa konwencja budowania stron zorientowana na zapewnienie

szybkiego renderowania się treści

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

… 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

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

Czy AMP jest dla każdego?

● 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

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)

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>

Pierwsza strona w AMP cd

● Zamieniamy podstawowe tagi HTML zgodnie z dokumentacją AMP

AMP w WordPress

Ile może nam dać implementacja AMP?

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

Czy wdrożenie AMP na WP jest proste?

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

Następnie ją aktywujemy

Odpalamy pierwszą stronęDo adresu dodajemy końcówkę /amp

np.: www.example.com/post-name/amp

Dodajemy odrobinę własnego styluW tym celu edytujemy plik template.php w źródle

wtyczki

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

Console

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

Bibliografia i ciekawe linki● https://www.ampproject.org/docs/get_started/create_page.html● https://www.whitepress.pl/baza-wiedzy/193/accelerated-mobile-pages-czyli-przyspieszone-strony-mobilne-amp-co-to-jest● http://secureglass.net/wordpress-i-amp-instalacja-krok-po-kroku● http://secureglass.net/amp-przyspieszone-strony-mobilne● https://plus.google.com/

+GoogleWebmasters/posts/AzBeLZeefWx

Dziękuję za uwagę