Jak wdrożyć AMP w swojej witrynie i uzyskać naddźwiękową prędkość ładowania?

Możesz wdrożyć AMP, aby zwiększyć szybkość strony. Dlatego

Szybko ładująca się strona internetowa jest zbędna . Rozpiętość uwagi człowieka jest w spirali w dół – nikt nie chce czekać, zwłaszcza jeśli korzysta z urządzenia mobilnego.

Jak szybko musimy być? Google zaleca czas ładowania strony krótszy niż dwie sekundy.

Istnieje wiele popularnych środków SEO w domenach internetowych i technicznych, które pomogą Ci osiągnąć cel.

Jednak jeden z tych środków – Konfigurowanie przyspieszonych stron mobilnych (AMP) dla mobilnej wersji strony internetowej – jest używany oszczędnie.

Czemu? Krótko mówiąc, przejście na AMP zajmuje trochę czasu, wysiłku i środków, w zależności od wielkości witryny. W końcu może nawet nie być tego warte.

Czy warto inwestować w AMP? Jeśli odpowiedź brzmi tak, ten post pomoże Ci krok po kroku w skutecznym skonfigurowaniu AMP dla Twojej witryny WordPress.

Zaimplementuj AMP Krok 1: Wybierz odpowiednią wtyczkę

Opcje wtyczek

WordPress oferuje wiele wtyczek do AMP. Kilka z nich wypróbowałem z powodzeniem w różnym stopniu. Jeden z nich przez jakiś czas dał rewelacyjne wyniki w Google Pagespeed Insights. Ale zepsuł wszystkie moje strony AMP na urządzeniach mobilnych!

Moja rekomendacja

Polecam wtyczkę AMP dla WP – Accelerated Mobile Pages – WordPress. Ta wtyczka zapewnia wiele opcji dostosowywania mobilnych stron internetowych. Pozostała część postu będzie dotyczyła konfiguracji AMP dla Twojej witryny za pomocą tej wtyczki.

Po zainstalowaniu i aktywacji wtyczki na pulpicie WordPress pojawi się opcja otwarcia wersji AMP Twojej witryny. Zobaczysz również nową wtyczkę (AMP), jak pokazano na poniższym obrazku.

Jak na powyższym obrazku, zobaczysz zestaw opcji, każdą z nich omówimy po kolei.

Przejdźmy do ustawień.

Implementuj AMP Krok 2: Podstawowa konfiguracja wtyczki

Typ strony internetowej

Wybierz opcję, która najlepiej reprezentuje Twoją firmę. Wybierz „inne”, jeśli nic innego nie pasuje, po tym pojawi się opcja wpisania typu witryny.

Gdzie musisz wdrożyć AMP?

Wybierz, gdzie chcesz zaimplementować AMP. Decydując się na AMP, decydujesz się na utrzymanie mobilnych stron internetowych prawie w całości w HTML. Musisz puścić kody CSS/JS, które zmniejszają prędkość ładowania.

Wadą jest to, że wpływa to na wrażenia użytkownika (UX). Na przykład nie możesz już mieć przycisku wezwania do działania (CTA), który obraca się, aby przyciągnąć uwagę odwiedzającego. AMP wycina ten kod, oszczędzając w ten sposób czas ładowania strony. Może to ostatecznie doprowadzić do zmniejszenia wskaźnika zaangażowania.

Na powyższej liście możesz wybrać opcję AMP na swoich stronach, postach lub obu.

Projekt i prezentacja

Tutaj możesz skonfigurować swoje logo , zalecany rozmiar to 120 x 90 pikseli. Polecam nie używać logo, ponieważ wydłuża to czas ładowania strony. Jeśli żadne logo nie zostanie zaktualizowane na tym panelu, strona AMP będzie miała tylko nazwę witryny zamiast logo.

Opcja globalnego schematu kolorów pomoże Ci wybrać kolor stron AMP, który pojawi się w linkach CTA na stronie i w linku w stopce.

Na przykład wybrałem jasnoniebieski jako mój kolor globalny , jak widać na poniższym obrazku.

Śledzenie analityczne

W tym panelu opcji możesz włączyć narzędzia używane do śledzenia. Na przykład możesz włączyć Google Analytics, dodając identyfikator śledzenia. W ten sposób dane ze stron AMP będą aktualizowane bezpośrednio na Twoim koncie Google Analytics.

Podobnie możesz dodać wiele innych narzędzi do śledzenia, jak pokazano na powyższym obrazku.

Ustawienia prywatności

