WordPress è il sistema di gestione dei contenuti (CMS) più popolare al mondo, con una quota di mercato superiore al 60%.
Una grande comunità di supporto e una serie di plug-in gratuiti disponibili rendono la creazione di un sito Web con WordPress (WP) conveniente e svolge un ruolo chiave nel motivo per cui la sua quota di mercato è così grande.
Tuttavia, come sai, l'installazione di plug-in ha un costo.
Spesso possono degradare i tuoi punteggi Core Web Vitals; Ad esempio, possono 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 plug-in premium o magari seguire un piccolo percorso di apprendimento e farlo da solo.
Puoi anche diventare ibrido e risolvere alcune parti dei tuoi problemi con la codifica personalizzata e altre parti utilizzando i plug-in.
Questo articolo ha lo scopo di aiutarti nel tuo percorso di apprendimento e tratteremo gli hook di WordPress più necessari per aiutarti a migliorare la SEO tecnica del tuo sito web.
Che cos'è un hook di WordPress?
Gli hook di WordPress sono funzionalità chiave in 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 efficace per estendere le funzionalità di WordPress e apportare modifiche personalizzate ai loro siti.
Che cos'è un gancio filtro?
La funzione filtro hook viene utilizzata per modificare l'output della funzione prima che venga restituito. Ad esempio, puoi aggiungere un suffisso ai titoli delle pagine con il nome del tuo blog utilizzando l'hook del filtro wp_title.
Cos'è un gancio d'azione?
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.
Passeremo attraverso i seguenti hook:
- wp_enqueue_scripts
- wp_head
- script_loader_tag
- template_reindirizzamento
- wp_headers
wp_enqueue_scripts
Questo è esattamente l'action hook che useresti per escludere file CSS o JS ridondanti dal caricamento su pagine in cui non sono necessari.
Ad esempio, il popolare plug-in gratuito Contact Form 7, 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 i 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(){ //verifica se lo slug della pagina non è la nostra pagina dei contatti, in alternativa, puoi utilizzare is_page(25) con l'ID della pagina o se si tratta di una pagina di post is_single('my-post') if ( !is_page ('contatto') ) { wp_dequeue_script('google-recaptcha'); wp_dequeue_script('wpcf7-recaptcha'); wp_dequeue_script('modulo-contatto-7'); wp_dequeue_style('modulo-contatto-7'); } } add_action('wp_enqueue_scripts', 'my_dequeue_script', 99 );
Ci sono alcuni punti chiave; la priorità dell'hook dell'azione è impostata su 99 per garantire che la nostra modifica venga eseguita per ultima nella coda.
Se lo imposti su, diciamo, 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à abbastanza 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. Usa lo strumento inspect element del tuo browser e controlla l'attributo id del link o dei tag script.
Screenshot dell'autore, febbraio 2023
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 action hook viene utilizzato per aggiungere qualsiasi risorsa JS, file CSS o meta tag nella sezione
della pagina web.Usando questo hook, puoi caricare le risorse above the fold nella sezione head, che possono migliorare i tuoi punteggi LCP.
Ad esempio, il precaricamento dei caratteri, che è uno dei consigli di Google, o il logo e le immagini in primo piano nelle pagine degli articoli, vengono sempre caricati above the fold e devi precaricarli per migliorare LCP.
Per questo, usa lo snippet di codice qui sotto.
function my_preload() { ?> Le prime due righe servono per precaricare i caratteri di 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 le immagini webp abilitate; in tal caso, dovresti precaricare la versione webp di essi.
script_loader_tag
Hai sentito parlare molto delle 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 e hai bisogno esattamente di 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 ) { // gli handle degli script di caricamento asincrono vanno qui come un array $async_handles = array('wpcf7-recaptcha', 'another-plugin-script'); // rimandare il caricamento degli handle degli script va qui come un 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 asincrono o rinviare.
Dopo il rinvio o il caricamento asincrono, controlla sempre tramite la console del browser se hai errori JS. Se vedi errori JS, potresti aver bisogno di uno sviluppatore per aiutarti, poiché risolverli potrebbe non essere semplice.
template_reindirizzamento
Questo action hook 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 schemi comuni.
Al Search Engine Journal, siamo abituati ad avere backlink contenenti spam che puntano alle nostre pagine di ricerca interne in coreano e abbiamo appreso dai log del nostro server che Googlebot li stava scansionando in modo intensivo.
Screenshot dell'autore, febbraio 2023
Il codice di risposta predefinito di WordPress è 404 non trovato, ma è meglio inserire 410 per dire a Google che se ne sono andati per sempre, quindi smette di scansionarli.
funzione my_410_function(){ if( is_search() ) { $kw = $_GET['s']; // controlla se la stringa contiene caratteri coreani if (preg_match('/[\x{AC00}-\x{D7AF}]+/u', $kw)) { status_header(410, 'Non trovato'); } }// fine di is_search } add_action( 'template_redirect', 'my_410_function', 10 );
Nel nostro caso, sappiamo di non avere contenuto coreano, motivo per cui abbiamo composto la nostra condizione in questo modo.
Ma potresti avere contenuti internazionali in coreano e le condizioni potrebbero essere diverse.
In generale, 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 modello di spam da GSC.
wp_headers
Questo action hook viene utilizzato per modificare le intestazioni HTTP di WordPress.
Puoi utilizzare questo hook per aggiungere intestazioni di sicurezza alle intestazioni HTTP di risposta del tuo sito web.
funzione mie_intestazioni(){ $intestazioni['content-security-policy'] = 'upgrade-insecure-richieste'; $header['strict-transport-security'] = 'max-età=31536000; precarico'; $header['X-Content-Type-Options'] = 'annusare'; $header['X-XSS-Protection'] = '1; modalità=blocco'; $header['x-frame-options'] = 'STESSA ORIGINE'; $header['Referrer-Policy'] = 'strict-origin-quando-cross-origin'; $header['Link'] = '
Oltre alle intestazioni di sicurezza, puoi aggiungere tag "Link" (quanti ne vuoi) per pre-collegare o precaricare qualsiasi risorsa.
Fondamentalmente, è un metodo alternativo di precaricamento, che è stato trattato sopra.
Puoi anche aggiungere "X-Robots-Tag" (quanti ne vuoi) alle tue intestazioni HTTP in base alle tue esigenze.
Conclusione
I plug-in sono spesso mirati a risolvere un'ampia varietà di attività 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 la SEO tecnica, ma WordPress ha un gran numero di action hook che puoi esplorare e utilizzare per fare praticamente tutto ciò che desideri con un uso minimo di plug-in.
Altre risorse:
Immagine di presentazione: Grafico moze/Shutterstock
