Szybkie AMP dla WordPress

AMP

Mobilna wersja witryny to jak wiemy coś co trzeba posiadać. Google zwraca na to uwagę i przyjazność dla urządzeń mobilnych jest czynnikiem rankingowym.

Zwłaszcza w rankingu wyników dla urządzeń mobilnych.

Obecnie budowanie witryny bez przyjaznej wersji mobilnej jest działaniem nieoptymalnym, choć niestety dalej spotykanym. Warto zadbać o to by nasza witryna była zbudowana w technologii RWD tzw responsywności czy dopasowywała swój wygląd do wielkości ekranu.

O tym dlaczego warto budować RWD a nie osobne wersje mobilne przekonają się wszyscy gdy Google wprowadzi indeksację według zasady – Mobile First :) ale do tego wtedy wrócimy :).

Dziś jednak pisać będę o tym jak szybko możemy wdrożyć na WordPressie wersje AMP czyli Accelerated Mobile Pages.

Co to takiego to AMP? To nic innego jak jeszcze bardziej przyjazna i mobilna wersja mobilna witryny. Przyjazność tą uzyskuje poprzez totalne odchudzenie przekazywanej treści z niepotrzebnych elementów.

Dzięki temu treści wczytują się błyskawicznie co dla wielu w tym Google jest ważnym pozytywnych czynnikiem. By nie było tak słodko warto dodać, że strony w AMP są mniej atrakcyjne wizualnie co można traktować jako wadę tej „technologii”.

Mimo tego czasami warto pozostawić użytkownikom taką możliwość tym bardziej jak wprowadzenie AMP nie sprawia kłopotów i nie wymaga dużych zasobów.

I tak też chciałem zrobić na blogu bo co chwilę przesuwam rozpoczęcie prac nad nową wersją. Postanowiłem jak najszybciej zrobić wersję mobilną w AMP bo są do tego „wtyczki”.

Niestety jak zawsze okazało się, że szybko nie istnieje. Próbowałem wdrożyć parę wtyczek i z każdą było coś nie tak, niezależnie od ilości i jakości opinii o nich.

Dopiero wtyczka „AMP for WP – Accelerated Mobile Pages” zaspokoiła moje potrzeby bo po prostu działała :).

Instalacja jest trywialna.

Klikamy w wtyczkach na swoim WP „Dodaj nową”. Wyszukujemy „AMP”, obecnie pierwsza propozycja to wtyczka, która nas interesuje.

Teraz pozostaje nam już zainstalowanie, włączenie wtyczki i gotowe.

Tak – można rzecz, że to już wszystko. Dla blogów lub może dokładniej WordPressów ze zwykłą strukturą stron i postów AMP już działa, wystarczy do każdego adresu dodać końcówkę /amp/ – https://mkane.antygen.pl/amp/.

Oczywiście warto jeszcze przynajmniej „trochę” poustawiać. W zależności od umiejętności wybieramy wizarda lub własne ustawiania.

W wizardzie ustawiamy logo, później wybieramy jakie typy stron mają mieć swoje wersje AMP. Na pewno powinniśmy wybrać Posts, Page i Homepage czyli posty, strony i stronę główną, pozostałe typy stron według potrzeb.

W kolejnym kroku, jeśli używamy Google Analytics podajemy numer UA. To istotne także dla osób, które same konfigurują wtyczkę bo bez tego ruch ze stron AMP nie będzie widoczne. Wiem co piszę :).

W ostatnim kroku z trzech propozycji wybieramy podstawowy szablon wyglądu. Możemy go później zmodyfikować lub nawet napisać w całości od nowa. Ale miało być szybko więc teraz tym się nie zajmiemy.

Jeśli ktoś nie ma czasu, chęci lub umiejętności to koniec. Mamy AMP z logiem, wyglądem i śledzeniem.

Wtyczka dodała w kodzie odpowiednie zapisy. W wersji podstawowej wskazanie wersji AMP poprzez link rel=”amphtml”. Jest to informacja dla Google i innych botów. Od tej pory będą one korzystały z AMP i w wynikach mobilnych pojawią się adresy z /amp/ z oznaczeniem „błyskawicą”.

