Jako programista WordPress twoim priorytetem jest budowanie angażujących i wydajnych stron internetowych dla swoich klientów. Często jednak łatwiej powiedzieć niż zrobić. Rozumiesz różne zmienne, które sprawiają, że Gwiezdne doświadczenie na miejscu, ale co robisz, gdy siły zewnętrzne dyktują, że robią to inaczej?

Weźmy na przykład doświadczenie mobilne. Pięć do dziesięciu lat temu projektowałeś strony internetowe, aby były “przyjazne dla urządzeń mobilnych”. Kilka lat temu responsive web design stał się niezbędny dla każdej strony internetowej, która chciała naprawdę konkurować w cyfrowym krajobrazie. A teraz … cóż, teraz Google mówi, że jest jeszcze inny sposób, w jaki Programiści WordPress powinni obsługiwać urządzenia mobilne.

Wiesz, zawsze wydaje się, że Google ma misję ulepszania sieci. Stały się bardziej rygorystyczne w odniesieniu do HTTPS i karane strony internetowe,które nie dokonują zmiany. Złamali strony internetowe, które nie biorą pod uwagę dostępności. Ich mobilna inicjatywa wkrótce stanie się rzeczywistością.

Jednak do tego dnia Google zaoferowało własne rozwiązanie wydawcom, webmasterom i programistom internetowym, którzy chcą stworzyć całkowicie przyjazne dla urządzeń mobilnych środowisko dla swoich użytkowników. Nazywa się AMP, czyli przyspieszone strony mobilne.

Ponieważ mobile UX odgrywa dużą rolę w procesie tworzenia WordPress, projekt AMP Google może wydawać się wybawieniem, ponieważ obiecuje dostarczyć narzędzia potrzebne do stworzenia błyskawicznego zaangażowania użytkowników mobilnych. Ale czy to wszystko? Czy to naprawdę takie proste? Może nie.

Przyjrzyjmy się, czym jest Google AMP, co robi z zawartością WordPress i dlaczego może dotyczyć niektórych programistów internetowych. Dla tych z Was, którzy nie boją się AMP i nie są podekscytowani tym nowym frameworkiem open-source, przeprowadzę was przez jak korzystać z wtyczki, aby rozpocząć, a następnie przetestować swoją implementację za pomocą bezpłatnego narzędzia do sprawdzania poprawności tutaj!

Co musisz wiedzieć o Google AMP

Zacznijmy od podstaw. Czym jest Google AMP?

Pierwotnie inicjatywa amp open source została wprowadzona w 2015 roku w celu poprawy szybkości witryny na urządzeniach mobilnych. Według Google, jednak, to wykraczało poza tylko poprawę doświadczenia mobilnego dla użytkowników. AMP miał być rozwiązaniem, które pomogło wydawcom skuteczniej zarabiać na mobilnych doświadczeniach:

“Chcemy, aby strony internetowe z bogatymi treściami, takimi jak wideo, animacje i grafika, współpracowały z inteligentnymi reklamami i ładowały się natychmiast. Chcemy również, aby ten sam kod działał na wielu platformach i urządzeniach, aby zawartość mogła natychmiast pojawić się wszędzie—bez względu na rodzaj telefonu, tabletu lub urządzenia mobilnego.”

W przypadku luzu reklamowego, jaki widzieliśmy od użytkowników, było to sprytne posunięcie Google.

Jeśli chodzi o wygląd AMP, prawdopodobnie napotkałeś artykuły AMP w swoich podróżach po mobilnej sieci, ale być może nie byłeś tego świadomy. Oto skąd wiesz, że napotkałeś artykuł AMP:

AMP in Google Search

Widzisz tę ikonę błyskawicy obok czasu postu? To wskaźnik dla AMP.

Po kliknięciu na artykuł AMP w wyszukiwarce, oto, co napotkasz:

AMP Article

Wygląda jak większość innych responsywnych treści, które można napotkać, prawda? Tak jakby. Zobacz na górze, jak adres internetowy jest faktycznie przypisany do Google? Bo tak jest. Ten konkretny artykuł znajduje się na:
https://www.google.com/amp/s/www.gq.com/story/what-is-art-basel-coolest-streetwear-guys-interview/amp