Pasek informacji o plikach cookie umożliwia uzyskanie zgody odwiedzających na pliki cookie używane w witrynie. Na poniższym obrazku okno dialogowe w kolorze czarnym to pasek informacji o plikach cookie.

Źródło obrazu – Monster Insights

Jeśli Ty lub Twoja baza odbiorców pochodzi z kraju RODO, musisz włączyć ustawienia RODO – Ogólne rozporządzenie o ochronie danych.

Pamiętaj, że jeśli musisz wybrać, możesz wybrać tylko jedną z dwóch opcji, a nie obie.

Reklama

W tym segmencie wybierz, gdzie chcesz pozycjonować swoje Reklamy. Możesz dostosować według potrzeb – możesz mieć reklamy publikowane w całej witrynie lub w pojedynczych postach lub nagłówki między innymi.

Możesz wybrać typ reklamy, rozmiar reklamy oraz klient reklamy danych i boks reklamy danych z kodu reklamy AdSense.

Kompatybilność z innymi firmami

Ostatnia encja zawiera listę wtyczek, dla których potrzebujesz zgodności z AMP.

Gravity Form i Elementor dla AMP wymagają zapłaty za rozszerzenia. Dane strukturalne, reklamy dla WP i PWA dla WP to bezpłatne wtyczki. Ostatnie trzy zostaną omówione nieco bardziej szczegółowo w dalszej części postu.

Zaimplementuj AMP Krok 3: Więcej ustawień AMP

Ustawienia główne

Karta Ogólne obejmuje opcje, które omówiliśmy w podstawowej konfiguracji. Ponadto możesz wybrać, czy chcesz mieć AMP na stronach archiwów, kategorii i tagów.

Włączenie ostatniej opcji – AMP Takeover (Beta) – spowoduje, że twoja wersja na komputer i telefon będzie taka sama. Oznacza to, że Twoja wersja na komputery będą również zawierać strony AMP.

Zalecam wyłączenie tej opcji. Wczytywanie strony jest zwykle lepsze na komputerach niż na urządzeniach mobilnych. Posiadanie AMP na komputerze oznacza wymianę UX na niewielki wzrost szybkości strony. Niezbyt dobra okazja.

Reklama

Ta sekcja ma te same opcje, co sekcja Reklama w podstawowej konfiguracji.

SEO

Jeśli zdecydujesz się włączyć opis meta , tekst, który wypełnisz w sekcji Head , zostanie pobrany przez Google. Będzie się to różnić od tekstu, który wypełniłeś w wersji na komputery. Zalecam pozostawienie tego ustawienia i utrzymanie spójności Meta Description w obu wersjach.

Tagi OpenGraph Metadata to fragmenty kodu, które kontrolują sposób wyświetlania adresów URL udostępnianych w mediach społecznościowych. Ta sekcja jest widoczna w wersji na komputery, gdy konfigurujesz tytuł i metadane we wtyczce SEO. Poniżej znajduje się przykład wtyczki Yoast SEO.

Możesz go znaleźć, przechodząc do sekcji Edytor dowolnego postu lub strony, przewiń w dół. Po wyświetleniu sekcji Yoast kliknij zakładkę „Społeczności”, a następnie wybierz preferowaną platformę mediów społecznościowych.

Wtyczka AMP umożliwia wybranie wybranej wtyczki SEO na tym samym panelu opcji. W powyższym przykładzie wybrana jest wtyczka Yoast. Wszystkie dane, które wprowadzasz do Yoast dla wersji na komputery, są kopiowane do wersji AMP.

Zobaczysz opcję Usuń indeksowanie stron z podziałem na strony i zgodność narzędzia do sprawdzania adresów URL.

Strony podzielone na strony powinny być indeksowane, ale tylko jako kanoniczne. Zalecam pozostawienie tego ustawienia wyłączonego.

Zgodność narzędzia do sprawdzania adresów URL zapewnia bardziej przejrzyste wyszukiwanie. Zawiera szczegółowe raporty dotyczące indeksowania, indeksowania i udostępniania informacji na koncie Google Search Console. Polecam pozostawienie go włączone.

Wsparcie Elementora

Opcja AMPforWP PageBuilder pozwoli Ci zbudować indywidualne strony dla wersji AMP, innej niż wersja na komputery. Jest to przydatne, gdy chcesz mieć nieco inny tekst lub wezwanie do działania na stronach AMP.

Na przykład, jeśli masz CTA „Skontaktuj się z nami” dla komputerów stacjonarnych, ale wolisz, aby użytkownicy mobilni do Ciebie dzwonili, możesz aktywować tę opcję i utworzyć osobną stronę.

PWA

