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ę
Top Related