Witamy w drugiej części przewodnika AMP dla WordPressa. W naszym ostatnim artykule dowiedzieliśmy się, jak ważna jest strategia sieciowa na urządzenia mobilne i jak AMP może potencjalnie zmienić grę. W dzisiejszym poradniku dowiemy się o:

  • Jak zintegrować AMP z WordPress
  • Najlepsze wtyczki WordPress do dostosowywania AMP
  • Czy naprawdę musimy wdrożyć AMP w naszej witrynie WordPress?

Zaczynajmy.

Przewodnik wideo AMP for WordPress

Zbierając miejsce, w którym skończył się ostatni post w naszej serii, możesz śledzić film WPCrafter na temat łatwej konfiguracji AMP za pomocą witryny WordPress. Film Adama przeprowadzi Cię przez każdy krok naszego przewodnika-ciesz się!

Jak skonfigurować AMP dla WordPress

amp-plugin-wordpress-hero

Konfiguracja AMP dla WordPress jest bardzo prostym procesem. Wszystko, co musisz zrobić, to zainstalować wtyczkę WordPress AMP opracowaną przez Automattic, a reszta nastąpi.

  • Przejdź do Pulpitu Nawigacyjnego WordPress > Wtyczki > Dodaj nowy
  • Szukaj „AMP”

Wybierz wtyczkę i kliknij na Zainstaluj Teraz

how-to-install-amp-wordpress-plugin

Po aktywacji wtyczki wszystkie adresy URL postów w Twojej witrynie będą miały wersję AMP. Możesz przejść do linku dowolnego posta, dołączyć / amp/ na końcu adresu URL, a zobaczysz wersję AMP.

Rzućmy okiem na normalną wersję strony.

test-site-no-amp_rz

A to jest wersja AMP tej samej strony:

test-site-amp_rz

To wszystko-pomyślnie skonfigurowałeś AMP w WordPress. Trudno uwierzyć, że to takie proste, prawda?

Jeśli jednak nie masz włączonych linków permalinks, możesz uzyskać wersję amp, dołączając ?amp=1 do linku do posta. Na przykład link do posta byłby:

  • Wersja Normalna: http://example.com/2016/01/01/hello-mobile-web/
  • Wersja AMP: http://example.com/2016/01/01/hello-mobile-web/amp/
  • Wersja AMP (z dość Permalinks wyłączone): http://example.com/2016/01/01/hello-mobile-web/?amp=1

Wtyczka AMP dodaje standardowy meta tag w głowie „normalnych” stron HTML, który umożliwia Google i innym wyszukiwarkom rozpoznanie wersji AMP stron istnieje. Wykorzystuje logo strony, które można ustawić w WordPress Theme Customizer.

Ważne jest, aby pamiętać, że wtyczka obsługuje tylko konwersję postów do wersji AMP. Zgodnie z opisem wtyczki dostępnym na 1st Listopad 2016, Wsparcie dla wersji AMP stron WordPress jest w fazie rozwoju i wkrótce.

Pomiar wpływu na wydajność wzmacniacza

Postanowiliśmy zmierzyć wpływ na wydajność wersji AMP strony w Pingdom. Wyniki były diametralnie różne. Należy pamiętać, że nasza konfiguracja WordPress była we współdzielonym środowisku hostingowym przy użyciu domyślnego motywu Twenty Fourteen bez zainstalowanych wtyczek do buforowania lub optymalizacji.

Poniższy zrzut ekranu pokazuje benchmark wydajności podstawowej wersji strony:

test-site-no-amp-pingdom

I to jest wynikiem wersji AMP strony:

test-site-amp-pingdom

Wyniki są uderzająco różne.

Każdy z komponentów doświadczył ogromnej poprawy:

  • Rozmiar strony zmniejszony o 70%
  • Czas ładowania zmniejszył się o 35% do poniżej 900 milisekund
  • Liczba zgłoszeń została zmniejszona o prawie 60% z 17 do zaledwie 7!

Wszystko to zostało osiągnięte przez AMP, przy zachowaniu zawartości strony. Poniższa tabela zawiera szczegóły testu w celach informacyjnych:

Czynnik  Normalny AMP Poprawa
Rozmiar strony (KB) 563.8 167 70%
Czas ładowania (sek) 1.42 0.929 35%
Nie. wniosków 17 7 59%

Patrząc na te liczby, jest oczywiste, że uzyskanie wzmacniacza nie ma sensu. Nie tylko pomoże to poprawić wyniki SEO, ale także zapewnia piękne, czytelne wrażenia użytkownika.

Co więcej, możesz również włączyć mechanizmy śledzenia w wersji AMP strony. Omówimy to w dalszej części.

Rozszerzanie możliwości AMP

