WordPress — самая популярная система управления контентом (CMS) в мире с долей рынка более 60%.

Большое сообщество поддержки и ряд доступных бесплатных плагинов делают создание веб-сайта с помощью WordPress (WP) доступным, и это играет ключевую роль в том, почему его доля на рынке так велика.

Однако, как вы знаете, установка плагинов обходится дорого.

Они часто могут ухудшить ваши показатели Core Web Vitals; Например, они могут загружать ненужные файлы CSS или JS на каждой странице, где они не нужны.

Чтобы это исправить, вам нужно нанять программиста, чтобы он сделал это за вас, купить плагин премиум-класса или, возможно, пройти небольшой путь обучения и сделать это самостоятельно.

Вы также можете использовать гибрид и решать некоторые части ваших проблем с помощью пользовательского кодирования, а другие части — с помощью плагинов.

Эта статья призвана помочь вам в вашем обучении, и мы рассмотрим наиболее необходимые крючки WordPress, которые помогут вам улучшить техническое SEO вашего сайта.

Что такое хук WordPress?

Хуки WordPress — это ключевые функции в WP, которые позволяют разработчикам расширять функциональность CMS без необходимости изменять основные файлы WP, упрощая обновление тем или плагинов без нарушения пользовательских модификаций.

Они предоставляют разработчикам мощный способ расширить функциональность WordPress и внести пользовательские изменения в свои сайты.

Что такое фильтр-хук?

Функция фильтра ловушек используется для изменения вывода функции перед ее возвратом. Например, вы можете добавлять к заголовкам страниц название вашего блога, используя wp_title фильтрующий крючок.

Что такое хук действия?

Хуки действий позволяют программистам выполнять определенные действия в определенный момент выполнения WP Core, плагинов или тем, например, когда публикуется сообщение или загружаются файлы JS и CSS.

Изучив несколько основных приемов действий или фильтров, вы сможете выполнять широкий круг задач без необходимости нанимать разработчиков.

Мы пройдемся по следующим крючкам:

• wp_enqueue_scripts
• wp_head
• script_loader_tag
• template_redirect
• wp_headers

wp_enqueue_scripts

Это именно тот хук действия, который вы бы использовали, чтобы исключить загрузку избыточных файлов CSS или JS на страницах, где они не нужны.

Например, популярная бесплатная Контактная форма 7 плагин, который имеет более 5 миллионов установок, загружает файлы CSS и JS на все страницы, тогда как он нужен только для загрузки там, где существует контактная форма.

Чтобы исключить файлы CSS и JS CF7 на страницах, отличных от страницы контактов, вы можете использовать приведенный ниже фрагмент кода.

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

Есть несколько ключевых моментов; приоритет хука действия установлен на 99, чтобы наша модификация выполнялась последней в очереди.

Если вы установите его, скажем, на 10, он не будет работать, потому что функция постановки в очередь CF7 использует приоритет 20. Поэтому, чтобы убедиться, что ваш запуск выполняется последним и имеет эффект, установите достаточно большой приоритет.

Также в коде мы использовали идентификатор аргумента функции «contact-form-7»; Вы можете задаться вопросом, как я нашел это.

Это довольно просто и интуитивно понятно. Просто используйте инструмент проверки элементов вашего браузера и проверьте атрибут id тегов ссылки или скрипта.

Вы можете проверить исходный код своего веб-сайта, используя элемент проверки, и начать удалять из очереди любые файлы JS или CSS, где они не нужны.

wp_head

Этот хук действия используется для добавления любых ресурсных файлов JS, CSS или метатегов в раздел веб-страницы.

Используя этот хук, вы можете загружать предварительно загружаемые ресурсы в верхней части раздела заголовка, что может улучшить ваши баллы LCP.

Например, предварительная загрузка шрифтачто является одной из рекомендаций Google, а также логотип и избранные изображения на страницах статей всегда загружаются в верхней части страницы, и вам необходимо предварительно загрузить их, чтобы улучшить LCP.

