AMP i WordPress implementacija

AMP i WordPress implementacija

Updated: 20/03/2019.

U ovom članku objasniću šta treba uraditi kako bi jedan WordPress sajt proradio sa AMP verzijama članaka. Poseban članak sam napisao sa objašnjenjem šta je to AMP. Trudiću se da to uradim što sažetije, uputstvom korak po korak. Počnimo.

Sadržaj:

  1. Instalirajte i podesite AMP plagin
    1.1. Instalacija AMP plagina
    1.2. Povezivanje AMP-a sa Google Analitikom
    1.3. Podešavanje AMP opcija
  2. Instalirajte i podesite Glue for Yoast SEO & AMP plagin
  3. Ubacivanje Google AdSense reklama
    3.1. Podešavanja na AdSense kontrolnom panelu
    3.2. Dodavanje koda na sajt
  4. Testiranje – validacija
  5. Napomena: plaginovi za keširanje


1. Instalirajte i podesite AMP plagin

1.1. Instalacija AMP plagina

Instalirajte ovaj AMP plagin:

AMP plugin that works fine Picture 1
AMP plagin koji lepo radi
Slika 1

Ima više plaginova, ovaj je zvanični od autora AMP-a praktično i za sada, barem meni, lepo radi (kako se instalira WordPress plagin).

1.2. Povezivanje AMP-a sa Google Analitikom

Ovaj korak nije neophodan, ali je zgodno imati podatke o broju poseta na sajtu i slično. Ja koristim Google Analitiku.

Videti na Google analitici koji je Tracking-ID Vašeg sajta. Slika 2.

Google Analytics Tracking ID Picture 2
“Tracking ID” Google Analitike
Slika 2

Ako ne koristite Google Analytics, trebalo bi. Ima dosta članaka na Netu o podešavanju i korištenju – neću se time baviti u ovom članku.

Idite na opcije AMP plagina i unesite podatke kao na slici 3, s tim što se XXXXXXXX-Y menja Vašim Tracking-ID.

AMP plugin setup Picture 3
Podešavanje AMP plagina
Slika 3

Za lakše izmene, kopirajte samo kod ispod, uz zamenu XXXXXXXX-Y Vašim Tracking-ID-om.

{
    "vars": {
        "gtag_id": "<UA-XXXXXXXX-Y>",
        "config": {
            "<UA-XXXXXXXX-Y>": {
                "groups": "default"
            }
        }
    }
}


AKO SE KOD UNOSI RUČNO, ne iz menija plagina, već izmenama na sajtu, ovo je puna verzija:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<UA-XXXXXXXX-Y>",
    "config" : {
      "<UA-XXXXXXXX-Y>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Ako koristite neke druge alate za analitiku, možda će pomoći amp-analytics dokumentacija.

1.3. Podešavanje AMP opcija

Poseban članak je potreban za detalje, objašnjenje zašto, za sad ukratko, slika 4 prikazuje kako treba podesiti AMP plagin:

Recommended AMP plugin setup Picture 4
Preporučenea podešavanja AMP plagina
Slika 4


2. Instalirajte i podesite Glue for Yoast SEO & AMP plagin

Ovaj plagin povezan je sa Yoast SEO plaginom (koji svakako preporučujem). Ako ne želite koristiti Yoast SEO, onda ni ovaj plagin nije potreban (neće ni raditi). Ako koristite, onda svakako instalirajte i Glue for Yoast SEO & AMP.

Glue for Yoast SEO & AMP plugin Picture 5
Glue for Yoast SEO & AMP plagin
Slika 5

Ključno podešavanje funkcionalnosti je prikazano na slici 6. Sa opcijama za izgled/dizajn se možete “igrati” kako volite. 🙂

Setup of Glue for Yoast SEO & AMP plugin Picture 6
Podešavanje plagina Glue for Yoast SEO & AMP
Slika 6


3. Ubacivanje Google AdSense reklama

…U dva laka koraka… 🙂 Ako želite reklame na sajtu. Ako ne, slobodno ovo preskočite.

3.1. Podešavanja na AdSense kontrolnom panelu

Treba izabrati Ads – Auto Ads opciju i pod njom AUTO ADS FOR AMP, pa tamo aktivirati auto-oglase.. Slike 7 i 8 to prikazuju.

AdSense setup for AMP Picture 7
Podešavanje AdSense za AMP
Slika 7
AdSense setup for AMP Picture 8
Podešavanje AdSense za AMP
Slika 8

Ostaje još da se ode na:
Account – Settings – Account information
i odande vidi “Publisher-ID” broj, jer će to biti potrebno za naredni korak.

AdSense Publisher ID number Picture 9
AdSense Publisher ID broj
Slika 9

3.2. Dodavanje koda na sajt

Na Internetu (uključujući Google i AMP dokumentaciju) sam našao puno različitih verzija koda. Ono što je meni proradilo je sledeći kod, koji sam ubacio u functions.php u child temi na sajtu:

// reklame za amp - ucitavace se u zaglavlju

$print_amp_auto_ads = function() {
	$ad_client = 'ca-pub-xxxxxxxxxxxxxxxx'; // VAŠ Publisher ID broj ovde upišite
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		?>
		<amp-auto-ads type="adsense" data-ad-client="<?php echo esc_attr( $ad_client ); ?>"></amp-auto-ads>
		<?php
	}
};
// For Paired/Native mode.
add_action( 'wp_footer', $print_amp_auto_ads );

// kraj amp ads dela

Gugl preporučuje da se ovo implementira unošenjem sledećeg koda u head i u body tagove AMP stranica, međutim, meni ovo nije pošlo za rukom. Guglov kod:

//  Head tag deo:

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


// Body tag deo:

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
</amp-auto-ads>


4. Testiranje – validacija

Koristite alat za validaciju i vidite da li AMP verzija stranice prolazi proveru. Neki od raspoloživih alata:

Stranica koja nije po AMP standardu pokazuje greške poput ovih prilikom validacije:

Failed AMP validation Picture 1
Greška prilikom AMP validacije
Slika 10

Stranica koja je prošla validaciju:

Successful AMP validation
Uspešna AMP validacija
Slika 11


5. Napomena: plaginovi za keširanje

Postoji mnoštvo različitih plaginova za keširanje WordPress sajtova. Neke od optimizacija koje ti plaginovi rade hoće da prave probleme sa validacijom AMP stranica. Ako validacija AMP stranica javlja grešku, probajte prvo isključiti plagin za keširanje, pa ako to pomogne – vidite koje od opcija za optimizaciju u tom plaginu treba isključiti kako bi AMP proradio.

Spisak problematičnih optimizacija za LiteSpeed plagin za keširanje:

(5) Optimize

  • Load CSS Asynchronously

(7) Media

  • Lazy Load Images
  • Lazy Load Iframes

Na njihovom forumu za podršku, pitao sam da li planiraju ubaciti opciju/mogućnost da se ove optimizacije isključe samo za AMP stranice.

Share...

Komentiraj

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.