Una guía para principiantes de Headless CMS

Publicado: 2022-02-01

Los CMS (sistemas de gestión de contenido) sin cabeza eliminan el vínculo directo entre el backend de su base de datos de contenido y la forma en que el contenido se entrega a los usuarios cuando visitan su sitio web o aplicación.

Esto se compara con el CMS 'acoplado' tradicional donde tanto la base de datos como la representación del contenido están controlados por el mismo CMS.

Si bien un CMS acoplado tiene sus ventajas, como una interfaz única para editar tanto su base de datos como la forma en que aparece en la pantalla, el CMS autónomo es más potente y flexible.

Esto es particularmente cierto para sitios web más grandes, bases de datos complejas o cuando varias personas necesitan trabajar en diferentes aspectos de su contenido, sitio web/aplicación y SEO en el sitio.

¿Qué es Headless CMS?

En un CMS tradicional, la base de datos de contenido de back-end y el diseño del sitio web de front-end se pueden editar desde el mismo tablero de CMS, razón por la cual estos sistemas se denominan "acoplados".

Un sistema CMS sin cabeza utiliza sistemas separados para la base de datos y la entrega, con una API (interfaz de programación de aplicaciones) que actúa como puente entre los dos.

Algunos de los CMS sin cabeza más utilizados incluyen Ghost, Prismic, Netlify y Contentful, y al igual que los CMS acoplados, se han diseñado para ejecutarse de manera eficiente, ofrecer una funcionalidad flexible y escalar rápidamente cuando su base de datos comienza a crecer.

El CMS sin cabeza puede ser más costoso, debido a la mayor complejidad, pero ofrece capacidades que un sistema acoplado no puede, como la capacidad de servir contenido de una manera completamente diferente a los visitantes que acceden a su sitio desde diferentes dispositivos.

Esto, a su vez, tiene algunas implicaciones positivas para las técnicas de optimización de motores de búsqueda (SEO), como el diseño de sitios web receptivos, ya que su contenido se puede servir de una manera mucho más receptiva, dependiente de la plataforma y verdaderamente compatible con dispositivos móviles.

Más beneficios del CMS sin cabeza

Veamos algunos de los beneficios específicos del CMS sin cabeza, que están ayudando a impulsar la popularidad masiva y la rápida adopción de este enfoque en sitios web de todo el mundo:

Contenido personalizado

Un mayor control sobre su contenido y la forma en que se muestra significa que puede personalizar sus páginas en una medida mucho mayor. Ya sea que haga esto para grupos de usuarios específicos o para su audiencia en general, esto le brinda aún más formas de sobresalir entre sus competidores.

Carga más rápida

El uso de una API y un frontend adecuados para el dispositivo optimiza las velocidades de carga en diferentes dispositivos, incluidos aquellos que acceden a su sitio a través de una conexión de datos móviles. Esto también respalda cualquier acción que esté tomando en las campañas de SEO para mejorar el rendimiento de Core Web Vitals.

Flexibilidad preparada para el futuro

La capacidad de instalar API adicionales significa que su base de datos se puede conectar a nuevas interfaces en el futuro. Esto puede permitirle diversificarse, por ejemplo, desde un sitio web para visitantes de escritorio y móviles, para servir también pantallas de información en la tienda y tecnología portátil.

En resumen, un CMS sin cabeza es ideal cuando tiene necesidades de interfaz complejas, pero desea simplificar la edición y el mantenimiento de su contenido real, con ediciones y actualizaciones reflejadas en todas sus diferentes plataformas de inmediato.

Cómo planificar un CMS sin encabezado

El modelado de contenido es la etapa de planificación crucial antes de implementar un nuevo CMS autónomo. Es similar a la forma en que planifica la jerarquía de carpetas, la estructura de URL y el mapa del sitio de un sitio web, excepto que en este caso trabajará con tipos de contenido, en lugar de páginas individuales.

¿Qué son los tipos de contenido?

Los diversos tipos de contenido que define contienen campos que extraen información de su base de datos. Estos podrían ser metadatos de SEO, y si usa un CMS acoplado tradicional con un complemento de SEO como Yoast, es probable que haya visto y completado campos de metadatos en el pasado.

En sus páginas de contenido principal, puede tener campos para el slug de URL, así como una o más secciones de contenido visible para mostrar en la página.

También puede definir tipos de contenido para activos de medios, dando a sus archivos un nombre, una descripción que solo se puede ver internamente y una ubicación donde se puede acceder al archivo.

¿Cómo funcionan los tipos de contenido?

Una vez que haya definido todos los tipos de contenido requeridos, habrá creado un método modular de "bloques de construcción" mediante el cual las API pueden extraer información de su base de datos y juntarla para diferentes plataformas.

Las API pueden solicitar datos de diferentes tipos de contenido y construirlos de maneras completamente únicas para representar páginas de una manera específica de la plataforma.

Si necesita realizar cambios en el futuro, como agregar una nueva metaetiqueta de SEO, puede actualizar el tipo de contenido para crear el campo necesario en cada elemento relevante de su base de datos.

Cómo definir los requisitos de SEO

Es una buena práctica definir los requisitos de SEO para CMS sin cabeza antes de profundizar demasiado en el desarrollo, para que sus desarrolladores sepan lo que necesitan implementar.

Algunos elementos a considerar incluyen:

  • Slug de URL (que puede incluir palabras clave por página)
  • Metadatos (por ejemplo, etiquetas de 'título', 'descripción' y 'palabras clave')
  • Etiqueta canónica (para evitar sanciones por contenido duplicado)
  • Etiqueta de meta robots (para evitar el rastreo no deseado de páginas)

También puede crear campos para algunos de los métodos más modernos y verificaciones específicas del servicio que ayudan a respaldar su SEO:

  • Microdatos, microformatos y marcado de Schema.org
  • Etiquetas de verificación para Google Analytics, Search Console y Bing Webmaster Tools
  • Marcado para vistas previas de redes sociales (por ejemplo, tarjetas de Twitter)

Nuevamente, todos estos influyen en cómo se encuentra su contenido y cómo se muestra en diferentes plataformas, en este caso, sitios web y aplicaciones de terceros, por lo que incluir estos campos lo ayuda a controlar cómo las personas ven su contenido, sin importar dónde lo encuentren. eso.

¿Cuántos tipos de contenido necesito?

Decidir cuántos tipos de contenido usar es una de las grandes preguntas de cambiar a CMS sin cabeza, y la respuesta es que depende de lo que estés tratando de lograr.

Para obtener el mejor rendimiento de SEO, debe definir campos que cubran cada parámetro individual. Por ejemplo, podría tener un campo para la metaetiqueta robots follow/nofollow y uno separado para robots index/noindex.

Límites y requisitos

Los CMS sin encabezado, como Contentful, también le permiten establecer límites de recuento de caracteres en los campos, de modo que puede mantener las etiquetas de título y otros metadatos dentro de una determinada cantidad de caracteres.

Finalmente, puede hacer que los campos sean obligatorios y únicos, de modo que si los metadatos se replican desde otra página o faltan por completo, el editor recibirá un mensaje de error y podrá realizar las correcciones necesarias.

Ya sea que haga esto usando múltiples campos dentro de un solo tipo de contenido, o use tipos de contenido separados para una flexibilidad aún mayor en el lado de la representación, depende en parte de las capacidades que necesita que admitan sus datos, y en parte un caso de preferencia personal.

Poniendo todo junto

Puedes pensar que es como construir un pozo de los deseos. Cuanto más grandes sean los ladrillos, más rápida y fácil será la construcción. Pero cuanto más pequeños sean los ladrillos, más perfecta será la forma circular.

El 'número correcto' de tipos de contenido debe ser un compromiso intermedio que funcione mejor para usted, de modo que pueda crear el sitio web que desea, sin sentir que está editando cada párrafo, encabezado y etiqueta meta individualmente.

¿Qué pasa con la interfaz?

Así como hay varios backends de CMS sin cabeza comunes de uso popular, también hay algunos marcos de frontend excelentes para elegir.

Dos de los mejores son React y Vue, y estos marcos modernos, una vez más, han sido diseñados para funcionar de manera eficiente, cargar contenido rápidamente y ofrecer la mejor experiencia de usuario a los visitantes de su sitio web.

Recuerda tener en cuenta las consideraciones técnicas. Por ejemplo, la representación previa de su contenido puede garantizar que sea completamente visible para los rastreadores de motores de búsqueda, que podrían no ser capaces de "ver" el contenido si se representa en el lado del cliente mediante JavaScript.

Consideraciones finales

Una vez que se implemente su CMS sin cabeza, asegúrese de que lo auditen adecuadamente desarrolladores web acreditados y especialmente expertos en SEO, para asegurarse de que no se ha perdido ningún tecnicismo que podría afectar sus clasificaciones de búsqueda.

Un ejemplo de esto que es bastante común con las API es la proliferación de URL dinámicas para cosas como categorías de comercio electrónico, diferentes tamaños y colores de un producto y paginación de resultados.

Al hacer que todas estas URL sean visibles para los robots de los motores de búsqueda, corre el riesgo de consumir su presupuesto de rastreo antes de que encuentren el contenido de URL estático más valioso en su sitio.

[Estudio de caso] Administrar el rastreo de bots de Google

Con más de 26 000 referencias de productos, 1001Pneus necesitaba una herramienta confiable para monitorear su rendimiento de SEO y asegurarse de que Google dedicaba su presupuesto de rastreo a las categorías y páginas correctas. Aprenda a administrar con éxito el presupuesto de rastreo para sitios web de comercio electrónico con OnCrawl.
Lea el estudio de caso

Anime a sus desarrolladores a implementar direcciones URL estáticas siempre que sea posible y use las metaetiquetas de robots implementadas en su CMS sin encabezado para bloquear el acceso del rastreador a páginas dinámicas no deseadas.

Mirando hacia el futuro

Al tener en cuenta todo lo anterior, puede crear bases de datos de sitios web complejas y completas que pueden servir sitios de escritorio, sitios y aplicaciones móviles, parlantes inteligentes, bots de chat de IA, pantallas de información en la tienda y muchos, muchos más tipos de dispositivos a través de la Internet de las Cosas.

El trabajo de desarrollo futuro puede generar actualizaciones instantáneas en los diferentes dispositivos y plataformas para los que publica datos, lo que permite un retorno de la inversión más rápido y positivo de sus campañas de contenido y SEO.

Y al igual que la separación de contenido y diseño que vino con las hojas de estilo en cascada (CSS) a principios de la década de 2000, el CMS autónomo le brinda una forma más granular de definir, editar y representar su contenido, lo que lo ayuda a lograr sus objetivos de comercio electrónico y SEO en una forma más administrada a medida que construye su base de datos durante los próximos meses y años.