06 Sie

Jak zacząć z przyspieszonymi stronami mobilnymi (AMP)

Obecnie Google publikuje przyspieszone strony mobilne w swoich wynikach wyszukiwania na urządzeniach mobilnych, ale jak uzyskać dostęp do tej akcji? Felietonista Paul Shapiro wyjaśnia, w jaki sposób możesz oznaczyć strony mobilne, aby zapewnić wygodę użytkownikom mobilnym.

Przyspieszony jest projekt Google Mobile Accantated Pages (AMP). Czy jesteś na to gotowy? W dzisiejszej kolumnie przedstawię przegląd oferty i pokażę, jak rozpocząć.

Co to jest AMP?

W październiku ubiegłego roku Google ogłosił Accelerated Mobile Pages (AMP), bardzo przystępną platformę do tworzenia szybko ładujących się stron mobilnych. Inicjatywa typu open source ma na celu umożliwienie wydawcom łatwego zwiększania szybkości (a co za tym idzie, wrażenia użytkownika) w zakresie mobilnego czytelnictwa bez poświęcania jakichkolwiek przychodów z reklam, na których mogą polegać.

Chociaż doświadczeni programiści często osiągają podobne wyniki dzięki intensywnym optymalizacjom wydajności, wydawcy często lekceważą to ze względu na ograniczenia zasobów. AMP pozwala łatwo uzyskać te optymalizacje bez zmieniania podstawowej obsługi mobilnej sieci.

Dodatkową zaletą jest jej przyszłe wykorzystanie przez Google i inne znaczące firmy z branży technologii internetowych, które zachęcają do korzystania z niego, integrując go w znacznym stopniu na swoich platformach.

Jak działa AMP?

Zasadniczo ramy do tworzenia mobilnych stron internetowych, AMP składa się z trzech podstawowych części:

  1. AMP HTML: podzbiór HTML, ten język znaczników ma pewne niestandardowe znaczniki i właściwości oraz wiele ograniczeń. Ale jeśli znasz zwykły HTML, nie powinieneś mieć trudności z dostosowaniem istniejących stron do AMP HTML. Aby uzyskać więcej informacji na temat tego, jak różni się on od podstawowego HTML, sprawdź listę wymaganych markowych elementów AMP Project, które musi zawierać strona HTML AMP.
  2. AMP JS: framework JavaScript dla stron mobilnych. W większości przypadków zarządza obsługą zasobów i ładowaniem asynchronicznym. Należy zauważyć, że obsługa JavaScript stron trzecich jest niedozwolona w przypadku AMP.
  3. AMP CDN: Opcjonalna sieć dostarczania treści, zajmie strony z obsługą AMP, buforuje je i automatycznie dokonuje optymalizacji wydajności.

Jak AMP Twoja strona?

Na początek musisz zachować co najmniej dwie wersje dowolnej strony artykułu: oryginalną wersję strony artykułu, którą zwykle zobaczą użytkownicy, oraz wersję AMP tej strony.

Ponieważ AMP nie zezwala na takie elementy, jak elementy formularzy i JavaScript stron trzecich, prawdopodobnie nie będziesz mieć formularzy wiodących, komentarzy na stronie i niektórych innych elementów, które możesz mieć na swojej stronie w standardowej implementacji. (Chociaż obecnie hack używa elementów iframe, które stanowią rozwiązanie tego problemu, dziękuję Conradowi O’Connellowi za pomoc w weryfikacji hackera.)

Jest również prawdopodobne, że będziesz musiał przepisać szablon witryny, aby dostosować się do ograniczeń. Na przykład wszystkie CSS w AMP muszą być w linii i mieć mniej niż 50 KB. Ze względu na intensywność ładowania niestandardowych czcionek, muszą one być ładowane za pomocą specjalnego rozszerzenia amp-font, aby lepiej kontrolować to ładowanie.

