Posicionamiento web SEO para Gatsby

Posicionamiento web SEO para Gatsby, ¿es posible?. Desde el despegue del entorno web en los 90, las expectativas crecen a un ritmo frenético que marca el usuario. La mayoría de los sitios web están conectados a diversas fuentes de datos: un sistema de gestión de contenido (CMS) como WordPress, Prestashop o Shopify, a redes sociales como Instagram o Twitter, o imágenes de alta resolución alojadas en una Cloud. Desde hace un tiempo, se unió Gastby y con él un nuevo desafío para el posicionamiento web SEO.

¿Qué es Gastby.js?

Gatsby es un framework gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos. Este generador de contenido estático puede producir sitios más ligeros que carguen más rápido, debido a que almacenan todo el contenido en formato de texto plano, en los propios ficheros del sistema, y por lo tanto no necesitan base de datos. Esto puede ser una ventaja competitiva y un aliciente de cara a la implementación SEO en Gastby.

Se suele referir como un generador de sitio estático. Gatsby es más que un generador de sitio estático. Realmente es un framework de PWA. Gastby es una oportunidad de mejora en la usabilidad de un sitio web. Construir su sitio web con Gatsby podría impactar de forma positiva en el posicionamiento web SEO del mismo.

Puntos importantes para Posicionamiento web SEO en Gastby.js

La relación entre Gastby. js y una estrategia de posicionamiento SEO es clara. Lo que nos preocupa a los SEO es poder implementar de forma eficaz y automática (eficiente) para mejorar la adquisición de tráfico orgánico de nuestro sitio web lo más óptimas posibles. Independientemente de cual sea nuestro nivel de especialización en desarrollo web, hay muchos detalles que debemos de tener en cuenta. Cada plataforma puede tener sus problemas y nuestro trabajo es comprobarlo todo.

1# Rastreo y Renderizado.

Este punto es clave y es uno de las principales ventajas en cuanto a la implementación SEO en Gastby. Gracias a que las páginas de Gatsby se representan en el lado del servidor, todo el contenido de la página está disponible para Googlebot y otros rastreadores de motores de búsqueda. Puede ver esto viendo la fuente de esta página en su navegador, hacer clic derecho, en Ver fuente. Se ve el documento HTML totalmente renderizado.

Instalando gatsby-plugin-offline, se podrá ver un documento HTML parcial que no contiene el HTML que esperaba. Se podrá optimizar el consumo de ancho de banda y no permitir que sus usuarios descarguen demasiados datos. Servir un documento HTML parcial está bien. Pero Google y otros motores de búsqueda podrán ver el HTML completo porque gatsby-plugin-offline sólo comienza a funcionar en la carga de la segunda página. Un motor de búsqueda siempre ejecuta una página en modo Sandbox, que es la primera ola de renderizado.

2# La Indexación del site en Gastby.js

Uno de los puntos críticos en el posicionamiento SEO web es la Indexación. Dentro de esta, los archivos sitemap XML. enumera las páginas importantes de un sitio web, asegurándose de que los motores de búsqueda (como Google) puedan encontrarlas y rastrearlas todas. Para generar un sitemap XML en Gastby, se puede utilizar el paquete gatsby-plugin-sitemap. 

Otro punto importante en la indexación de un site, es la implementación de etiquetas canonicals Gatsby tiene un complemento simple llamado gatsby-plugin-canonical-urls que establece la URL base utilizada para las URL canónicas para su sitio web. Las URL canónicas son importantes, ya que le dicen a los motores de búsqueda cuál era la URL “original” para una página y ayudan a evitar el contenido duplicado. Para ello se debe instalar el complemento Helmet más el complemento gatsby-plugin-react-helmet-canonical-urls. 

3# WPO de un sitio web en Gastby.js

Los sitios web desarrollados por Gastby pueden impactar positivamente en el SEO on Page de tu site.  Los sitios estáticos son rápidos, pues no consultan nada a la base de datos,y el renderizado para cuando el usuario los necesite, básicamente son instantáneos, no ejecutan ningún código del lado del servidor.

Gastby puede mejorar el WPO del site, permitiendo que las transiciones de página parezcan instantáneas. También viene con una funcionalidad lista para usar para crear comportamientos interactivos muy satisfactorios.

4# Implementación de Metadatos.

Agregar atributos SEO en Gastby, como los metadatos a las páginas, como el título y la descripción de la página, ayuda a los motores de búsqueda a comprender su contenido y optimizar el CTR.

Para agregar metadatos a las páginas se deben añadir los componentes react-helmet (junto con el complemento Gatsby React Helmet para soporte SSR) a los componentes de su página. 

5# Enlazado Interno del sitio web en Gastby.js.

El enlazado interno juega un papel importante en la implementación SEO en sitios Gastby.. El componente Gatsby <Link /> es para hacer el interlinking entre páginas dentro de su sitio. Para crear un enlace entre dos páginas en un sitio de Gatsby, se debe seguir este proceso:

• Abrir un componente de página (por ejemplo, src / pages / index.js) en su sitio de Gatsby. 
• Importar el componente Enlace de Gatsby, que lo hace disponible en el componente.
• Agregar un componente <Link /> debajo del encabezado y dele una propiedad a con el valor de “/ contact /” para el nombre de ruta:

import React from “react”

import { Link } from “gatsby”

export default () => (

  <div>

    <Link to=”/contact/”>Contact</Link>

  </div>

)

El código anterior agregará un enlace a la página de contacto, renderizado automáticamente en HTML como <a href=”/página/”> pero con beneficios de rendimiento adicionales. El valor del enlace se basa en el nombre de archivo de la página, que en este caso sería contact.js.

6# Implementación SEO Internacional con Gatsby.js

Para implementar una estrategia SEO Internacional en un multisite en Gatsby tenemos un el plugin gatsby-plugin-i18n. Este plugin no traduce ni formatea su contenido, sino que crea rutas para cada idioma, lo que permite a Google encontrar más fácilmente la versión correcta de su sitio y, si es necesario, designar diseños de interfaz de usuario alternativos. una fecha que se muestra para un usuario en América seguiría el formato de fecha mm / dd / año, pero para un usuario en Gran Bretaña el formato de fecha cambiaría a dd / mm / año.

React-i18next permite detectar el idioma de un usuario o agregar una capa adicional de almacenamiento en caché local. Otras opciones incluyen el almacenamiento en caché, un complemento de back-end para cargar traducciones de su servidor o agrupar traducciones con Webpack.

• Detección y redireccionamiento automático del idioma del navegador.
• Poder cambiar el idioma.
• Implementar las etiquetas hreflang.

7# Crear Contenido 

La creación del contenido es fundamental para nuestra estrategia SEO. En Gatsby, todo el contenido se agrega de las diversas fuentes de datos a las que el sitio web está conectado en una sola compilación. Sólo se necesita interactuar con servidores y bases de datos cuando queremos actualizar el contenido, o se realiza un cambio en el código fuente de su sitio web.

Gatsby permite ser flexible y personalizable, en el sentido de que puedes definir templates para tus contenidos (por ejemplo para los posts), páginas, o simplemente componentes react para importar en aquella parte del código donde más te convenga.

El contenido se genera en archivos markdown dentro del propio proyecto sin utilizar una base de datos. Si defines contenidos con markdown, existen productos relacionados con los que editar estos contenidos mediante un editor WYSIWYG. Después sólo hay que coger los archivos generados y copiarlos en un servicio de almacenamiento adecuado.
Espero haber contribuido con este post a resaltar los beneficios de desarrollar un site con Gatsby y resaltar los beneficios a nivel SEO.