How to Use WordPress Hooks To Improve Technical search engine optimisation

WordPress is the most well-liked content material administration system (CMS) on the earth, with a market share of greater than 60%.

A giant assist group and quite a lot of obtainable free plugins make constructing a web site with WordPress (WP) reasonably priced, and it performs a key position in why its market share is so huge.

However, as , putting in plugins comes at a value.

They usually might degrade your Core Web Vitals scores; For instance, they could load pointless CSS or JS information on each web page the place they don’t seem to be wanted.

To repair that, it is advisable rent a programmer to do it for you, purchase a premium plugin, or maybe go down a small studying path and do it your self.

You can even go hybrid and resolve some elements of your points by customized coding, and different elements utilizing plugins.

This text goals that can assist you in your studying path, and we are going to cowl probably the most wanted WordPress hooks that can assist you enhance your web site’s technical search engine optimisation.

What Is A WordPress Hook?

WordPress hooks are key options in WP that permit builders to increase the performance of the CMS with no want to change core WP information – making it simpler to replace themes or plugins with out breaking customized modifications.

They supply a robust means for builders to increase the performance of WordPress and make customized modifications to their websites.

What Is A Filter Hook?

The hook filter operate is used to change the output of the operate earlier than it’s returned. For instance, you possibly can suffix web page titles together with your weblog title utilizing the wp_title filter hook.

What Is An Motion Hook?

Motion hooks permit programmers to carry out sure actions at a particular level within the execution of WP Core, plugins, or themes, equivalent to when a submit is revealed, or JS and CSS information are loaded.

By studying a couple of fundamental motion hooks or filters, you possibly can carry out a variety of duties with out the necessity to rent builders.

We’ll undergo the next hooks:

• wp_enqueue_scripts
• wp_head
• script_loader_tag
• template_redirect
• wp_headers

wp_enqueue_scripts

That is precisely the motion hook you’d use to exclude redundant CSS or JS information from loading on pages the place they don’t seem to be wanted.

For instance, the favored free Contact Form 7 plugin, which has over 5M installations, masses CSS and JS information on all pages – whereas one solely wants it to load the place the contact kind exists.

To exclude CF7 CSS and JS information on pages apart from the contact web page, you need to use the code snippet under.