Jeśli chcesz przejść bezpośrednio do źródła artykułu, musisz kliknąć przycisk łańcucha hiperłącza u góry:

AMP Hyperlink Button

Inną kluczową różnicą między standardowym mobilnym doświadczeniem a AMP jest centryczność reklam tych artykułów. Nie oznacza to, że każda strona treści, którą optymalizujesz dla AMP, musi być monetyzowana, ale jest to część korzyści płynących z korzystania z tej technologii. Oto jak ten artykuł wyświetla swoje reklamy w linii:

AMP Advertisements

Jeśli znasz Artykuły błyskawiczne na Facebooku, AMP będzie wyglądać znajomo. Główna różnica między nimi polega na tym, że można znaleźć treści zoptymalizowane pod kątem urządzeń mobilnych. Facebook Facebook Instant Articles są dostępne tylko za pośrednictwem Facebooka, artykuły AMP są prawie wszędzie indziej (np. Google, Bing, Medium, Twitter), co sprawia, że jest to bardzo pożądana alternatywa dla osób, które lubią to, co zrobił Facebook, ale chcą większego zasięgu.

Czy Google AMP jest wszystkim, co jest pęknięte?

Szybkość i optymalizacja wydajności są obecnie często omawiane w połączeniu z WordPress. Według Google, odwiedzający-zwłaszcza ci na urządzeniach mobilnych-po prostu nie mają cierpliwości, aby radzić sobie z frustrującymi doświadczeniami.

Obecnie trzy czwarte witryn mobilnych zajmuje więcej niż dziesięć sekund, aby załadować, co nie idzie dobrze z 53% użytkowników mobilnych, którzy przeskakują statek po zaledwie trzech sekundach ładowania. Dzięki witrynom zarabiającym dwa razy więcej przychodów z reklam mobilnych, gdy witryna ładuje się w czasie poniżej 5 sekund, a nie dłużej niż 19 sekund, możesz zobaczyć, dlaczego Google uznał AMP za niezbędną inicjatywę do uruchomienia.

Co sprawia, że AMP jest tak szybki? Jest zbudowany na trzech komponentach optymalizujących prędkość:

  • AMP HTML: To jest tylko spolszczona wersja HTML.
  • AMP JS: Jest to wersja AMP JavaScript. Wykorzystuje najlepsze praktyki JavaScript, a także bibliotekę do zarządzania całym ładowaniem zasobów.
  • Amp Cache: Ten system buforowania jest odpowiedzialny za pobieranie zawartości AMP, buforowanie jej i dostarczanie Użytkownikom w najszybszy możliwy sposób.

Według studiów przypadków od niektórych z ich bardziej głośnych użytkowników, AMP działa bardzo dobrze, aby zwiększyć zaangażowanie i retencję oraz poprawić wzrost. Na przykład magazyn Time informuje, że odwiedzający spędzają 13 razy dłużej na swojej stronie mobilnej z AMP. Z drugiej strony Gizmodo mówi, że 80% odwiedzających AMP jest zupełnie nowych na swojej stronie.

I nie są to jedyne korzyści związane z AMP:

  • AMP nie wymaga dużych zespołów programistów ani dużego budżetu. W rzeczywistości większość programistów ma już umiejętności korzystania z tego, zwłaszcza jeśli pracują w WordPress.
  • Google obiecuje, że twórcy stron internetowych nadal będą mogli tworzyć elastyczne, spersonalizowane i markowe aplikacje mobilne. Jeśli porównasz powyższy przykład GQ z artykułem na stronie GQ, zobaczysz, że to prawda.
  • Według Google AMP integruje się z ponad setką narzędzi analitycznych, systemami zarządzania treścią, a także innymi wiodącymi rozwiązaniami technologicznymi.
  • Bing jest nawet pod wrażeniem, ponieważ twierdzi, że strony AMP ładują się o 80% szybciej niż inne.

Oczywiście AMP nie jest wolny od krytyki. Jest kilku programistów i wydawców, którzy wyrazili zaniepokojenie tym, więc szybko podsumujmy, dlaczego AMP może nie być dobrym rozwiązaniem dla wszystkich stron internetowych:

Mylące UX
Spójrz jeszcze raz na ten przykład GQ:

AMP Confusing UX

Widzisz, jak jest przycisk” X ” w lewym górnym rogu? Po kliknięciu przenosi użytkowników z powrotem do wyników wyszukiwania Google. O ile odwiedzający nie biegle znają treści Google AMP, może to spowodować pewne zamieszanie, gdy próbują dowiedzieć się, jak dostać się do witryny lub artykułu źródłowego. Google zdaje sobie sprawę z tego możliwego zamieszania i pracuje nad lepszym rozwiązaniem do projektowania górnych pasków.

Utrata Funkcjonalności Wtyczki
Podczas gdy AMP prawdopodobnie zwiększy Twoje treści w SEO ze względu na ulepszone wrażenia mobilne, wiąże się to z kompromitacją. Ponieważ wykorzystuje bardzo lekki HTML i JavaScript, tak naprawdę nie działa z wtyczkami tak dobrze, zwłaszcza tymi, które dodają formularze kontaktowe, wyskakujące okienka lub inną dynamiczną zawartość do twojej witryny.

Błąd Google Analytics
Najwyraźniej istnieje dobrze udokumentowany błąd z Google Analytics, gdy próbuje uzyskać dostęp do ruchu AMP. Google jest świadomy problemu i nie ma jeszcze rozwiązania. Aby uzyskać dokładne informacje o ruchu drogowym, na razie musisz polegać na analizie AMP.

Trudności w realizacji
Nie każdy Web developer zgadza się, że AMP jest łatwy do wdrożenia. To dlatego, że AMP nie jest uniwersalnym rozwiązaniem dla wszystkich typów stron internetowych, a nawet wszystkich typów treści. Na przykład:

  • AMP naprawdę działa dobrze tylko na blogach i wiadomościach, a nie na stronach internetowych.
  • Nie jest to również idealne rozwiązanie dla wszystkich stron internetowych. Te, które skupiają się na opowiadaniu historii–ponownie, blogi i serwisy informacyjne–to te, które skorzystają z tego formatu najbardziej.
  • Musisz utworzyć dwie oddzielne wersje treści: jedną dla zwykłej wersji witryny na komputery stacjonarne i mobilne oraz jedną dla AMP.
  • Jeśli wiesz już, jak kodować za pomocą HTML i CSS, zmniejszy to krzywą uczenia się. Musisz jednak użyć specyficznych reguł AMP, aby przepisać kod i zaktualizować znaczniki multimedialne dla każdego fragmentu treści, który chcesz przenieść do AMP.

Jak zacząć korzystać z AMP w WordPress

Jeśli zdecydowałeś, że AMP będzie świetny dla Twojej witryny, rzućmy okiem na to, jak możesz zacząć używać AMP w WordPress, a następnie sprawdzić, czy wszystko działa poprawnie (mamy do tego narzędzie tutaj!).

1. Pobierz wtyczkę

Po pierwsze: zainstaluj wtyczkę AMP for WP w WordPress. Programista wtyczki wykonuje świetną robotę wyjaśniając, jak to zrobić tutaj (zacznij od 2: 50-mark):