Na stronach z /amp/ zostanie automatycznie dodany tag canonical wskazujący na adres podstawowy by uniknąć powielenia.

Dodatkowe opcje, na które należy zwrócić uwagę:
– w zakładce „SEO” warto włączyć meta opisy, które mogą być pobierane z wtyczki YOAST. Ja wyłączyłem też archiwa.
– w zakładce „Comments” włączamy komentarze
– jeśli wszystko działa OK to możemy w „Advance settings” włączyć „Mobile Redirection”. Wtedy cały ruch mobilny jest przekierowywany na AMP. nie jest to jednak konieczne.

Wtyczka umożliwia jeszcze dodanie reklam, budowanie LP, pobawienie się wyglądem. Opcje globalne są rozbudowane i naprawdę jak ktoś chce to może wiele dodać/zmienić.

Dodane zostały także opcje w edycji wpisu lub strony. Możemy indywidualnie dla danego posta wyłączyć AMP czy też przekierowanie dla urządzeń mobilnych.

Ciekawą opcją jest możliwość zbudowania danej podstrony builderem. Oczywiście uproszczonym bo to AMP przecież ale będzie to przydatne zwłaszcza dla osób mających w ten sam sposób zbudowane podstrony w „normalnej” wersji. Bo niestety wtyczka sama ich nie przerabia.

A jak ktoś nie chce pracować na builderze to jest możliwość zbudowania innej treści podstrony dla wersji AMP. Takiej „zwykłej” treści bez wodotrysków.

Podsumowanie

Wtyczkę używam na wielu stronach i dobrze sobie radzi. Tym bardziej, że przy prostej stronie jej wdrożenie to kilka minut.

Na potrzeby tego wpisu dodałem AMP do jednej z moich witryn i znowu zakończyło się wszystko sukcesem a czas dodania był 10 razy krótszy niż pisanie wpisu :).

Wtyczka jest prosta a zarazem rozbudowana dla tych osób, które maja wiadomości i lubią grzebać. To naprawdę duży plus.

Warto dodać, że jest ona często aktualizowana i na przestrzeni kilku miesięcy używania widać jej rozwój w dobrą stronę.

Co więcej pisać – polecam.

A jak Wy realizujecie tego typu temat? Może używacie innych wtyczek, które warto sprawdzić lub może coś warto dodać coś do ustawień AMP for WP?

9 komentarzy

  1. Autor Janusz Kamiński dodany 1 listopad, 2017

    Dobry temat! Dzięki za wyświetlenie. ;)

  2. Autor WiWi dodany 2 listopad, 2017

    Ciekawa wtyczka. Ostatnio widać tylko płatne motywy, które są już zoptymalizowane od początku pod telefony. Ciężko czasem samemu przerabiać kod.

  3. Autor mkane dodany 2 listopad, 2017

    RWD mają już wszystkie nowe motywy ale AMP najczęściej nie.

  4. Autor Agnieszka Owczarzak dodany 9 listopad, 2017

    Teraz zakładając sklep, czy stronę internetową od razu trzeba myśleć o responsywności, albo chociaż wersji mobilnej. Coraz więcej osób korzysta ze stron na telefonach cy tabletach i to się raczej nie zmieni.

  5. Autor Radek dodany 25 listopad, 2017

    dawno przymierzam sie do modyfikacji jedenej ze swoich stron, a tutaj podałeś gotowe rozwiązanie, dzięki

  6. Autor mkane dodany 25 listopad, 2017

    Proszę :)

  7. Autor Michał dodany 31 styczeń, 2018

    Nie na temat – pomyśl o delikatnej zmianie czcionki, „w” w tej jest dosyć denerwujące dla oka. To chyba kwestia zbyt cienkich kresek w porównaniu do pozostałych liter. A art bardzo dobry:)

  8. Autor mkane dodany 31 styczeń, 2018

    Dziękuję za sugestię. Ogólnie zbieram się do wymiany całego szablony :) więc weźmiemy to pod uwagę!

  9. Autor Tomek dodany 2 luty, 2018

    Dzięki! Przyda mi się!