{"id":73878,"date":"2024-03-04T09:19:51","date_gmt":"2024-03-04T08:19:51","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=73878&preview=true&preview_id=73878"},"modified":"2024-03-06T08:15:28","modified_gmt":"2024-03-06T07:15:28","slug":"seo-wordpress-headless","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/seo-wordpress-headless\/","title":{"rendered":"Estrategias SEO avanzadas para sitios de WordPress headless"},"content":{"rendered":"

Optar por un sitio de WordPress headless<\/a>\u00a0en lugar de una arquitectura de sitio tradicional cambia bastante el juego del SEO. Este enfoque separa el front-end del sitio de su back-end, aumentando la flexibilidad y la velocidad. Pero tambi\u00e9n conlleva nuevos retos SEO.<\/p>\n

Esto es lo que hay: la visibilidad de tu sitio y la forma en que la gente te encuentra a trav\u00e9s de los motores de b\u00fasqueda dependen de tus t\u00e1cticas de SEO. Por eso hoy vamos a hablar de algunas estrategias avanzadas de SEO dise\u00f1adas especialmente para las configuraciones de WordPress headless.<\/p>\n

Hablaremos de c\u00f3mo asegurarnos de que los motores de b\u00fasqueda pueden rastrear correctamente tu sitio, de c\u00f3mo ajustar las metaetiquetas y mucho m\u00e1s. Tanto si est\u00e1s programando el sitio como elaborando estrategias de marketing, obtendr\u00e1s consejos pr\u00e1cticos para perfeccionar tus habilidades SEO.<\/p>\n

Manos a la obra.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

C\u00f3mo hacer rastreables los sitios WordPress headless<\/h2>\n

Hacer que los sitios de WordPress headless sean rastreables presenta algunos retos \u00fanicos con los que no se encuentran las configuraciones de sitios tradicionales. El principal obst\u00e1culo surge del hecho de que el contenido de los sitios headless se renderiza en el lado del cliente mediante JavaScript<\/a>, lo que hist\u00f3ricamente ha planteado dificultades a los robots de los motores de b\u00fasqueda en t\u00e9rminos de rastreo e indexaci\u00f3n.<\/p>\n

Sin embargo, t\u00e9cnicas modernas como el renderizado din\u00e1mico y el renderizado del lado del servidor han facilitado mucho la resoluci\u00f3n de estos problemas.<\/p>\n

Renderizado din\u00e1mico<\/h3>\n

La renderizaci\u00f3n din\u00e1mica<\/a> sirve de puente entre el contenido con mucho JavaScript y los rastreadores de los motores de b\u00fasqueda. Consiste en presentar una instant\u00e1nea HTML est\u00e1tica<\/a> y pre-renderizada del contenido de tu sitio a los motores de b\u00fasqueda, mientras los usuarios siguen experimentando la versi\u00f3n din\u00e1mica e interactiva.<\/p>\n

Esto garantiza que los rastreadores puedan indexar el contenido de tu sitio sin tener que ejecutar JavaScript<\/a>, lo que mejora inmediatamente su visibilidad y rendimiento SEO.<\/p>\n

Para implementar la renderizaci\u00f3n din\u00e1mica en un entorno de WordPress headless, normalmente utilizar\u00edas una soluci\u00f3n como prerender.io<\/a> o construir\u00edas tu propio mecanismo de renderizaci\u00f3n del lado del servidor, posiblemente con Node.js<\/a>.<\/p>\n

\"Puedes
Prerender<\/figcaption><\/figure>\n

Aqu\u00ed tienes un desglose conceptual:<\/p>\n

1. Detecci\u00f3n de agentes de usuario<\/h4>\n

Necesitas diferenciar entre las peticiones realizadas por usuarios (navegadores) y las realizadas por rastreadores (como Googlebot). Esto puede hacerse comprobando el agente de usuario en las cabeceras HTTP de las peticiones entrantes.<\/p>\n

2. Servir contenido est\u00e1tico a los robots<\/h4>\n

Cuando se detecta un rastreador, en lugar de servir el contenido habitual con mucho JavaScript, tu servidor redirige la petici\u00f3n a una versi\u00f3n HTML est\u00e1tica y pre-renderizada de la p\u00e1gina solicitada. Esto se puede conseguir utilizando un servicio de pre-renderizado o teniendo una configuraci\u00f3n de pre-renderizado en tu servidor que genere p\u00e1ginas HTML est\u00e1ticas de tu contenido sobre la marcha o desde una cach\u00e9.<\/p>\n

3. C\u00f3mo configurarlo con WordPress<\/h4>\n

Servicios como prerender.io ofrecen middleware que puede integrarse en tu servidor. Este middleware intercepta las peticiones entrantes, comprueba si proceden de rastreadores y, si es as\u00ed, sirve una p\u00e1gina pre-renderizada desde la cach\u00e9 de prerender.io o activa una nueva renderizaci\u00f3n de la p\u00e1gina si no est\u00e1 en la cach\u00e9.<\/p>\n

Si construyes una soluci\u00f3n personalizada, normalmente utilizar\u00e1s Puppeteer<\/a> en un entorno Node.js para pre-renderizar las p\u00e1ginas. Cuando tu API de WordPress entrega contenido a tu servidor Node.js, comprueba el agente de usuario. Si es un rastreador, Puppeteer renderiza la p\u00e1gina, guarda el HTML est\u00e1tico y sirve esta versi\u00f3n.<\/p>\n

Este proceso puede optimizarse almacenando en cach\u00e9 las p\u00e1ginas est\u00e1ticas para evitar renderizarlas en cada solicitud de rastreo.<\/p>\n

Renderizado desde el servidor<\/h3>\n

En cambio, la renderizaci\u00f3n del lado del servidor<\/a> consiste en renderizar el contenido de la p\u00e1gina en el servidor antes de que llegue al cliente. Esto significa que cuando un robot de un motor de b\u00fasqueda solicita una p\u00e1gina, recibe una p\u00e1gina HTML completamente renderizada, haci\u00e9ndola inmediatamente indexable.<\/p>\n

Puedes implementar la renderizaci\u00f3n del lado del servidor utilizando varios frameworks y bibliotecas de JavaScript, como React<\/a> y Node.js<\/a>, para renderizar el contenido directamente en el servidor. Este enfoque no s\u00f3lo ayuda a que el contenido sea m\u00e1s accesible para los motores de b\u00fasqueda, sino que tambi\u00e9n mejora la experiencia general del usuario al acelerar los tiempos de carga de la p\u00e1gina.<\/p>\n

Para la renderizaci\u00f3n del lado del servidor, el uso de frameworks como Next.js<\/a> en combinaci\u00f3n con la API REST de WordPress<\/a> o GraphQL<\/a> puede agilizar el proceso.<\/p>\n

Una configuraci\u00f3n t\u00edpica podr\u00eda implicar la obtenci\u00f3n de datos con GraphQL y la representaci\u00f3n de p\u00e1ginas en el servidor mediante Next.js, rellenando previamente el contenido antes de servirlo.<\/p>\n

Configurar URL can\u00f3nicas<\/h2>\n

Configurar URL can\u00f3nicas para un sitio de WordPress headless es otra forma de mantener la integridad SEO, especialmente cuando el contenido se sirve a trav\u00e9s de un front-end desacoplado como Gatsby<\/a> o Next.js.<\/p>\n

Las URL can\u00f3nicas<\/a> ayudan a evitar problemas de contenido duplicado indicando a los motores de b\u00fasqueda qu\u00e9 versi\u00f3n de una p\u00e1gina de contenido es la principal o \u00abcan\u00f3nica\u00bb. Esto es necesario en un entorno headless donde el contenido puede ser accesible a trav\u00e9s de m\u00faltiples rutas o endpoints.<\/p>\n

Por qu\u00e9 son importantes las URL can\u00f3nicas<\/h3>\n

En WordPress headless, el riesgo de duplicaci\u00f3n de contenidos aumenta debido a la separaci\u00f3n del front-end del back-end de WordPress. Las URL can\u00f3nicas mitigan este riesgo guiando a los motores de b\u00fasqueda para que indexen la URL<\/a> preferida. Esto garantiza que el valor SEO se consolide en la p\u00e1gina can\u00f3nica en lugar de diluirse en m\u00faltiples versiones del mismo contenido.<\/p>\n

Dedicar tiempo a establecer URL can\u00f3nicas tambi\u00e9n aclara qu\u00e9 versi\u00f3n del contenido debe clasificarse en los resultados de b\u00fasqueda.<\/p>\n

C\u00f3mo establecer URL can\u00f3nicas<\/h3>\n

La implementaci\u00f3n de URL can\u00f3nicas en un entorno de WordPress headless puede gestionarse eficazmente con la ayuda del plugin Yoast SEO, junto con WPGraphQL, para conectar los datos de Yoast SEO a tu configuraci\u00f3n headless.<\/p>\n

Aqu\u00ed tienes un resumen detallado de un proceso en el que participa el desarrollador web Andrew Kepson<\/a> y que afecta a un par de plugins populares:<\/p>\n