- Czym jest AMP
- Jakie są zalety i wady technologii AMP
- Jak wdrożyć strony AMP na stronie internetowej
- Jak sprawdzić strony AMP
- Czy konieczne jest korzystanie z technologii AMP
Na pozycję strony w wynikach wyszukiwania oraz ranking nazwy domeny ogromny wpływ ma doświadczenie użytkownika, które można poprawić dzięki optymalizacji prędkości ładowania stron. Firmy na całym świecie nieustannie wdrażają nowe technologie, aby zasoby internetowe ładowały się jak najszybciej, szczególnie na urządzeniach mobilnych. Jedną z najskuteczniejszych jest AMP, która pomaga tworzyć strony z natychmiastowym ładowaniem na smartfonach i tabletach. Jednak pomimo wielu zalet, Accelerated Mobile Pages ma szereg ograniczeń, które mogą zaszkodzić Twojemu projektowi internetowemu.
Czym jest AMP
AMP (Accelerated Mobile Pages) — to technologia przyspieszająca ładowanie stron HTML na smartfonach i tabletach, stworzona przez firmę Google w 2015 roku. W lutym 2016 roku przeprowadzono testy użytkowników, kiedy takie strony zaczęły pojawiać się w wynikach wyszukiwania mobilnego. Właściciele Google od razu zaczęli aktywnie promować przyspieszone strony mobilne, na przykład oznaczali je specjalnym znakiem «błyskawica» i nadawali im niewielką przewagę w rankingu.
Strony AMP różnią się od standardowych brakiem i/lub zastąpieniem klasycznych tagów HTML. Na przykład, zamiast tagu «obraz» IMG używa się AMP-IMG. Standardowy JavaScript jest również zabroniony, ale istnieje biblioteka AMP JS, która ma ograniczony zestaw funkcji, ale zapewnia zoptymalizowany rendering. Przyspieszeniu sprzyja również system Google AMP Cache: buforowanie stron odbywa się bezpośrednio w wyszukiwarce. W rezultacie strony ładują się w ciągu 0,3-0,5 sekundy nawet u użytkowników z wolnym połączeniem internetowym.
Przeczytaj także: Wskaźnik odrzuceń na stronie — jak go analizować i zmniejszać
Jakie są zalety i wady technologii AMP
W 2024 roku udział ruchu mobilnego wynosił ponad 62%, podczas gdy w wielu krajach nadal dostępny jest maksymalnie dostęp 3G. Stąd wynika główna zaleta stron AMP — natychmiastowe ładowanie. Ocena w PageSpeed Insights często wynosi 95-98, a treść ładowana jest naprawdę w kilka sekund. Oznacza to, że technologia dosłownie wyrównuje wszystkich użytkowników, umożliwiając natychmiastowy dostęp do użytecznych i interesujących treści, niezależnie od prędkości połączenia internetowego.
Do innych ważnych zalet stron AMP należy zaliczyć:
- Poprawione doświadczenie użytkownika. Użytkownicy mają dostęp głównie do tekstu, co oznacza, że nie są rozpraszani formularzami, oknami pop-up, interaktywnymi banerami reklamowymi.
- Niższy wskaźnik odrzuceń. Szybkie ładowanie stron i brak ciężkich elementów interaktywnych zwiększa prawdopodobieństwo, że odwiedzający spędzą więcej czasu na Twoim zasobie internetowym.
- Uproszczona promocja SEO. Algorytmy wyszukiwarek preferują szybkie strony. Dzięki tej technologii strony projektu internetowego ładują się natychmiast, co zwiększa szanse na zajęcie pierwszych pozycji w wynikach wyszukiwania.
- Możliwość automatycznego wdrożenia. Samodzielne tworzenie i edytowanie AMP nie jest łatwe, jednak proces ułatwiają darmowe wtyczki CMS.
Technologia pozwala na stworzenie uproszczonych wersji stron internetowych, co ogranicza funkcjonalność strony. Stąd wynikają następujące wady stron AMP:
- specjalizowany JS — zmniejsza liczbę dostępnych funkcji do realizacji;
- maksymalny rozmiar CSS 75 KB — zmusza do minimalizacji stylów, co często utrudnia projekt;
- ograniczona monetyzacja — interaktywne banery często działają nieprawidłowo lub się nie wyświetlają, przez co właściciele projektów internetowych tracą do 20-30% reklamy w porównaniu do tradycyjnych stron mobilnych;
- mniej markowego ruchu — użytkownik dzieli się nie Twoją domeną, a wersją strony zbuforowaną przez Google;
- ryzyko duplikacji treści — należy uważnie monitorować poprawnie skonfigurowane rel=“canonical”, w przeciwnym razie wyszukiwarki będą indeksować wersję AMP zamiast głównej strony;
- zależność od Google — buforowanie stron odbywa się na serwerach firmy, co oznacza, że ma ona większą kontrolę nad Twoją treścią.
W latach 2017-2018 właściciele stron byli gotowi poświęcić dodatkowy czas na tworzenie i zarządzanie stronami AMP z ograniczoną funkcjonalnością, ponieważ uzyskiwali lepsze pozycje w wynikach wyszukiwania i mogli wyróżnić swój zasób internetowy. Obecnie Google nie traktuje obecności tej technologii jako kluczowego czynnika rankingowego, charakterystyczny znak nie jest już wyświetlany, dlatego należy oceniać korzyści wyłącznie z uwzględnieniem specyfiki swojego projektu internetowego.
Sklepy internetowe i portale o wysokiej interaktywności zazwyczaj korzystają z klasycznych metod optymalizacji wersji mobilnej, ponieważ AMP znacznie ogranicza ich funkcjonalność. Jednak strony treściowe (czasopisma, blogi, serwisy informacyjne) z dużą ilością artykułów aktywnie stosują tę technologię, aby poprawić dostępność na urządzeniach mobilnych.
Przeczytaj także: SEO na minimalnych poziomach – co właściciel strony może zrobić samodzielnie, aby promować stronę bez angażowania specjalistów
Jak wdrożyć strony AMP na stronie internetowej
Przy wdrażaniu technologii AMP należy stworzyć zwykłą i uproszczoną wersję strony. Aby wyszukiwarki prawidłowo rozumiały ich powiązanie, na każdej z nich w sekcji «head» musi być specjalny tag. Do kodu zwykłej strony dodajemy:
<link rel="amphtml" href="https://example.com/article-amp.html">
W kodzie wersji AMP wstawiamy:
<link rel="canonical" href="https://example.com/article.html">
Dalej omówimy ten moment przy tworzeniu uproszczonych stron zarówno ręcznie, jak i za pomocą wtyczek. Jednak zawsze sprawdzaj obecność powyższych tagów, ponieważ bez nich wyszukiwarki mogą uznać stronę AMP za duplikat treści.
Metoda 1 — Tworzenie AMP ręcznie
Samodzielne tworzenie każdej Accelerated Mobile Pages jest uzasadnione w przypadku małej strony lub potrzeby pełnej kontroli nad poszczególnymi stronami, na przykład wiadomościami lub artykułami na blogu. W takim przypadku bierzemy gotowy szablon i wypełniamy go posiadaną treścią, zastępując klasyczne HTML, CSS i JS odpowiednimi tagami AMP.
Szczegółową instrukcję krok po kroku można znaleźć na stronie amp.dev, a my omówimy kluczowe punkty dla lepszego zrozumienia wdrożenia AMP na stronie internetowej.
Rozpoczynamy od podstawowego oznaczenia uproszczonej wersji strony:
<!doctype html>
<html amp lang="uk">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Witaj, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Witaj AMPHTML World!</h1>
</body>
</html>
Zwróć uwagę na tag <html amp lang="uk">. Zawiera on <html amp>, który informuje roboty wyszukiwarek, że to jest strona AMP. Jeśli strona nie jest w języku ukraińskim, należy zastąpić uk odpowiednim skrótem, na przykład en dla wersji angielskiej. I nie zapomnij edytować tagu <link rel="canonical" href="$SOME_URL">: href powinien wskazywać na główną wersję strony.
Następnie dodajemy obraz za pomocą tagu <amp-img>, na przykład:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400"></amp-img>
Zaletą technologii AMP jest uproszczone użycie responsywnych obrazów. Wystarczy dodać layout="responsive" do tagu <amp-img>. Zrobimy to z naszym poprzednim obrazem:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
Pełną listę specjalnych tagów można znaleźć na tej stronie serwisu amp.dev.
Następnie przechodzimy do stylizacji dokumentu. Przy użyciu technologii nie można dodawać zewnętrznych plików CSS, dlatego style zapisuje się wewnątrz <style amp-custom>:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: blue;
}
</style>
W razie potrzeby można dodać niestandardowy JavaScript za pomocą specjalizowanego komponentu <amp-script>. Dzięki temu można napisać i uruchomić własny JS, przestrzegając wymogów technologii. Można również ręcznie dodać ogólne widgety i unikalne elementy internetowe, akcje i zdarzenia — kod dla każdej funkcji znajduje się na stronie amp.dev.
Kiedy tworzysz uproszczoną wersję strony, nie zapomnij dodać tagu AMP na standardowej stronie HTML:
<link rel="amphtml" href="https://example.com/article-amp.html">
Teraz pozostaje tylko sprawdzić gotową uproszczoną stronę za pomocą Google AMP Validator (później dokładniej omówimy to narzędzie).
Metoda 2 — Tworzenie AMP za pomocą wtyczek
Ręczne tworzenie uproszczonej wersji mobilnej każdej strony jest ryzykowne, trudne i zajmuje sporo czasu, szczególnie w przypadku dużych projektów internetowych. Właściciele stron na systemach zarządzania treścią korzystają z tej technologii znacznie łatwiej, ponieważ istnieją darmowe wtyczki AMP dla CMS:
- WordPress. Oficjalne rozszerzenie AMP for WP potrafi automatycznie generować uproszczone mobilne wersje stron i postów.
- Joomla. wbAMP automatycznie tworzy wersje AMP Twoich stron, wspiera Google Analytics i ustawienia designu. JAMP pozwala tworzyć wersje AMP dla artykułów i blogów.
- Drupal. Przekształcenie standardowych stron w uproszczone pomaga moduł AMP.
- Magento. Plumrocket AMP tworzy uproszczone wersje produktów, kategorii i innych stron. Identyczną funkcję pełni Magefan AMP Extension.
Rozważmy, jak stworzyć strony AMP na stronie WordPress. Przechodzimy do panelu sterowania, wchodzimy w sekcję «Wtyczki» i klikamy «Dodaj nową». Wpisujemy w wyszukiwarce nazwę, ładujemy i aktywujemy potrzebną.
Po aktywacji natychmiast pojawi się okno do wyboru sposobu konfiguracji. Potrzebujemy podstawowego rozwiązania dla nowicjuszy.
Teraz możemy skonfigurować każdy moment osobno. Możesz wybrać typ stron dla AMP, ustawić analitykę, monetyzację i tym podobne. Szczególną uwagę zwróć na punkt Gdzie potrzebujesz AMP?: możesz przenieść od razu cały blog lub strony produktów na wskazaną technologię, jednak lepiej samodzielnie konfigurować każdą stronę.
Aby to zrobić, przechodzimy do sekcji «Posty» lub «Strony», w zależności od rodzaju treści, z którą zamierzasz pracować. Na przykład dodamy nowy post na blogu.
Klikamy Rozpocznij budowę strony AMP.
Natychmiast otwiera się kreator z wygodnym systemem tworzenia strony AMP. Wystarczy najpierw przeciągnąć potrzebną liczbę kolumn, a następnie tam — moduł, na przykład tekst.
Aby edytować moduł, kliknij obok niego ikonę zębatki.
Możesz nawet skorzystać z gotowych szablonów, wystarczy kliknąć Pre-built AMP Layouts.
W darmowej wersji jest jeden prosty układ, w płatnej — 9, jednak trzeba płacić $89 rocznie. Nam wystarczy darmowa wersja, tym bardziej, że można ją edytować.
Możesz usunąć, zmienić, dodać dowolną kolumnę i moduł z zainstalowanego szablonu. Tylko nie zapomnij skonfigurować głównej wersji za pomocą klasycznego edytora i opublikować stronę.
Wyniki sprawdzenia standardowej strony w PageSpeed Insights.
Wyniki sprawdzenia strony AMP w PageSpeed Insights.
Jak sprawdzić strony AMP
Najprostszym sposobem, aby upewnić się, że strona AMP działa poprawnie, jest skorzystanie z odpowiedniego serwisu Google. Wstawiamy link, klikamy «Sprawdź stronę» i natychmiast otrzymujemy raport.
Sprawdziliśmy stronę AMP, którą stworzyliśmy za pomocą oficjalnej wtyczki WordPress.
Nasza uproszczona wersja może być bez błędów wyświetlana w wynikach wyszukiwania Google.
Wzięliśmy standardową stronę z innej witryny i również sprawdziliśmy ją w tym serwisie.
Przeczytaj także: Jak poprawić SEO swojej strony za pomocą Yoast SEO
Czy konieczne jest korzystanie z technologii AMP
Nie jest to konieczne, ponieważ istnieją różne metody optymalizacji mobilnych stron internetowych, które pozwalają osiągnąć dobrą prędkość ładowania bez surowych ograniczeń funkcjonalnych. Na przykład wybór hostingu z wystarczającą ilością zasobów, buforowanie, usuwanie zbędnego kodu, optymalizacja obrazów, Lazy Loading («Leniwa ładowanie»).
Do 2021 roku miliony właścicieli projektów internetowych wdrażały AMP, ponieważ pozwalało to wyróżnić strony w wynikach wyszukiwania za pomocą charakterystycznej ikony, a także trafić do karuzeli Google News. W momencie pisania artykułu «błyskawica» nie jest już wyświetlana w wynikach wyszukiwania, nie ma priorytetu, a do karuzeli wiadomości może trafić każdy projekt internetowy. Zaletą technologii jest zwiększenie prędkości zasobu internetowego, jednak można to osiągnąć również bez tak surowych ograniczeń funkcjonalnych.
Podobał Ci się artykuł? Powiedz o nim znajomym: 
