Od jakiegoś czasu trwają prace nad wdrożeniem i rozpowszechnieniem technologii AMP. Do WordPress’a pojawił się dodatek, który ma znacząco uprościć wdrożenie. W dużej mierze robi to prawidłowo. Wystarczy ściągnąć z GitHub’a paczkę, wgrać do katalogu z wtyczkami, włączyć i to wszystko. Wtyczka na stronie WordPress’a jest rzadziej aktualizowana stąd sugestia żeby jednak wykorzystać tą z https://github.com/Automattic/amp-wp.

 

Czy naprawdę to takie proste?

Instalacja nie przysparza problemów. Należy później wejść w Ustawienia > Bezpośrednie odnośniki i ponownie zapisać ustawienia (pozwoli to na ich reset). W chwilę później nasze podstrony posiadają swoje wersje AMP. Dostęp do nich następuje w momencie dodania do adresu końcówki /amp lub jeśli nie mamy ustawionych ładnych adresów … ?amp=1.

Google zachęca do sprawdzenia poprawności kodu:

Strony, które posiadają błędy nie będą indeksowane. Warto więc się przyłożyć do ich pozbycia.

 

Dlaczego to takie ważne?

Otóż Google chce wykorzystywać poprawnie przygotowane dane do wyświetlania w nowym projekcie. Według informacji dostępnych w sieci (http://searchengineland.com/google-amp-coming-rank-fast-238046), Google planuje w okolicy lutego zmienić sposób wyświetlania wyników organicznych. Jakie dane będą wykorzystywane? Wydawca, logo, data utworzenia, data modyfikacji. Te dane mają być dostarczane za pomocą danych strukturalnych schemas.org.

Smartphone - google

Pierwszy problem

Problem pojawił się z logo. Dane odpowiedzialne za dodanie logotypu były oznaczone jako //TODO (do zrobienia). Ustawiłem je ręcznie w pliku includes/class-amp-post-template.php:

$this->add_data_by_key( 'metadata', array(
    '@context' => 'http://schema.org',
    '@type' => 'BlogPosting',
    'mainEntityOfPage' => $this->get( 'canonical_url' ),
    // TODO: logo

    'publisher' => array(
        '@type' => 'Organization',
        'name' => $this->get( 'blog_name' ),
        'logo' => array(
            '@type' => 'ImageObject',
            'url' => 'http://secureglass.net/wp-content/uploads/2014/08/logo.png',
            'width' => '180',
            'height' => '80',
        )
    ),

    'headline' => $post_title,
    'datePublished' => date( 'c', $post_publish_timestamp ),
    'dateModified' => date( 'c', $post_modified_timestamp ),
    'author' => array(
        '@type' => 'Person',
        'name' => $post_author->display_name,
    ),
    'image' => $this->get_post_image_metadata(),
) );

Obecna wersja dostępna na GitHub już ma tę funkcję zrobioną. Wykorzystuje ona ikonę strony:

$site_icon_url = $this->get( 'site_icon_url' );
if ( $site_icon_url ) {
    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => $site_icon_url,
        'height' => self::SITE_ICON_SIZE,
        'width' => self::SITE_ICON_SIZE,
    );
}

Nie wszyscy będą chcieli się nią posługiwać więc warto wiedzieć gdzie tego szukać.

 

kk Star Ratings do Rich Snippets

Jako dodatek, który realizuje u mnie funkcje ocen i rich snippets, wykorzystywany jest kk Star Ratings 2.4.1. W przypadku wersji desktopowej nie ma z nim absolutnie żadnego problemu. Badając wersję AMP, w konsoli pojawiały się liczne błędy związane z wykorzystaniem xmlns więc należało zmodyfikować plugin, żeby dostarczał dane jako Microdata.

Fragment realizujący to zadanie można znaleźć z pliku index.php dodatku, w linii 653 i zmienić na następujący:

if($score)
{
    $votes = get_post_meta($id, '_kksr_casts', true) ? get_post_meta($id, '_kksr_casts', true) : 0;
    $avg = $score ? number_format((float)($score/$votes), 2, '.', '') : 0;
    $per = $score ? number_format((float)((($score/$votes)/5)*100), 2, '.', '') : 0;
    
    $leg = str_replace('[total]', '<span itemprop="reviewCount">'.$votes.'</span>', $legend);
    $leg = str_replace('[avg]', '<span itemprop="ratingValue">'.$avg.'</span>/<span itemprop="bestRating">'.$best.'</span>', $leg);
    $leg = str_replace('[per]',$per.'%', $leg);
    $leg = str_replace('[s]', $votes==1?'':'s', $leg);
    
    $snippet = '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">';
    $snippet .= '<span itemprop="itemReviewed" class="kksr-title">' . $title . '</span>';
    $snippet .= '<span >';
    $snippet .= '    <span itemprop="ratingCount">';
    $snippet .=          $leg;
    $snippet .= '    </span>';
    $snippet .= '</span>';
    $snippet .= '</div>';
}

Ten problem został rozwiązany. Następny problem związany jest z wykorzystaniem bardzo popularnej wtyczki…

 

W3Total Cache

Konsola wyświetla bardzo wiele błędów w javascriptach dorzucanych przez plugin, które de facto nie są wykorzystywane na stronach AMP. Należy wyłączyć minifikację W3TotalCache na tych i tylko tych stronach. Inne nie będą dodawane przez plugin AMP.