Podczas gdy optymalizacja treści dla czytelników jest dobrą praktyką, ważne jest również zachowanie spójności marki. Oznacza to, że nawet wersje AMP istniejących treści powinny być zgodne z kolorystyką marki, czcionkami i ogólnym interfejsem użytkownika.

Wtyczka AMP WordPress nie ma opcji wprowadzania takich zmian. Jego celem było zapewnienie szybkiego i łatwego sposobu, aby cała istniejąca zawartość WordPress była kompatybilna z AMP – zadanie, które robi całkiem dobrze.

Enter, wtyczka AMP for WP-Accelerated Mobile Pages.

amp-for-wp-plugin-2-hero

Ta darmowa wtyczka rozszerza możliwości AMP w WordPress, oferując dodatkowe funkcje, takie jak:

  • Integracja z Google Analytics
  • Wsparcie dla stron AMP WooCommerce
  • Podobne posty pod postem
  • Lista ostatnich komentarzy
  • Niestandardowe Logo upload
  • Pasek udostępniania społecznościowego
  • Obsługa osadzania bogatych treści, w tym filmów i treści z platform treści, takich jak YouTube, Instagram, Twitter, Vine itp.

Warunkiem wstępnym wtyczki jest zainstalowanie i aktywacja wtyczki AMP, aby działała poprawnie. Jak zwykle, możesz zainstalować tę wtyczkę podobną do sposobu, w jaki zainstalowaliśmy wtyczkę AMP na początku tego postu.

amp-for-wp-plugin-2-install-activate

Po aktywacji jesteś gotowy do skonfigurowania różnych opcji wtyczki. Przejdź do Panel WordPress > AMP aby uzyskać dostęp do ustawień.

Spośród wielu ustawień, które oferuje wtyczka, wypróbowaliśmy:

  • Włączanie komentarzy
  • Dodawanie Powiązanych Postów
  • Dodawanie nawigacji do następnych / poprzednich postów

Oto zrzut ekranu, jak wyglądała wersja AMP po zapisaniu zmian:

amp-for-wp-plugin-2-hero-test-page-500-px

A oto występ:

amp-for-wp-plugin-2-speed-test

Oto zrzut ekranu strony vanilla AMP dla porównania:

test-site-amp-pingdom

Czas ładowania dodatkowo zmniejszył się o kolejne 7,4%. Warto zauważyć, że chociaż rozmiar strony i liczba żądań nieznacznie wzrosły, nastąpiła poprawa ogólnej oceny wydajności (wzrost o 3 punkty).

Podsumowując, ta wtyczka jest doskonała, jeśli poważnie myślisz o pchnięciu mocniej w kierunku AMP i spraw, aby Twoje treści, reklamy i analizy działały dobrze z platformą.

Wniosek

Biorąc pod uwagę gwałtowny wzrost wykorzystania telefonów komórkowych w ciągu ostatnich kilku lat, nie jest to już opcja dla firm internetowych, aby przejść mobile-pierwszy. Jest to absolutna konieczność. Projekt Accelerated Mobile Pages jest ambitnym przedsięwzięciem w tym kierunku i coraz więcej domów mediowych szybko go dostosowuje.

Podczas gdy nowsze blogi są prostsze do włączenia AMP, blogi z tysiącami stron treści mogą z pewnością uznać to za szczególnie trudne. Powód jest prosty-nie każdy postępuje zgodnie z odpowiednimi standardami podczas publikowania w Internecie. Organizacje ewoluują. Nawet technologie internetowe, które były” gorące ” pięć lat temu, są dziś przestarzałe. Podczas gdy AMP stara się jak najlepiej budować w oparciu o istniejące technologie internetowe, może być wiele przypadków, w których występują pewne niezgodności/błędy. I te błędy mogą negatywnie wpłynąć na wyniki SEO.

Idealnie, firmy powinny mierzyć swoje źródła ruchu przychodzącego – jaki procent tego pochodzi z urządzenia mobilnego? Ile z nich pochodzi z wyszukiwania mobilnego? Jaki jest współczynnik odrzuceń użytkowników mobilnych? Są to pytania, które należy zadać przed rozważeniem AMP.

Jeśli jesteś przekonany, że treść Twojej witryny jest technicznie skonstruowana zgodnie z najnowszymi standardami, to jak najbardziej – śmiało z AMP! Będziesz tylko zwiększyć swoje SEO.

Jeśli jednak wiesz, że istnieje wiele wewnętrznych błędnych konfiguracji, uszkodzonych linków i błędów, najlepiej byłoby rozwiązać (i ewentualnie rozwiązać) te problemy przed przystąpieniem do AMP.

Co myślisz o AMP? Czy używasz go do konsumowania treści? Zaimplementowałeś to w swojej witrynie? Chcielibyśmy usłyszeć od ciebie!

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…