Для этого используйте фрагмент кода ниже.

function my_preload() {
?>
   <!-- Google Fonts -->
   <link rel="preconnect" href=" crossorigin>
   <link rel="preload" as="style" href="
   <link rel="preload" as="image" href="
   <?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 );

Первые две строки предназначены для предварительной загрузки шрифтов Google, затем мы предварительно загружаем логотип и проверяем, есть ли в статье избранное изображение, а затем предварительно загружаем избранное изображение.

В качестве дополнительного примечания, в вашей теме или на сайте могут быть включены веб-изображения; в этом случае вы должны предварительно загрузить их веб-версию.

script_loader_tag

Вы много слышали о ресурсах, блокирующих рендеринг, которые можно исправить с помощью отложенной или асинхронной загрузки тегов JavaScript. Это имеет решающее значение для улучшения FCP и LCP.

Это действие фильтра используется для фильтрации вывода HTML тегов скрипта, и вам нужен именно этот фильтр для асинхронной или отложенной загрузки файлов JS/CSS вашей темы или плагина.

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

Этот фильтр принимает два аргумента: HTML-тег и дескриптор скрипта, о котором я упоминал выше при проверке с помощью элемента проверки.

Вы можете использовать дескриптор, чтобы решить, какой скрипт загружать асинхронно или откладывать.

После отложенной или асинхронной загрузки всегда проверяйте через консоль браузера наличие ошибок JS. Если вы видите ошибки JS, вам может понадобиться помощь разработчика, так как исправить их может быть непросто.

template_redirect

Этот хук действия вызывается перед тем, как определить, какой шаблон загрузить. Вы можете использовать его для изменения кода состояния HTTP ответа.

Например, у вас могут быть спамные обратные ссылки на страницы внутренних поисковых запросов, содержащие странные символы и/или распространенные шаблоны.

В Search Engine Journal мы привыкли к обратным спамным ссылкам, указывающим на наши внутренние поисковые страницы на корейском языке, и из журналов нашего сервера мы узнали, что робот Googlebot интенсивно сканировал их.

Код ответа WordPress по умолчанию — 404, но лучше указать 410, чтобы сообщить Google, что они ушли навсегда, и он перестанет их сканировать.

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

В нашем случае мы знаем, что у нас нет корейского контента, поэтому мы так составили условие.

Но у вас может быть международный контент на корейском языке, и условия могут отличаться.

Как правило, для непрограммистов ChatGPT является отличным инструментом для создания условий с использованием регулярного выражения, которое вы можете использовать для создания условия if/else на основе шаблона спама от GSC.

wp_headers

Этот хук действия используется для изменения заголовков HTTP в WordPress.

Вы можете использовать этот хук для добавления заголовков безопасности в HTTP-заголовки ответа вашего веб-сайта.

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'] = '< rel=preload; as=image';
     $headers['Link'] = '< 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 );

Помимо заголовков безопасности, вы можете добавить теги «Link» (сколько хотите) для предварительного подключения или предварительной загрузки любого ресурса.

По сути, это альтернативный метод предварительной загрузки, о котором говорилось выше.

Вы также можете добавить «X-Robots-Tag» (сколько хотите) в заголовки HTTP в зависимости от ваших потребностей.

Заключение

Плагины часто нацелены на решение самых разных задач и часто могут быть не разработаны специально для удовлетворения ваших конкретных потребностей.

Легкость, с которой вы можете изменить ядро ​​WordPress, является одним из его самых красивых аспектов, и вы можете изменить его с помощью нескольких строк кода.

Мы обсудили крючки действий, которые вы можете использовать для улучшения технического SEO, но у WordPress есть большое количество экшн-хуков вы можете исследовать и использовать практически все, что хотите, с минимальным использованием плагинов.

Дополнительные ресурсы:

---

Рекомендуемое изображение: Grafico moze/Shutterstock