Come usarli per migliorare la SEO

WordPress è il sistema di gestione dei contenuti (CMS) più popolare al mondo, con una quota di mercato superiore a 60%.

Una grande comunità di supporto e una serie di plug-in gratuiti disponibili rendono conveniente la creazione di un sito Web con WordPress (WP) e svolgono un ruolo chiave nel motivo per cui la sua quota di mercato è così grande.

Tuttavia, come sai, l’installazione dei plugin ha un costo.

Spesso possono degradare il tuo Segnali Web fondamentali punteggi; Ad esempio, potrebbero caricare file CSS o JS non necessari su ogni pagina in cui non sono necessari.

Per risolvere questo problema, devi assumere un programmatore che lo faccia per te, acquistare un plugin premium o magari seguire un piccolo percorso di apprendimento e farlo da solo.

Puoi anche diventare ibrido e risolvere alcune parti dei tuoi problemi tramite codifica personalizzata e altre parti utilizzando plug-in.

Questo articolo ha lo scopo di aiutarti nel tuo percorso di apprendimento e tratteremo gli hook WordPress più necessari per aiutarti a migliorare la SEO tecnica del tuo sito web.

Cos’è un Hook WordPress?

Gli hook di WordPress sono funzionalità chiave di WP che consentono agli sviluppatori di estendere le funzionalità del CMS senza la necessità di modificare i file WP principali, semplificando l’aggiornamento di temi o plug-in senza interrompere le modifiche personalizzate.

Forniscono agli sviluppatori un modo potente per estendere le funzionalità di WordPress e apportare modifiche personalizzate ai loro siti.

Cos’è un gancio per filtro?

La funzione filtro hook viene utilizzata per modificare l’output della funzione prima che venga restituito. Ad esempio, puoi suffiggere i titoli delle pagine con il nome del tuo blog utilizzando il suffisso wp_titolo gancio del filtro.

Cos’è un Action Hook?

Gli action hook consentono ai programmatori di eseguire determinate azioni in un punto specifico dell’esecuzione di WP Core, plugin o temi, ad esempio quando viene pubblicato un post o vengono caricati file JS e CSS.

Imparando alcuni hook o filtri di azione di base, puoi eseguire un’ampia gamma di attività senza la necessità di assumere sviluppatori.

Esamineremo i seguenti hook:

• wp_enqueue_scripts
• wp_head
• script_loader_tag
• template_reindirizzamento
• wp_headers

wp_enqueue_scripts

Questo è esattamente l’action hook che utilizzeresti per escludere il caricamento di file CSS o JS ridondanti su pagine in cui non sono necessari.

Ad esempio, il popolare free Modulo di contatto 7 plugin, che ha oltre 5 milioni di installazioni, carica file CSS e JS su tutte le pagine, mentre è necessario caricarlo solo dove esiste il modulo di contatto.

Per escludere file CF7 CSS e JS su pagine diverse dalla pagina dei contatti, puoi utilizzare lo snippet di codice riportato di seguito.

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 );

Ci sono alcuni punti chiave; la priorità dell’action hook è impostata su 99 per garantire che la nostra modifica venga eseguita per ultima nella coda.

Se lo imposti, ad esempio, su 10, non funzionerà perché la funzione di accodamento CF7 utilizza la priorità 20. Quindi, per assicurarti che il tuo venga eseguito per ultimo e abbia un effetto, imposta una priorità sufficientemente grande.

Inoltre, nel codice, abbiamo utilizzato come identificatore di argomento della funzione “contact-form-7”; potresti chiederti come l’ho trovato.

È piuttosto semplice e intuitivo. Utilizza semplicemente lo strumento Ispeziona elemento del tuo browser e controlla l’attributo id dei tag link o script.

Puoi controllare il codice sorgente del tuo sito web utilizzando l’elemento inspect e iniziare a rimuovere dalla coda qualsiasi file JS o CSS dove non sono necessari.

wp_head

Questo hook di azione viene utilizzato per aggiungere qualsiasi risorsa JS, file CSS o meta tag nel file sezione della pagina web.

Usando questo hook, puoi caricare risorse “above the fold” nella sezione head, il che può migliorare il tuo LCP punteggi.

Per esempio, precarico dei caratteriche è uno dei consigli di Google, ovvero il logo e le immagini in primo piano nelle pagine degli articoli, caricati sempre sopra la piega e devi precaricarli per migliorare LCP.