Multimedia muszą być traktowane specjalnie. Na przykład obrazy muszą wykorzystywać niestandardowy element amp-img i muszą zawierać wyraźną szerokość i wysokość. (Podczas konwersji starszej witryny na szablon AMP może to stanowić poważny problem, jeśli atrybuty szerokości i wysokości nie są już używane). Dodatkowo, jeśli Twoje obrazy są animowanymi GIF-ami, musisz użyć oddzielnego rozszerzonego komponentu amp-anim.

Podobnie jak obrazy, istnieje niestandardowy tag, który musi być używany do osadzania lokalnie hostowanych filmów wideo za pośrednictwem HTML5, nazywanego wzmacniaczem wideo. Jednak w przypadku osadzania filmów w serwisie YouTube – które stanowią większość filmów internetowych – istnieje osobny rozszerzony komponent, amp-youtube.

Istnieje również wsparcie dla takich rzeczy jak pokazy slajdów za pośrednictwem amp-karuzeli i lightboksów obrazu za pośrednictwem amp-image-lightbox, a także umieszczanie w serwisach społecznościowych na Twitterze, Instagramie, Facebooku, Pinterestu i Vine za pośrednictwem ich własnych rozszerzonych komponentów.

Te znaczniki i rozbudowane komponenty nie są trudne w użyciu; wymagają tylko trochę planowania w projekcie strony.

Aby Google (i inne technologie wspierające projekt AMP) mogły wykryć wersję Twojego artykułu AMP, musisz zmodyfikować oryginalną wersję strony artykułu. Oryginalna strona artykułu musi zawierać następujący tag, w zasadzie kanoniczny tag dla stron AMP:

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

Strona AMP Discovery wspomina również, że niektóre platformy obsługujące AMP będą wymagały metadanych Schema.org do określenia typu zawartości strony. (Obecnie “artykuł”, “przepis”, “recenzja” i “wideo” są wymienione jako przykłady typu strony na GitHub.)

Co więcej, oznacza to również, że metadane Schema.org “to wymóg, aby Twoje treści kwalifikowały się do wyświetlania w demonstracji karuzeli wiadomości w wyszukiwarce Google.” Jeśli więc próbujesz uzyskać przyszłe korzyści z Google, wdrażając AMP, upewnij się, że uzyskałeś poprawny schemat!

Jak zarabiać na reklamach w AMP?

Wzrost liczby blokujących reklamy utrudnia wydawcom zarabianie na swoich witrynach. Dla niektórych użytkowników poprawa czasu wczytywania witryny stanowi zachętę do korzystania z blokowania reklam, co może pomóc w zwiększeniu szybkości przeglądania. AMP może być postrzegana jako odpowiedź na ten problem, a projekt mówi:

Celem projektu Accelerated Mobile Pages jest zapewnienie skutecznej monetyzacji reklam w sieci mobilnej przy jednoczesnym podejściu zorientowanym na użytkownika. W tym kontekście celem jest zapewnienie wsparcia dla szerokiej gamy formatów reklam, sieci reklamowych i technologii na przyspieszonych stronach mobilnych.

W rezultacie wiele najpopularniejszych sieci reklamowych korzysta obecnie z rozszerzonego komponentu amp-ad (z większą możliwą kompatybilnością):

  • Amazon A9
  • AdReactor
  • Google AdSense
  • AOL AdTech
  • Google Doubleclick
  • Flite
  • Taboola
  • Adform
  • DotAndAds
  • plista
  • Smart AdServer
  • Yieldmo

Jeśli chcesz zobaczyć, jak one wyglądają, przykłady dla każdej sieci reklamowej znajdują się w plikach .md na stronie GitHub AMP.

Jeśli twoja monetyzacja jest bardziej złożona – z wykorzystaniem paywalls lub subskrypcji – dostępna jest dokumentacja do implementacji w AMP, używając rozszerzenia “AMP Access”.

Czy AMP ma Analytics?