[youtube https://www.youtube.com/watch?v=Em1nsE_KaKw?rel=0]

Gdy poświęcisz trochę czasu na zbadanie tej wtyczki, pamiętaj o kilku rzeczach:

  1. Że obsługuje wiele formularzy kontaktowych i wtyczek call-to-action, których możesz nie używać, jeśli dodasz je samodzielnie. (Co jest ulgą.)
  2. Deweloper ma niesamowitą sekcję samouczków AMP na swojej stronie internetowej, która pomoże w pytaniach, takich jak optymalizacja treści AMP pod kątem wyszukiwania, Jak korzystać z WooCommerce i tak dalej.
  3. Ta wtyczka dodaje narzędzie do tworzenia stron AMP do WordPress, które usprawnia proces tworzenia treści stworzonych specjalnie dla urządzeń mobilnych. Oto film, jak go używać:
[youtube https://www.youtube.com/watch?v=vAGPFKKm5G4?rel=0]

2. Twórz Treści

Następnie nadszedł czas, aby utworzyć zawartość. Pamiętaj, aby odwoływać się do samouczków Google AMP, abyś wiedział, jak kodować i konfigurować strony zgodnie z wytycznymi. Możesz również użyć tego, aby dowiedzieć się, jak dodawać zaawansowane funkcje i interaktywne projekty do AMP.

3. Oznacz Swoje Treści

Po zakończeniu musisz dodać tagi kanoniczne, aby pokazać Google i inne platformy publikujące treści AMP, że ta strona należy do tej kategorii.

Na oryginalnej stronie twojej witryny dołącz ten kanoniczny tag:

< link rel = "amphtml"href =" http://www.yourwebsite.com/blog/amp/">

Na stronie z zawartością AMP, którą utworzyłeś, dołącz ten kanoniczny tag:

< link rel= "canonical"href =" http://www.yourwebsite.com/blog/">

4. Edytuj znaczniki schematu

Wiesz, jak ważne jest, aby dodać schema.org znaczniki do WordPress dla lepszego SEO. Jeśli chcesz mieć pewność, że zawartość AMP jest naprawdę zoptymalizowana, musisz edytować znaczniki na dowolnej stronie utworzonej specjalnie dla AMP.

Zawartość inna niż AMP zazwyczaj wymaga tylko zdefiniowania zmiennych, takich jak nagłówek i obraz w znacznikach schematu. Jednak zawartość AMP ma bardziej rygorystyczny zestaw ustrukturyzowanych danych, które musisz zdefiniować, jak wyjaśnia Google tutaj.

Tak więc, jeśli chcesz, aby Google nie tylko uszeregował zawartość AMP, ale umieścił ją w dobrze widocznej karuzeli AMP na górze wyszukiwania, musisz dostosować swoje podejście do pisania znaczników dla zawartości AMP. Należy również pamiętać, że nie można używać mikrodanych dla zawartości AMP; akceptowany jest tylko kod JSON-LD.

5. Dodaj Google Analytics

Google Analytics może być obecnie wadliwy, ale to nie znaczy, że nie powinieneś śledzić treści AMP. Nigdy nie wiesz, kiedy Google rozwiąże tę usterkę, a konfiguracja nie zajmuje czasu. Po prostu przejdź do wtyczki AMP i dodaj tam swój identyfikator Google Analytics.

6. Potwierdź Swoją Stronę

Po utworzeniu i oznakowaniu treści nadszedł czas, aby sprawdzić, czy strona jest poprawna. Możesz również przetestować swoje strony tutaj na stronie WPMU DEV.

Po prostu wprowadź swój adres URL w polu powyżej. Wyniki weryfikacji otrzymasz w osobnej przeglądarce. Jeśli wszystko jest dobre, jesteś gotowy, aby przejść do ostatniego kroku!

7. Indeksuj swoją zawartość AMP

Accelerated Mobile Pages

Na koniec ważne jest indeksowanie zawartości AMP w Google Search Console.

W obszarze Wygląd wyszukiwania kliknij przyspieszone strony mobilne. Twoje strony powinny pojawić się tutaj po ich zatwierdzeniu. Gdy tak się stanie, możesz przesłać je do indeksowania.

Wrapping Up

Sekret sukcesu AMP? Wykorzystuje bardzo ograniczone HTML i JavaScript w celu publikowania szczupłych, średnich i super szybkich treści na urządzenia mobilne. Jeśli wiesz, że twoi klienci skorzystają na tworzeniu treści AMP dla swojej witryny, upewnij się, że uwzględniłeś to w swoich propozycjach projektów, a także na etapach strategii i planowania. W ten sposób możesz odpowiednio zaplanować czas i dodatkową pracę w swoim procesie od samego początku.

Do ciebie: co sądzisz o AMP? Czy twoi klienci będą na pokładzie, czy będzie to wymagało przekonywania?

Tagi:

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 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 zmienić kolor linku w WordPress (poradnik dla początkujących)

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

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…