Hooks WordPress : comment les utiliser pour améliorer le référencement

WordPress est le système de gestion de contenu (CMS) le plus populaire au monde, avec une part de marché de plus de 60 %.

Une grande communauté de support et un certain nombre de plugins gratuits disponibles font créer un site Web avec WordPress (WP) à un prix abordable, et il joue un rôle clé dans la raison pour laquelle sa part de marché est si importante.

Cependant, comme vous le savez, l'installation de plugins a un coût.

Ils peuvent souvent dégrader vos scores Core Web Vitals ; Par exemple, ils peuvent charger des fichiers CSS ou JS inutiles sur chaque page où ils ne sont pas nécessaires.

Pour résoudre ce problème, vous devez embaucher un programmeur pour le faire pour vous, acheter un plugin premium, ou peut-être suivez un petit parcours d'apprentissage et faites-le vous-même.

Vous pouvez également devenir hybride et résoudre certaines parties de vos problèmes par un codage personnalisé, et d'autres parties à l'aide de plugins.

Cet article vise pour vous aider dans votre parcours d'apprentissage, et nous couvrirons les crochets WordPress les plus nécessaires pour vous aider à améliorer le référencement technique de votre site Web.

Qu'est-ce qu'un crochet WordPress ?

Les crochets WordPress sont des fonctionnalités clés de WP qui permettent aux développeurs d'étendre les fonctionnalités du CMS sans avoir besoin de modifier les fichiers WP principaux - ce qui facilite la mise à jour des thèmes ou des plugins sans interrompre les modifications personnalisées.

Ils offrent aux développeurs un moyen puissant d'étendre les fonctionnalités de WordPress et d'apporter des modifications personnalisées à leurs sites.

Qu'est-ce que c'est Un crochet de filtre ?

La fonction de filtre de crochet est utilisée pour modifier la sortie de la fonction avant qu'elle ne soit renvoyée. Par exemple, vous pouvez suffixer les titres de page avec le nom de votre blog à l'aide du crochet de filtre wp_title.

Qu'est-ce qu'un crochet d'action ?

Les crochets d'action permettent aux programmeurs d'effectuer certaines actions à un moment précis de l'exécution de WP Core, de plugins ou de thèmes , comme lorsqu'un article est publié ou que des fichiers JS et CSS sont chargés.

En apprenant quelques crochets d'action ou filtres de base, vous pouvez effectuer un large éventail de tâches sans avoir besoin d'embaucher des développeurs.< /p>

Nous allons passer par les hooks suivants :

• wp_enqueue_scripts
• wp_head
• script_loader_tag
• template_redirect< /li>
• wp_headers

wp_enqueue_scripts

C'est exactement le crochet d'action que vous utiliseriez pour exclure les fichiers CSS ou JS redondants du chargement sur les pages où ils ne sont pas nécessaires.

Par exemple, le populaire gratuit Le plug-in Contact Form 7, qui compte plus de 5 millions d'installations, charge les fichiers CSS et JS sur toutes les pages, alors qu'un seul en a besoin pour charger là où le formulaire de contact existe.

Pour exclure les fichiers CSS et JS CF7 sur des pages autres que la page de contact, vous pouvez utiliser l'extrait de code ci-dessous.