Tak. W rzeczywistości analizy w AMP są bardzo inteligentne. Aby zapobiec spowolnieniu witryny przez wiele narzędzi analitycznych, wdrożyli oni filozofię “miar raz, zgłoś się do wielu”. Istnieją dwie ścieżki umożliwiające włączenie funkcji analitycznych w AMP dla Twojej witryny:

  • Element Amp-Pixel: Jest to prosty tag, który może być używany do liczenia wyświetleń stron, tak jak w przypadku typowego piksela śledzącego, za pomocą żądania GET. Istnieje wiele zmiennych, które mogą być przez nią przekazywane, na przykład DOCUMENT_REFERRER i Title.
  • Rozszerzony komponent Amp-Analytics: Jest nieco bardziej zaawansowany niż wzmacniacz-piksel. Prawdopodobnie użyjesz do wdrożenia analityki w swojej witrynie, ponieważ pozwala ona na wyższy poziom konfiguracji dla interakcji analitycznych.

Jak będzie wyglądać AMP w Google?

Firma Google przedstawiła demonstrację wyglądu funkcji AMP w SERP. Możesz go wypróbować, przechodząc do g.co/ampdemo na telefonie komórkowym (lub emuluj go w Narzędziach dla programistów Chrome). Następnie wyszukaj coś w rodzaju “Mars”. W górnej części strony zobaczysz karuzelę z artykułami AMP.

Kliknij jeden, aby uzyskać doświadczenie czytania osadzone w SERP. Możesz przesunąć palcem w prawo lub w lewo, aby przeczytać inny artykuł z obsługą AMP. To zupełnie inna przygoda – wystarczy przejść do strony AMP wydawcy.

google-blog-amp-example

W demie można znaleźć kilku głównych wydawców, takich jak The Guardian (przykładowa strona AMP).

Jak rozpocząć korzystanie z AMP w WordPress?

Jednym z najprostszych sposobów na zabranie rąk za pomocą AMP jest wdrożenie go na stronie WordPress. Oficjalna wtyczka jest rozwijana przez Automattic / WordPress i jest często aktualizowana na GitHub.

Krok 1: Zainstaluj oficjalną wtyczkę WordPress

Aby rozpocząć, przejdź do strony GitHub amp-wp i kliknij przycisk “Pobierz ZIP”.

github-download-zip

Możesz zainstalować to na swojej witrynie WordPress, tak jak każdą inną wtyczkę WordPress.

Po zainstalowaniu wystarczy dodać “/ amp /” do strony artykułu (lub, jeśli nie masz fajnych permalinków, możesz alternatywnie dołączyć “?amp = 1”).

Krok 2: Sprawdź poprawność i modyfikuj

Ostatecznie, Google Search Console powinna odnieść się do wersji AMP artykułów za pomocą znacznika rel = “amphtml” dodanego przez wtyczkę, co pozwala na łatwą weryfikację artykułów hurtowo. Jedynym problemem, jaki do tej pory miałem, jest to, że nie wykrywa zmian bardzo szybko. Jeśli coś naprawisz, korekta może nie pojawić się przez kilka dni.

amp-validation-search-console-webmaster-tools

Zalecam użycie kombinacji procesu Search Console i sprawdzania poprawności Chrome. Aby użyć procesu sprawdzania poprawności Chrome, przejdź na jedną ze stron AMP w Chrome i dodaj “# development = 1” na końcu adresu URL. Wciśnij Control + Shift + I, aby otworzyć Narzędzia dla programistów w przeglądarce Chrome i udać się do konsoli.

Może być konieczne odświeżenie strony, ale gdy to zrobisz, powie “Sprawdzanie poprawności AMP” lub poda listę problemów do naprawienia.

validating-amp-pages-in-chrome

Najprawdopodobniej samo zainstalowanie wtyczki WordPressa nie wystarczy, a będziesz musiał przejść i zweryfikować wszystkie strony, które chcesz wykorzystać w Accelerated Mobile Pages.

W zależności od sposobu formatowania artykułów może być konieczne wprowadzenie pewnych zmian w celu sprawdzenia poprawności stron AMP. Najczęstszymi problemami, z którymi się zetknąłem, było określenie atrybutów wysokości i szerokości dla obrazów oraz korekta starych kodów osadzających YouTube, które nie używają protokołu HTTPS.