operate my_dequeue_script(){
//examine if web page slug is not our contact web page, alternatively, you need to use is_page(25) with web page ID, or if it's a submit web 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 );

There are a couple of key factors; the motion hook precedence is about to 99 to make sure our modification runs final within the queue.

In the event you set it to, say, 10, it is not going to work as a result of CF7 enqueue operate makes use of precedence 20. So to make sure yours run final and have an impact, set a precedence massive sufficient.

Additionally, within the code, we used as a operate argument identifier “contact-form-7”; chances are you’ll surprise how I discovered that.

It’s fairly easy and intuitive. Simply use examine ingredient software of your browser and examine for the id attribute of hyperlink or script tags.

You’ll be able to examine your web site supply code utilizing examine ingredient and begin dequeuing any JS or CSS file the place they don’t seem to be wanted.

wp_head

This motion hook is used so as to add any useful resource JS, CSS information, or meta tags within the <head> part of the webpage.

Utilizing this hook, you possibly can load preload above-the-fold assets within the head part, which might enhance your LCP scores.

For instance, font preloading, which is one in every of Google’s suggestions, or emblem and featured photos on article pages, at all times load above the fold – and it is advisable preload them to enhance LCP.

For that, use the code snippet under.

operate my_preload() {
?>
   <!-- Google Fonts -->
   <hyperlink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <hyperlink rel="preload" as="fashion" href="https://fonts.googleapis.com/css2?household=Inter:ital,wght@0,200..900;1,200..900&household=Lora:ital,wght@0,400..700;1,400..700&show=swap"/>
   <hyperlink rel="preload" as="picture" href="https://www.yoursite.com/path-to-logo/picture.jpg"/>
   <?php if( has_post_thumbnail() ): // examine if article has featured picture?>
   <!-- Featured Picture -->
   <?php // $featured_image = str_ireplace(array( '.png', '.jpg', '.jpeg'), '.webp', $featured_image ); // allow this when you have webp photos. ?>
   <?php $featured_image = get_the_post_thumbnail_url( get_the_ID(), 'full' ); ?>
   <hyperlink rel="preload" as="picture" href="<?php echo $featured_image;?>"/>
   <?php endif;
}
add_action('wp_head', 'my_preload', 3 );

The primary two strains are for preloading Google fonts, then we preload the brand and examine if the article has a featured picture, then preload the featured picture.

As an extra word, your theme or website might have webp photos enabled; in that case, you must preload webp model of them.

script_loader_tag

You heard so much about render-blocking assets which may be fastened by defer or async loading JavaScript tags. It’s important for bettering FCP and LCP.

This filter motion is used to filter the HTML output of the script tags, and also you want precisely this filter to async or defer load your theme or plugin’s JS/CSS information.

operate my_defer_async_load( $tag, $deal with ) {
   // async loading scripts handles go right here as an array
   $async_handles = array('wpcf7-recaptcha', 'another-plugin-script');
   // defer loading scripts handles go right here as an array
   $defer_handles = array('contact-form-7', 'any-theme-script');
   if( in_array( $deal with, $async_handles) ){
     return str_replace( ' src', ' async src', $tag );
   }
   if( in_array( $deal with, $defer_handles ) ){
     return str_replace( ' src', ' defer="defer" src', $tag );
   }
return $tag;
}
add_filter('script_loader_tag', 'my_defer_async_load', 10, 2);

This filter accepts two arguments: HTML tag, and script deal with, which I discussed above when analyzing by way of examine ingredient.

You should utilize the deal with to resolve which script to load async or defer.

After you defer or async load, at all times examine by way of the browser console when you have any JS errors. In the event you see JS errors, chances are you’ll want a developer that can assist you, as fixing them will not be simple.

template_redirect

This motion hook is named earlier than figuring out which template to load. You should utilize it to vary the HTTP standing code of the response.

For instance, you could have spammy backlinks to your inside search question pages containing bizarre characters and/or frequent patterns.

At Search Engine Journal, we’re used to having spammy backlinks pointing to our inside search pages which are in Korean – and we now have discovered from our server logs that Googlebot was intensively crawling them.

Screenshot from writer, February 2023

WordPress default response code is 404 not discovered, however it’s higher to throw in 410 as a way to inform Google they’re gone ceaselessly, so it stops crawling them.

operate my_410_function(){
  if( is_search() ) {
    $kw = $_GET['s'];
    // examine if the string incorporates Korean characters
    if (preg_match('/[x{AC00}-x{D7AF}]+/u', $kw)) {
     status_header(410, 'Not Discovered');
    }
  }// finish of is_search
}
add_action( 'template_redirect', 'my_410_function', 10 );

In our case, we all know that we don’t have Korean content material, which is why we composed our situation like that.

However you could have worldwide content material in Korean, and circumstances might differ.

Typically, for non-programmers, ChatGPT is a superb software for producing circumstances utilizing an everyday expression, which you’ll use to construct an if/else situation based mostly in your spam sample from GSC.

wp_headers

This motion hook is used to change HTTP headers of WordPress.

You should utilize this hook so as to add security headers to your web site response HTTP headers.

operate 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/photos/emblem.jpg>; rel=preload; as=picture';
     $headers['Link'] = '<https://fonts.gstatic.com>; rel=preconnect; crossorigin'; 
$headers['Link'] = '</wp-content/uploads/themes/yourtheme/photos/emblem.webp>; rel=preload; as=picture';
      return $headers;
 }
add_filter( 'wp_headers', 'my_headers', 100 );

Beside safety headers, you possibly can add “Link” tags (as many as you need) for pre-connecting or preloading any useful resource.

Mainly, it’s another technique of preloading, which was coated above.

You might also add “X-Robots-Tag” (as many as you need ) to your HTTP headers based mostly in your wants.

Conclusion

Plugins are sometimes aimed toward fixing all kinds of duties and will usually not be designed particularly to satisfy your particular wants.

The benefit with which you’ll be able to modify WordPress core is one in every of its most lovely elements – and you’ll alter it with a couple of strains of code.

We mentioned motion hooks you need to use to enhance technical search engine optimisation, however WordPress has a large number of action hooks you possibly can discover and use to do mainly every part you need with minimal use of plugins.

Extra assets:

Featured Picture: Grafico moze/Shutterstock