Zgodnie z opisem AMP dla WP Plugin – Progressive Web Apps (PWA) przekształca Twoją witrynę w aplikację internetową i zapewnia odwiedzającym natywną aplikację mobilną.

Jest to ulepszenie projektu. Aktywacja modułu to kwestia wyboru.

Wydajność

Panel Wydajność zagłębia się w optymalizację szybkości strony.

Umożliwia minimalizację CSS/JS w celu zmniejszenia wykorzystania przepustowości bez wpływu na UX lub funkcjonalność. Wykorzystaj pamięć podręczną przeglądarki , aby przyspieszyć ładowanie dla powracających gości. Zalecam pozostawienie włączonych obu opcji.

Włączenie Optymalizacji CSS uruchomi funkcję potrząsania drzewem optymalizacji CSS. Możesz go włączyć, jeśli nie masz innej wtyczki, która już wykonuje tę pracę.

Analityka, dane strukturalne, pasek informacyjny i RODO

Te sekcje mają te same opcje, co te omówione w podstawowej konfiguracji.

Powiadomienia push

Jeśli chcesz skonfigurować powiadomienia push, możesz wybrać jedno spośród OneSignal, iZooto i Truepush .

W powyższym przykładzie wybrałem OneSignal. Jednak w przypadku każdego wyboru zobaczysz sekcję, w której należy wprowadzić identyfikator aplikacji, opcję włączenia powiadomień push dla stron. Ponadto musisz wybrać, gdzie chcesz umieścić powiadomienie (na przykład na dole strony) i jaki tekst chcesz wyświetlić.

Formularze kontaktowe

Dzięki temu możesz wybrać jedną z 3 wtyczek do optymalizacji AMP – Contact Form 7, Gravity Forms i Ninja Forms.

Wszystkie trzy wymagają zapłaty za przedłużenie. Jeśli Twoje wezwanie do działania skupia się głównie na formularzach, rozsądnie jest zainwestować w rozszerzenie.

Uwagi

Ten ekran pozwala wybrać, gdzie chcesz wyświetlać komentarze generowane przez użytkowników w Twojej witrynie. Możesz także wybrać źródła, z których będą wyświetlane komentarze.

Wybierz ustawienia, które najlepiej Ci odpowiadają.

Natychmiastowe artykuły

Artykuły błyskawiczne to funkcja w aplikacji Facebook dla użytkowników mobilnych, która umożliwia hostowanie artykułów w witrynie.

Zaletą włączenia tej funkcji jest jeszcze szybszy czas ładowania w porównaniu z posiadaniem tego samego artykułu w witrynie. Ponieważ artykuł ładuje się w aplikacji, uzyskujesz do 10 razy większą prędkość ładowania.

Ponieważ jednak treść pozostaje na Facebooku, możesz stracić część ruchu w witrynie. Jest to kompromis między szybkością strony a ruchem w witrynie. Polecam to wyłączyć.

Jeśli zdecydujesz się go zachować, zobaczysz poniższe ustawienia.

Po wprowadzeniu identyfikatora strony na Facebooku możesz dostosować ustawienia artykułu. Ustawienie, które wymaga więcej wyjaśnień, to – Przetwarzanie robota .

Gdy link do Twojego artykułu w Twojej witrynie zostanie udostępniony na Facebooku, roboty indeksujące Facebooka szukają tagu ia:markup_url . Jeśli jest obecny, Facebook przyjmuje Twój artykuł i tworzy natychmiastowy artykuł na Twojej stronie na Facebooku.

Narzędzia

Opcja Indywidualna strona AMP pozwala wybrać, czy chcesz wyświetlać strony AMP domyślnie, czy nie. Gdy wybierzesz opcję Pokaż domyślnie , na wszystkich Twoich stronach będzie wyświetlana wersja AMP. Możesz jednak ukryć AMP dla poszczególnych postów lub stron.

Aby to zrobić, przejdź do dowolnej strony i kliknij Edytuj stronę . Na karcie Ustawienia po prawej stronie znajdziesz opcję jej wyłączenia.

Podobnie możesz wybrać opcję Ukryj wersje AMP dla wybranych kategorii i postów.

Query Monitor to panel narzędzi programistycznych dla WordPress. Jeśli jesteś programistą, który musi widzieć zapytania na stronie, powinieneś pozostawić to ustawienie włączone.

Ustawienia zaawansowane

Panel opcji Ustawienia zaawansowane zawiera wiele ustawień, z których większość nie wymaga wyjaśnień.

Zalecam pozostawienie włączonych ustawień domyślnych, chyba że jesteś programistą WP lub zatrudniłeś eksperta do zaprojektowania swojej witryny.