Krok 3: Pobierz znacznik schematu do sprawdzenia poprawności

Jak wcześniej wspomniano, ważne jest również, aby na stronach AMP były prawidłowe znaczniki schematu. Aby przetestować swoje strony pod kątem prawidłowych znaczników, możesz skorzystać z Google Structured Data Testing Tool. Miałem problemy z WordPressem, które nie wyświetlało logo wydawcy i wymagało wprowadzenia następującej modyfikacji wtyczki.

Edytuj plik class-amp-post-template.php, za pośrednictwem FTP lub pulpitu WordPress (przejdź do wtyczek> Editor, a następnie wybierz “AMP”) i zmień:

if ( $site_icon_url ) {

$metadata[‘publisher’][‘logo’] = array(

‘@type’ => ‘ImageObject’,

‘url’ => $site_icon_url,

‘height’ => self::SITE_ICON_SIZE,

‘width’ => self::SITE_ICON_SIZE,

);

}

na

$metadata[‘publisher’][‘logo’] = array(

‘@type’ => ‘ImageObject’,

‘url’ => ‘http://domain.com/wp-content/uploads/logo-60.png’,

‘height’ => 60,

‘width’ => 170,

);

Pamiętaj, aby zastąpić adres URL ścieżką do własnego logo wydawcy i określić wysokość i szerokość w pikselach. Tutaj znajdziesz informacje dotyczące odpowiednich znaczników, które określają, że “idealnie logotypy mają dokładnie 60 pikseli wysokości i szerokość <= 600 pikseli.”

Krok 4: Pierwsze Google Analytics pracuje z wtyczką AMP WordPress

Co to jest strona internetowa, jeśli nie możesz jej śledzić za pomocą narzędzi analitycznych? Wtyczka AMP WordPress nie włącza amp-analytics po wyjęciu z pudełka, ale jest dość prosta w obsłudze. Aby włączyć wtyczkę AMP WordPress do pracy z Google Analytics, edytuj plik amp-post-template-actions.php (inny plik z tego wcześniej wspomnianego), za pośrednictwem FTP lub pulpitu WordPress (przejdź do Wtyczki> Edytor, a następnie wybierz “AMP”) i dodaj na końcu:

add_action( ‘amp_post_template_head’, ‘amp_post_template_add_analytics_js’ );

function amp_post_template_add_analytics_js( $amp_template ) {

$post_id = $amp_template->get( ‘post_id’ );

?>

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

<?php

}

add_action( ‘amp_post_template_footer’, ‘xyz_amp_add_analytics’ );

function xyz_amp_add_analytics( $amp_template ) {

   $post_id = $amp_template->get( ‘post_id’ );

   ?>

<amp-analytics type=”googleanalytics” id=”analytics1″>

<script type=”application/json”>

{

 “vars”: {

“account”: “UA-XXXXX-Y”

 },

 “triggers”: {

“trackPageview”: {

 “on”: “visible”,

 “request”: “pageview”

}

 }

}

</script>

</amp-analytics>

   <?php

}

Upewnij się, że zmieniasz UA-XXXXX-Y, by reprezentował identyfikator usługi Google Analytics Twojej witryny.

Teraz ponownie sprawdź swoje strony AMP i powinieneś mieć podstawową konfigurację AMP z włączonym śledzeniem dla twojej strony WordPress.

Wniosek

AMP zapewnia stosunkowo łatwy sposób na zwiększenie szybkości witryn mobilnych dla wydawców. Pod koniec lutego i Google News Lab przeprowadzając regularne godziny pracy za pośrednictwem Hangouts, możemy spodziewać się, że Google wkrótce wdroży swoją integrację. W tym, co wydaje się być odpowiedzią na impet Projektu AMP, nawet Facebook może reagować. Niedawno zdecydował się otworzyć artykuły dla wszystkich wydawców.

Jesteś wydawcą? Jeśli tak, musisz zacząć myśleć o Przyspieszonych stronach mobilnych.

ŹRÓDŁO

AMP