A tale scopo, utilizza lo snippet di codice riportato di seguito.

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 );

Le prime due righe servono per precaricare i caratteri Google, quindi precarichiamo il logo e controlliamo se l’articolo ha un’immagine in primo piano, quindi precarichiamo l’immagine in primo piano.

Come nota aggiuntiva, il tuo tema o sito potrebbe avere immagini webp abilitate; in tal caso, dovresti precaricarne la versione webp.

script_loader_tag

Hai sentito molto parlare di risorse che bloccano il rendering che possono essere risolte rinviando o caricando in modo asincrono i tag JavaScript. È fondamentale per migliorare FCP E LCP.

Questa azione di filtro viene utilizzata per filtrare l’output HTML dei tag di script ed è necessario esattamente questo filtro per sincronizzare o rinviare il caricamento del tema o dei file JS/CSS del plug-in.

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);

Questo filtro accetta due argomenti: tag HTML e handle di script, che ho menzionato sopra durante l’esame tramite l’elemento inspect.

È possibile utilizzare l’handle per decidere quale script caricare in modo asincrono o rinviare.

Dopo aver posticipato o sincronizzato il caricamento, controlla sempre tramite la console del browser se sono presenti errori JS. Se vedi errori JS, potresti aver bisogno dell’aiuto di uno sviluppatore, poiché risolverli potrebbe non essere semplice.

template_reindirizzamento

Questo hook di azione viene chiamato prima di determinare quale modello caricare. Puoi usarlo per modificare il codice di stato HTTP della risposta.

Ad esempio, potresti avere backlink di spam alle tue pagine di query di ricerca interne contenenti caratteri strani e/o modelli comuni.

Noi di Search Engine Journal siamo abituati ad avere backlink di spam che puntano alle nostre pagine di ricerca interne in coreano e abbiamo appreso dai log dei nostri server che Googlebot li stava scansionando intensamente.

Screenshot dell’autore, febbraio 2023

Il codice di risposta predefinito di WordPress è 404 non trovato, ma è meglio inserirlo 410 per dire a Google che se ne sono andati per sempre, quindi smette di scansionarli.

function my_410_function(){
  if( is_search() ) {
    $kw = $_GET['s'];
    // check if the string contains Korean characters
    if (preg_match('/[\x{AC00}-\x{D7AF}]+/u', $kw)) {
     status_header(410, 'Not Found');
    }
  }// end of is_search
}
add_action( 'template_redirect', 'my_410_function', 10 );

Nel nostro caso, sappiamo che non abbiamo contenuti coreani, motivo per cui abbiamo composto la nostra condizione in questo modo.

Ma potresti avere contenuti internazionali in coreano e le condizioni potrebbero differire.

Generalmente, per i non programmatori, ChatGPT è un ottimo strumento per generare condizioni utilizzando un’espressione regolare, che puoi utilizzare per creare una condizione if/else basata sul tuo pattern di spam da GSC.

wp_headers

Questo action hook viene utilizzato per modificare le intestazioni HTTP di WordPress.

Puoi usare questo hook per aggiungere intestazioni di sicurezza alle intestazioni HTTP di risposta del tuo sito web.

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 );

Oltre alle intestazioni di sicurezza, puoi aggiungere tag “Link” (quanti vuoi) per preconnettere o precaricare qualsiasi risorsa.

Fondamentalmente si tratta di un metodo di precaricamento alternativo, trattato in precedenza.

Puoi anche aggiungere “X-Robots-Tag” (quanti vuoi) alle tue intestazioni HTTP in base alle tue esigenze.

Conclusione

I plugin hanno spesso lo scopo di risolvere un’ampia varietà di compiti e spesso potrebbero non essere progettati specificamente per soddisfare le tue esigenze specifiche.

La facilità con cui puoi modificare il core di WordPress è uno dei suoi aspetti più belli – e puoi modificarlo con poche righe di codice.

Abbiamo discusso degli action hook che puoi utilizzare per migliorare il SEO tecnico, ma WordPress ha un gran numero di ganci di azione puoi esplorare e utilizzare per fare praticamente tutto ciò che desideri con un uso minimo di plugin.

Più risorse:

Immagine in primo piano: Grafico moze/Shutterstock