eCommerce

Jeśli posiadasz sklep internetowy, możesz dostosować swoją wersję AMP do WooCommerce . Jeśli sprzedajesz głównie zasoby cyfrowe, możesz włączyć opcję obsługi Easy Digital Downloads Support . Obie opcje wymagają włączenia płatnego rozszerzenia.

Panel tłumaczeń

Ten panel umożliwia wybór właściwych tłumaczeń dla często używanego zestawu słów na wybrany przez Ciebie język.

Na przykład musisz wpisać tłumaczenie opcji Wyświetl wersję inną niż AMP, która jest dostosowana do Twoich odbiorców.

W przypadku tłumaczeń wielojęzycznych można włączyć metodę tłumaczenia Użyj pliku POT . Plik POT (Portable Object Template) jest szablonem dla plików PO. Są to zwykłe pliki tekstowe zawierające tłumaczenia. Każdy język ma swoje własne rozszerzenie pliku. Na przykład francuski ma po.fr.

Wdrożenie AMP Krok 4: Projekt

Motywy

Podobnie jak w przypadku komputerowej wersji witryny, możesz wybrać motyw dla wersji AMP.

Do wyboru są cztery bezpłatne opcje.

• Szybki
• Projekt jeden
• Projekt drugi
• I projekt trzeci

Dodatkowo każda strona i post posiada sekcję, która umożliwia stworzenie własnego projektu.

Oto jak możesz to znaleźć. Przejdź do strony lub posta i kliknij „Edytuj stronę” na górnym pasku narzędzi. Przewiń w dół, aby zobaczyć poniższy ekran.

Jeśli zaznaczysz pole wyboru Użyj Konstruktora , zostanie wyświetlony szablon, który utworzysz, jeśli nie, wyświetlony zostanie wybrany przez Ciebie bezpłatny szablon.

Jeśli budujesz własny szablon, masz do wyboru poniższe moduły.

Pamiętaj, że AMP to w zasadzie strona HTML. Nie można uzyskać wiele dostosowań ani fantazyjnych przycisków.

Uwaga: Musisz wybrać motyw. Wtyczka potrzebuje go do wybierania ikon i struktury – nawet podczas tworzenia własnego projektu. Możesz przejść do bardziej szczegółowych informacji na tym etapie, wdrażając AMP.

Światowy

Ten panel opcji pozwala dostosować wersję AMP.

Możesz wybrać kolory do wyboru jak powyżej. Ponadto możesz wybrać Czcionki Google . Zalecam jednak pozostawienie go wyłączonego, ponieważ czcionki Google wydłużają czas ładowania, pokonując cel AMP.

Dalej możesz wybrać pozostawienie paska bocznego i nieskończonego przewijania , jeśli tak ma wyglądać Twoja strona internetowa. Jednak z punktu widzenia szybkości strony należy go wyłączyć.

Biblioteka ikon czcionek będzie taka sama, jak motyw wybrany na początku panelu Projekt.

nagłówek

Panel opcji nagłówka pozwala określić układ nagłówka i wygląd menu nawigacyjnego.

Pozwala także dodać przycisk Zadzwoń teraz. To przydatny przycisk dla użytkowników mobilnych.

Możesz wybrać wyświetlanie linku innego niż AMP w nagłówku. Jeśli jednak Twoi odbiorcy nie są technicznie zorientowani na SEO, mogą nie kliknąć linku.

Możesz także włączyć pasek wyszukiwania . Jest to korzystne, jeśli masz witrynę blogową.

Zaawansowana opcja nagłówka pozwala uzyskać bardziej szczegółowe ustawienia sekcji nagłówka. To kwestia wyboru. Pamiętaj jednak, aby nie dodawać do kodu, ponieważ wpłynie to negatywnie na szybkość ładowania strony.

Strona główna, Single, Footer, Page, Social Sharing, Date and Misc

Te panele opcjonalne, podobnie jak nagłówek, są całkowicie kwestią wyboru projektu. Możesz wybrać dowolne ustawienia, które najbardziej Ci odpowiadają.

Podsumowując

Powyższe kroki pomogą Ci skutecznie wdrożyć AMP w Twojej witrynie. Po zapisaniu zmian sprawdź wersję AMP w telefonie lub dopisz „/amp” po adresie URL.

Poniższe obrazy przedstawiają funkcje Twojej strony AMP.

WIZUALNA STRONA AMG

STOPKA

Masz to. Wykonaj te kroki, aby wdrożyć AMP i mieć wolne od błędów, superszybkie strony, które wczytują się w mniej niż 2 sekundy dla użytkowników telefonów komórkowych.