Kako da koristite WordPress udice (hooks) da unapredite tehnički SEO
Ako vi ili vaš klijent imate WordPress sajt, onda je dobro znati na koji način da unapredite tehnički SEO, bez instaliranja dodatnih plugin-ova. Koncept udica (hook) u WodPress-u upravo nudi takvu mogućnost. U ovom tekstu ćemo objasniti kako da iskoristite ovaj koncept.
Šta je WordPress udica (hook)?
Ukratko, WordPress udica predstavlja jednu od važnih funkcionalnosti unutar ovog popularnog CMS-a, koja developerima omogućava da na lakši način prošire ili modifikuju postojeće funkcionalnosti WordPress-a, bez menjanja izvornog koda.
U suštini možemo ih podeliti na dve osnovne kategorije. Jedna su tzv. action hooks, koji se koriste da bi se incirala neka akcija u nekom određenom delu WordPress koda, a druga kategorija su tzv filter hooks, koji se koriste za manipulaciju podacima pre nego se oni vrate iz koda.
Korišćenjem WordPress udica smanjujete potrebu za instaliranjem dodatnih pluginova i na taj način generalno doprinosite bržem radu WordPress sajta.
U ovom tekstu ćemo obraditi neke od najpopularnijih i najčešće korišćenih WordPress udica i objasniti na koji način možete da ih koristite na svom WordPress sajtu.
Neke od najpopularnijih WordPress udica
WordPress ima na hiljade udica i taj broj stalno raste, jer se sa svakom novom verzijom dodaju i nove udice. Ipak, postoje neke koje spadaju u najpopularnije jer se veoma često koriste i njihovo korišćenje se vremenom pokazalo kao dobra i bezbedna praksa.
To su sledeće udice:
- wp_enqueue_scripts
- wp_head
- script_loader_tag
- wp_header
wp_enqueue_scripts
wp_enqueue_scripts je jedan od najčešće korišćenih „action“ hook-ova u WordPressu. Ovaj hook se koristi za učitavanje skripti i stilova na WordPress stranici.
Na primer, popularni plugin Contact Form 7, učitava veliki broj CSS i JavaScript fajlova na sve stranice vašeg WordPress-a, iako će se učitati samo na jednoj stranici, odnosno tamo gde se nalazi vaša kontakt forma.
Da biste onemogućili da Contact Form 7 učitava CSS i JS kod na sve stranice, osim na stranicu na kojoj se nalazi kontakt forma, možete da upotrebite ovaj kod:
function my_dequeue_script(){
//check if page slug isn't our contact page, alternatively, you can use is_page(25) with page ID, or if it is a post page is_single('my-post')
if ( !is_page('contact') ) {
wp_dequeue_script('google-recaptcha');
wp_dequeue_script('wpcf7-recaptcha');
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'my_dequeue_script', 99 );
Ovde postoji nekoliko stvari na koje treba da obratimo pažnju. Prioritet za izvršavanje action udice je postavljen na 99, da bi se pobrinuo da se naša modifikacija koda pokreće na kraju reda.
Ukoliko prioritet podesite na 10, to neće raditi jer enqueue u Contact Form 7 koristi prioritet 20. Iz tog razloga je bitno da koristite dovoljno visoku vrednost prioriteta, da bi modifikacija mogla da se pokrene.
wp_head
wp_head je „action“ hook koji se izvršava unutar <head>; sekcije WordPress stranice. Ovaj hook se koristi za ubacivanje koda u zaglavlje stranice, kao što su meta oznake, stilovi, skripte i drugi podaci koji su neophodni za pravilno prikazivanje stranice.
Korisna primena ove udice u poboljšalju tehničkog SEO-a je recimo u činjenici da je možete korisiti da unapred učitate sve ATF (above-the-fold) resurse u head sekciju. ATF kao što znamo predstavljau sve one vizuelne elemente stranice koji su odmah vidljivi posetiocu sajta i koji se nalaze između gornje i donje ivice njegovog ekrana.
Na primer, to mogu biti Google fontovi, logotip, featured slika za blog post, sve se to uglavnom učitava kao ATF element, a mogućnost da ih unapred učitate, čini učitavanje vašeg sajta generalno bržim. Na kraju sve to rezultira boljim LPC skorom vašeg sajta.
Da biste recimo unapred učitali malopre pomenute elemente, možete koristiti kod ispod:
function my_preload() {
?>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200..900;1,200..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"/>
<link rel="preload" as="image" href="https://www.yoursite.com/path-to-logo/image.jpg"/>
<?php if( has_post_thumbnail() ): // check if article has featured image?>
<!-- Featured Image -->
<?php // $featured_image = str_ireplace(array( '.png', '.jpg', '.jpeg'), '.webp', $featured_image ); // enable this if you have webp images. ?>
<?php $featured_image = get_the_post_thumbnail_url( get_the_ID(), 'full' ); ?>
<link rel="preload" as="image" href="<?php echo $featured_image;?>"/>
<?php endif;
}
add_action('wp_head', 'my_preload', 3 );Kao što možete videti, prve dve linije ovog koda unapred učitavaju Google fontove, zatim se učitava logotip, a onda i proverava da li blog post ima featured sliku i ako je ima, onda unapred učitava i tu sliku.
script_loader_tag
script_loader_tag je „filter“ hook koji omogućava programerima da izmene HTML oznaku koja se koristi za učitavanje skripti na stranicu. Ovaj hook se izvršava unutar funkcije wp_print_scripts() kada se učitavaju skripte na stranicu.
Sigurno ste već dosta puta čuli o resursima koji blokiraju renderovanje stranice, a koji mogu biti rešeni pomoću defer ili async učitavanja JavaScript tagova. To je veoma značajno za poboljšanje FCP i LCP skora vašeg sajta.
Ovaj filter se koristi za filtiranje HTML izlaza script tagova i upravo ovaj filter je potreban za async i defer učitavanje CSS/JS fajlova vaše teme ili plugina.
function my_defer_async_load( $tag, $handle ) {
// async loading scripts handles go here as an array
$async_handles = array('wpcf7-recaptcha', 'another-plugin-script');
// defer loading scripts handles go here as an array
$defer_handles = array('contact-form-7', 'any-theme-script');
if( in_array( $handle, $async_handles) ){
return str_replace( ' src', ' async src', $tag );
}
if( in_array( $handle, $defer_handles ) ){
return str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}
add_filter('script_loader_tag', 'my_defer_async_load', 10, 2);Ovaj filter prihvata dva argumenta: HTML tag i script handle.
Možete da koristite ovaj handle da odredite koju skriptu da učitate async ili defer.
wp_headers
wp_headers je „action“ hook koji se koristi za dodavanje dodatnih zaglavlja (headers) HTTP odgovora koji se šalju klijentu prilikom prikaza stranice.
Možete ga koristiti za dodavanje security header-a na vaš sajt:
function my_headers(){
$headers['content-security-policy'] = 'upgrade-insecure-requests';
$headers['strict-transport-security'] = 'max-age=31536000; preload';
$headers['X-Content-Type-Options'] = 'nosniff';
$headers['X-XSS-Protection'] = '1; mode=block';
$headers['x-frame-options'] = 'SAMEORIGIN';
$headers['Referrer-Policy'] = 'strict-origin-when-cross-origin';
$headers['Link'] = '<https://www.yoursite.com/wp-content/uploads/themes/yourtheme/images/logo.jpg>; rel=preload; as=image';
$headers['Link'] = '<https://fonts.gstatic.com>; rel=preconnect; crossorigin';
$headers['Link'] = '</wp-content/uploads/themes/yourtheme/images/logo.webp>; rel=preload; as=image';
return $headers;
}
add_filter( 'wp_headers', 'my_headers', 100 );Pored security header-a možete da dodate i “link” tagove (koliko god želite) za pre-povezivanje ili pre-učitavanje bilo kog resursa.
U suštini, u pitanju je alternativni metod za učitavanje unapred, koje je kao tema ubrađeno u jednom od prethodnih poglavlja.
Takođe, možete u vaše HTTP header-e dodati i X-Robots-Tag (koliko god želite).
Zaključak
Plugini su namenjeni za brzo rešavanje određenih problema/proširenje funkcionalnosti WordPress-a. Ipak, oni često znaju i sami da budu uzrok određenih problema, pa čak i da uspore vaš WordPress sajt. Zato smo u ovom tekstu predstavili neke alternativne načine za proširenje WordPress funkcionalnosti, koje su po nama bolje, naročito sa aspekta unapređenja tehničkog SEO-a vašeg sajta.
2 komentara. Ostavi novi
Idem na casove za WP i ucinilo mi se da mnogo ljudi mesa pojam hook i anchor
Moguće, ali radi se o dva različita pojma koja imaju potpuno različite uloge. Dobro zapažanje 🙂 Hvala