function my_dequeue_script(){ //vérifier si le slug de page n'est pas notre page de contact, alternativement, vous pouvez utiliser is_page(25) avec l'ID de page, ou s'il s'agit d'une page de publication 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 );

Il y a quelques points clés ; la priorité du crochet d'action est définie sur 99 pour garantir que notre modification s'exécute en dernier dans la file d'attente.

Si vous le réglez sur, disons, 10, cela ne fonctionnera pas car la fonction de mise en file d'attente CF7 utilise la priorité 20. Donc, pour vous assurer que la vôtre s'exécute en dernier et a un effet, définissez une priorité suffisamment grande.

Aussi , dans le code, nous avons utilisé comme argument de fonction l'identifiant « contact-form-7 » ; vous vous demandez peut-être comment j'ai trouvé cela.

C'est assez simple et intuitif. Utilisez simplement l'outil d'inspection des éléments de votre navigateur et vérifiez l'attribut id des balises de lien ou de script.

Capture d'écran de l'auteur, février 2023

Capture d'écran de l'auteur, février 2023

Vous pouvez vérifier le code source de votre site Web à l'aide de l'élément inspect et commencer à retirer de la file d'attente tout fichier JS ou CSS lorsqu'il n'est pas nécessaire.

wp_head

Ce crochet d'action est utilisé pour ajouter n'importe quelle ressource JS, fichiers CSS ou méta balises dans le de la page Web.

À l'aide de ce crochet, vous pouvez charger des ressources préchargées au-dessus de la ligne de flottaison dans la section d'en-tête, ce qui peut améliorer vos scores LCP.

Par exemple, le préchargement des polices, qui est l'une des recommandations de Google, ou le logo et les images en vedette sur les pages d'articles, toujours charger au-dessus du pli - et vous devez les précharger pour améliorer LCP.

Pour cela, utilisez l'extrait de code ci-dessous.

function my_preload() {?>          
Les deux premières lignes servent à précharger les polices Google, puis nous préchargeons le logo et vérifions si l'article a une vedette l'image, puis préchargez l'image sélectionnée.
 
 
 
 
 
 
 
Comme note supplémentaire, votre thème ou le site peut avoir des images webp activées ; dans ce cas, vous devez précharger leur version Webp.
script_loader_tag
Vous avez beaucoup entendu parler des ressources bloquant le rendu qui peuvent être corrigées en différant ou en chargeant asynchrone les balises JavaScript. C'est essentiel pour améliorer FCP et LCP.
Cette action de filtre est utilisée pour filtrer la sortie HTML des balises de script, et vous avez exactement besoin de ce filtre pour asynchroniser ou différer le chargement des fichiers JS/CSS de votre thème ou plugin .
function my_defer_async_load( $tag, $handle ) { // les poignées de scripts de chargement asynchrones vont ici sous forme de tableau $async_handles = array('wpcf7-recaptcha', 'another-plugin-script'); // différer le chargement des poignées de scripts aller ici sous forme de tableau $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);
Ce filtre accepte deux arguments : la balise HTML et le descripteur de script, que j'ai mentionnés ci-dessus lors de l'examen via l'élément inspect .
 
 
 
 
 
 
 
Vous pouvez utiliser la poignée pour décider quel script charger de manière asynchrone ou différée .
Après le report ou le chargement asynchrone, vérifiez toujours via la console du navigateur si vous avez des erreurs JS. Si vous voyez des erreurs JS, vous aurez peut-être besoin d'un développeur pour vous aider, car les corriger peut ne pas être simple.
template_redirect
Ce crochet d'action est appelé avant de déterminer quel modèle charger. Vous pouvez l'utiliser pour modifier le code d'état HTTP de la réponse.
Par exemple, vous pouvez avoir des backlinks de spam vers vos pages de requête de recherche interne contenant des caractères étranges et/ou des modèles courants.
 
 
 
 
 
 
 
Chez Search Engine Journal, nous sommes habitués à avoir des backlinks spammés pointant vers nos pages de recherche internes qui sont en Coréen - et nous avons appris de nos journaux de serveur que Googlebot les explorait intensivement.
Capture d'écran de l'auteur, février 2023
Le code de réponse WordPress par défaut est 404 introuvable, mais il est préférable d'ajouter 410 afin de dites à Google qu'ils sont partis pour toujours, afin qu'il arrête de les explorer.
 
 
 
 
 
 
 
function my_410_function (){ if( is_search() ) { $kw = $_GET['s'] ; // vérifie si la chaîne contient des caractères coréens 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 );
Dans notre cas, nous savons que nous n'avons pas de contenu coréen, c'est pourquoi nous avons composé notre condition comme ça.
Mais vous pouvez avoir du contenu international en coréen, et les conditions peuvent différer.
Généralement, pour les non-programmeurs, ChatGPT est un excellent outil pour générer des conditions à l'aide d'une expression régulière , que vous pouvez utiliser pour créer une condition if/else basée sur votre modèle de spam de GSC.
wp_headers
Ce crochet d'action est utilisé pour modifier les en-têtes HTTP de WordPress.
Vous pouvez utiliser ce crochet pour ajouter des en-têtes de sécurité aux en-têtes HTTP de réponse de votre site Web.
 
 
 
 
 
 
 
function my_headers(){ $headers['content-security-policy'] = 'upgrade-insecure-requests'; $headers['strict-transport-security'] = 'max-age=31536000; précharge' ; $headers['X-Content-Type-Options'] = 'nosniff'; $headers['X-XSS-Protection'] = '1; mode=bloc' ; $headers['x-frame-options'] = 'SAMEORIGIN'; $headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'; $headers['Link'] = '; rel=précharge ; comme=image' ; $headers['Link'] = '; rel=preconnect ; origine croisée ; $headers['Link'] = '; rel=précharge ; comme=image' ; retourne $en-têtes ; }add_filter( 'wp_headers', 'my_headers', 100 );
En plus des en-têtes de sécurité, vous pouvez ajouter des balises "Lien" (autant que vous le souhaitez) pour pré-connecter ou précharger n'importe quelle ressource.
Fondamentalement, il s'agit d'une méthode alternative de préchargement, qui a été couverte ci-dessus.
Vous pouvez également ajouter "X-Robots-Tag" (autant que vous le souhaitez) à vos en-têtes HTTP basés sur vos besoins.
Conclusion
Les plugins visent souvent à résoudre une grande variété de tâches et peuvent souvent ne pas être conçus spécifiquement pour répondre à vos besoins spécifiques.
 La facilité avec laquelle vous pouvez modifier le noyau de WordPress est l'un de ses plus beaux aspects - et vous pouvez le modifier avec quelques lignes de code.
 
 
 
 
 < /div> 
 
Nous avons discuté des crochets d'action que vous pouvez utiliser pour améliorer le référencement technique, mais WordPress a une cible un grand nombre de crochets d'action que vous pouvez explorer et utiliser pour faire pratiquement tout ce que vous voulez avec une utilisation minimale de plugins.
Plus de ressources :
 25 meilleures alternatives SEO-Friendly aux sites Web WordPress
 10 raisons pour lesquelles WordPress est le meilleur CMS pour le référencement
 Guide SEO WordPress : tout ce que vous devez savoir 
Image sélectionnée : Grafico moze/Shutterstock
 
 
 
 
 < /div> 
 

Les deux premières lignes servent à précharger les polices Google, puis nous préchargeons le logo et vérifions si l'article a une vedette l'image, puis préchargez l'image sélectionnée.

Comme note supplémentaire, votre thème ou le site peut avoir des images webp activées ; dans ce cas, vous devez précharger leur version Webp.

script_loader_tag

Vous avez beaucoup entendu parler des ressources bloquant le rendu qui peuvent être corrigées en différant ou en chargeant asynchrone les balises JavaScript. C'est essentiel pour améliorer FCP et LCP.

Cette action de filtre est utilisée pour filtrer la sortie HTML des balises de script, et vous avez exactement besoin de ce filtre pour asynchroniser ou différer le chargement des fichiers JS/CSS de votre thème ou plugin .

function my_defer_async_load( $tag, $handle ) { // les poignées de scripts de chargement asynchrones vont ici sous forme de tableau $async_handles = array('wpcf7-recaptcha', 'another-plugin-script'); // différer le chargement des poignées de scripts aller ici sous forme de tableau $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);

Ce filtre accepte deux arguments : la balise HTML et le descripteur de script, que j'ai mentionnés ci-dessus lors de l'examen via l'élément inspect .

Vous pouvez utiliser la poignée pour décider quel script charger de manière asynchrone ou différée .

Après le report ou le chargement asynchrone, vérifiez toujours via la console du navigateur si vous avez des erreurs JS. Si vous voyez des erreurs JS, vous aurez peut-être besoin d'un développeur pour vous aider, car les corriger peut ne pas être simple.

template_redirect

Ce crochet d'action est appelé avant de déterminer quel modèle charger. Vous pouvez l'utiliser pour modifier le code d'état HTTP de la réponse.

Par exemple, vous pouvez avoir des backlinks de spam vers vos pages de requête de recherche interne contenant des caractères étranges et/ou des modèles courants.

Chez Search Engine Journal, nous sommes habitués à avoir des backlinks spammés pointant vers nos pages de recherche internes qui sont en Coréen - et nous avons appris de nos journaux de serveur que Googlebot les explorait intensivement.

Le code de réponse WordPress par défaut est 404 introuvable, mais il est préférable d'ajouter 410 afin de dites à Google qu'ils sont partis pour toujours, afin qu'il arrête de les explorer.

function my_410_function (){ if( is_search() ) { $kw = $_GET['s'] ; // vérifie si la chaîne contient des caractères coréens 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 );

Dans notre cas, nous savons que nous n'avons pas de contenu coréen, c'est pourquoi nous avons composé notre condition comme ça.

Mais vous pouvez avoir du contenu international en coréen, et les conditions peuvent différer.

Généralement, pour les non-programmeurs, ChatGPT est un excellent outil pour générer des conditions à l'aide d'une expression régulière , que vous pouvez utiliser pour créer une condition if/else basée sur votre modèle de spam de GSC.

wp_headers

Ce crochet d'action est utilisé pour modifier les en-têtes HTTP de WordPress.

Vous pouvez utiliser ce crochet pour ajouter des en-têtes de sécurité aux en-têtes HTTP de réponse de votre site Web.

function my_headers(){ $headers['content-security-policy'] = 'upgrade-insecure-requests'; $headers['strict-transport-security'] = 'max-age=31536000; précharge' ; $headers['X-Content-Type-Options'] = 'nosniff'; $headers['X-XSS-Protection'] = '1; mode=bloc' ; $headers['x-frame-options'] = 'SAMEORIGIN'; $headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'; $headers['Link'] = '; rel=précharge ; comme=image' ; $headers['Link'] = '; rel=preconnect ; origine croisée ; $headers['Link'] = '; rel=précharge ; comme=image' ; retourne $en-têtes ; }add_filter( 'wp_headers', 'my_headers', 100 );

En plus des en-têtes de sécurité, vous pouvez ajouter des balises "Lien" (autant que vous le souhaitez) pour pré-connecter ou précharger n'importe quelle ressource.

Fondamentalement, il s'agit d'une méthode alternative de préchargement, qui a été couverte ci-dessus.

Vous pouvez également ajouter "X-Robots-Tag" (autant que vous le souhaitez) à vos en-têtes HTTP basés sur vos besoins.

Conclusion

Les plugins visent souvent à résoudre une grande variété de tâches et peuvent souvent ne pas être conçus spécifiquement pour répondre à vos besoins spécifiques.

La facilité avec laquelle vous pouvez modifier le noyau de WordPress est l'un de ses plus beaux aspects - et vous pouvez le modifier avec quelques lignes de code.

Nous avons discuté des crochets d'action que vous pouvez utiliser pour améliorer le référencement technique, mais WordPress a une cible un grand nombre de crochets d'action que vous pouvez explorer et utiliser pour faire pratiquement tout ce que vous voulez avec une utilisation minimale de plugins.

Plus de ressources :

• 25 meilleures alternatives SEO-Friendly aux sites Web WordPress
• 10 raisons pour lesquelles WordPress est le meilleur CMS pour le référencement
• Guide SEO WordPress : tout ce que vous devez savoir

Image sélectionnée : Grafico moze/Shutterstock