Można to zrobić w ustawieniach pluginu:

W3Total Cache - ustawienia

Jetpack Photon

Kolejnym dodatkiem, z którego korzystam a generuje całą masę błędów z obrazkami jest Photon. Dodatek sam w sobie bardzo fajny. Odpowiada za umieszczenie wszelakich obrazków na zewnętrznych serwerach (CDN) umożliwiając przeglądarce jednoczesne pobieranie większej ilości danych. Skraca to znacznie czas wczytywania. Wadą jest natomiast nieprawidłowe oznaczanie wysokości obrazów. To generuje błędy.

Wyłączenie Photona na stronach AMP zrealizowałem wklejając do kodu pliku amp.php, na samym końcu:

function amp_render() {
    amp_load_classes();

    add_action( 'pre_amp_render', 'amp_jetpack_disable_photon' );
    add_filter( 'jetpack_photon_skip_image', '__return_true');

    $post_id = get_queried_object_id();
    do_action( 'pre_amp_render_post', $post_id );
    amp_add_post_template_actions();
    $template = new AMP_Post_Template( $post_id );
    $template->load();
    exit;
}

 

 

Templatka AMP

Ponieważ Przyspieszone Strony Mobilne (Accelerated Mobile Pages) nie są aż tak rozbudowane graficznie jak responsywne a nasz standardowy szablon z dodatku zwłaszcza, należy się zastanowić nad delikatnym jego wzbogaceniem. Mam tu na myśli podmianę logotypu, ustawienie swoich czcionek i kolorów oraz dodanie obrazu wpisu, który niemal zawsze wzbogaca treść.

Smartphone - the washington post

Podsumowując …

W ten oto sposób zrealizowałem wszystkie wymagane funkcje … niezbędne znaczniki schemas i usunięcie błędów przy walidacji plików AMP. Pozostało tylko użycie funkcji Pobierz jako Google i przesłanie wyników do indeksu.

google - structured data testing tool

Bardzo wiele osób (ja wcześniej również) postanowiło poczekać aż WordPress i inne cmsy wdrożą to rozwiązanie. Niestety problem pojawia się nie z WordPress’em samym w sobie tylko z dodatkami i ich konfiguracją. O ile programiści z WP dbają o szybkie wdrażanie wszelkich funkcjonalności to z autorami wtyczek już nie jest tak kolorowo.

Będziesz zatem czekać czy spróbujesz w godzinę samodzielnie problem rozwiązać?

WordPress i AMP – instalacja, krok po kroku 4.79/5 (19 głosów)

9 Komentarzy

  1. Przemek napisał(a):

    Niestety strony póki co nie są obsługiwane, jedynie wpisy na WordPressie. Warto to zaznaczyć, jeżeli ktoś nie posiada wpisów na stronie to wtyczka po prostu nie zadziała. Mam nadzieję, że będzie aktualizowana również pod tym kątem. Pozdrawiam.

    • Ireneusz Mazur napisał(a):

      Słuszna uwaga. Wiesz, w zasadzie nikt nie wie póki co, jak Google będzie podchodził do tematu. Jeśli będzie serwisy w serpach promował tak jak pokazuje na wizualizacjach to pewnie nie szybko strony dojdą. Myślę, że Google będzie wykorzystywał AMP jako źródło świeżych informacji (w sumie do tego najczęściej wykorzystywane są wpisy) a nie oferty firm (które często są na stronach). Dlatego wtyczka nie obsługuje stron (to oczywiście spekulacje na chwilę obecną). Oczywiście przeróbka nie jest problemem od strony kodu samego w sobie. Poczekamy, zobaczymy.

  2. Kamil napisał(a):

    „Poczekamy, zobaczymy” Dokładnie taki jest plan z naszymi stronami i wdrożeniem AMP, na ten moment za dużo zabawy bez żadnej korzyści. Za kilka miesięcy może się to zmienić i wtedy może już WP będzie miał AMP w kodzie.

  3. Michał Jangas napisał(a):

    Najwięksi stosują już takie rozwiązania – nie chodzi tylko o SEO, ale też o komfort użytkownika. Lepiej pomyśleć o tym teraz niż potem płakać, jak w wynikach mobilnych strony polecą ;)

    IMO – konkretne opracowanie, dobra robota!

  4. bobiko napisał(a):

    z tym plikiem amp.php to nie jest tak, ze po każdej aktualizacji trzeba znów edytować?

  5. Konstanty Martyniuk napisał(a):

    Dzięki wielki za artykuł – wszystkie potrzebne informacje w jednym miejscu.

  6. Speed Booster Pack napisał(a):

    https://i.gyazo.com/6d220b12c5f3f78da6525e305b616b7f.png Możesz dopisać Speed Booster Pack (bez dodania do wyjątków wyskakują błędy „Brak obowiązkowego tagu „amphtml engine v0.js script” lub jest on nieprawidłowy.” oraz ” Na stronie znaleziono kod JavaScript utworzony przez użytkownika”

  7. Rafał napisał(a):

    Coś te wtyczki do wordpressa błędami sypią, czy pojawiło się może jakieś lepsze rozwiązanie w tym temacie?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *