Cómo usarlos para mejorar el SEO

WordPress es el sistema de gestión de contenido (CMS) más popular del mundo, con más del 60 % de cuota de mercado.

Una gran comunidad de soporte y una gama de complementos gratuitos disponibles hacen que la creación de un sitio web con WordPress (WP) sea asequible y desempeña un papel clave en el por qué su cuota de mercado es tan grande.

Sin embargo, como sabe, la instalación de complementos tiene un costo.

A menudo pueden reducir sus puntuaciones de Core Web Vitals. Por ejemplo, pueden cargar archivos CSS o JS innecesarios en cada página donde no se necesitan.

Para solucionar esto, debe contratar a un desarrollador para que lo haga por usted, comprar un complemento premium o tal vez tomar una pequeña curva de aprendizaje y hacerlo usted mismo.

También puede volverse híbrido y resolver algunas partes de sus problemas con codificación personalizada y otras partes usando complementos.

Este artículo tiene como objetivo ayudarlo en su viaje de aprendizaje y cubriremos los ganchos de WordPress más esenciales para ayudarlo a mejorar el SEO técnico de su sitio web.

¿Qué es un gancho de WordPress?

Los ganchos de WordPress son características clave de WP que permiten a los desarrolladores ampliar la funcionalidad de CMS sin tener que modificar los archivos principales de WP, lo que facilita la actualización de temas o complementos sin interrumpir las modificaciones personalizadas.

Proporcionan una forma poderosa para que los desarrolladores amplíen la funcionalidad de WordPress y realicen cambios personalizados en sus sitios.

¿Qué es un gancho de filtro?

La función de filtro de enlace se utiliza para modificar la salida de la función antes de que se devuelva. Por ejemplo, puede prefijar los títulos de las páginas con el nombre de su blog usando el gancho de filtro wp_title.

¿Qué es el gancho de acción?

Los ganchos de acción permiten a los desarrolladores realizar ciertas acciones en un punto específico de la ejecución de WP Core, complementos o temas, como cuando se publica una publicación o se cargan archivos JS y CSS.

Al aprender algunos ganchos básicos de acción o filtro, puede realizar una amplia gama de tareas sin tener que contratar desarrolladores.

Pasaremos por los siguientes ganchos:

• wp_enqueue_scripts
• cabeza_wp
• script_loader_tag
• template_redirect
• wp_headers

wp_enqueue_scripts

Este es exactamente el enlace de acción que usaría para bloquear la carga de archivos CSS o JS innecesarios en páginas donde no son necesarios.

Por ejemplo, el popular complemento gratuito Contact Form 7, que tiene más de 5 millones de instalaciones, carga archivos CSS y JS en todas las páginas, mientras que uno necesita que se cargue solo donde está presente el formulario de contacto.

Para excluir archivos CF7 CSS y JS en páginas que no sean la página de contacto, puede usar el siguiente fragmento de código.

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

Hay algunos puntos clave. la prioridad del enlace de acción se establece en 99 para garantizar que nuestra modificación se ejecute en último lugar en la cola.

Si lo establece en, digamos, 10, no funcionará porque la función de cola CF7 usa una prioridad de 20. Entonces, para asegurarse de que la suya se ejecute en último lugar y tenga un efecto, establezca una prioridad lo suficientemente alta.

Además, en el código, usamos “contact-form-7” como identificador del argumento de la función. te estarás preguntando cómo encontré esto.

Es bastante simple e intuitivo. Simplemente use el inspector de componentes de su navegador y verifique el atributo de identificación del enlace o las etiquetas de secuencia de comandos.

Puede verificar el código fuente de su sitio usando el componente de inspección y comenzar a desvincular cualquier archivo JS o CSS donde no sea necesario.

cabeza_wp

Este gancho de acción se usa para agregar cualquier recurso JS, archivos CSS o etiquetas meta al módulo del sitio web

Con este enlace, puede precargar recursos sobre el pase en la sección de encabezado, lo que puede mejorar sus puntajes LCP.

Por ejemplo, las fuentes precargadas, que es una de las recomendaciones de Google, o el logotipo y las imágenes destacadas en las páginas de los artículos, siempre se cargan en la parte superior, y debe precargarlos para mejorar LCP.

Para esto, use el fragmento de código a continuación.

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

Las dos primeras líneas son para precargar las fuentes de Google, luego precargamos el logotipo y verificamos si el artículo tiene una imagen destacada, luego precargamos la imagen destacada.

Como nota adicional, su tema o sitio web puede tener imágenes web habilitadas. En este caso, debe precargar su versión webp.

script_loader_tag

Ha oído hablar mucho acerca de los recursos que bloquean el rendimiento y que se pueden solucionar al diferir o cargar de forma asíncrona las etiquetas de JavaScript. Es fundamental mejorar FCP y LCP.

Esta acción de filtro se usa para filtrar la salida HTML de las etiquetas de secuencias de comandos y necesita exactamente este filtro para sincronizar o diferir la carga de los archivos JS/CSS de su tema o complemento.

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

Este filtro acepta dos argumentos: la etiqueta HTML y el identificador del script, que mencioné anteriormente al revisar el elemento inspector.

Puede usar el identificador para decidir qué secuencia de comandos cargar de forma asíncrona o para el aplazamiento.

Después de diferir o cargar asíncronamente, siempre verifique a través de la consola del navegador para ver si hay errores de JS. Si ve errores de JS, es posible que necesite la ayuda de un desarrollador, ya que solucionarlos puede no ser sencillo.

template_redirect

Este enlace de acción se llama antes de determinar qué plantilla cargar. Puede usarlo para cambiar el código de estado HTTP de la respuesta.

Por ejemplo, puede tener backlinks de spam a páginas de consultas de búsqueda internas que contienen caracteres extraños y/o patrones comunes.

En Search Engine Journal, estamos acostumbrados a tener backlinks de spam que apuntan a nuestras páginas de búsqueda internas que están en coreano, y hemos aprendido de los registros de nuestro servidor que Googlebot los está rastreando activamente.

Instantánea del autor, febrero de 2023

El código de respuesta predeterminado de WordPress es 404 No encontrado, pero es mejor lanzar un 410 para decirle a Google que se han ido para siempre, para que deje de rastrearlos.

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

En nuestro caso, sabemos que no tenemos contenido en coreano, así que creamos nuestro estado así.

Pero es posible que tengas contenido internacional en coreano y las condiciones pueden variar.

En general, para los que no son desarrolladores, ChatGPT es una excelente herramienta para crear condiciones usando una expresión regular, que puede usar para crear una condición if/else basada en el patrón de spam de GSC.

wp_headers

Este gancho de acción se usa para modificar los encabezados HTTP de WordPress.

Puede usar este enlace para agregar encabezados de seguridad a los encabezados de respuesta HTTP de su sitio 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 );

Además de los encabezados de seguridad, puede agregar etiquetas de “Enlace” (tantas como desee) para vincular o cargar previamente cualquier recurso.

Básicamente, es un método alternativo de precarga, que se trató anteriormente.

También puede agregar “X-Robots-Tag” (tantas como desee) a sus encabezados HTTP según sus necesidades.

conclusión

Los complementos a menudo tienen como objetivo resolver una amplia variedad de tareas y, a menudo, es posible que no estén diseñados específicamente para satisfacer sus necesidades específicas.

La facilidad con la que puede modificar el núcleo de WordPress es uno de sus aspectos más hermosos, y puede cambiarlo con unas pocas líneas de código.

Hemos discutido los ganchos de acción que puede usar para mejorar el SEO técnico, pero WordPress tiene una gran cantidad de ganchos de acción que puede explorar y usar para hacer básicamente cualquier cosa que desee con un uso mínimo de complementos.

Más recursos:

Imagen destacada: Grafico moze/Shutterstock