Agencia de SEO para Shopify Hydrogen

Hydrogen es el framework de tienda headless basado en React de Shopify, construido sobre Remix. Oxygen es el runtime global en el borde de Shopify que despliega las rutas de Hydrogen. Online Store 2.0 es el sistema moderno de plantillas Liquid de Shopify, con secciones, bloques y metaobjetos, servido desde el CDN estándar de Shopify. Hydrogen cambia la comodidad de Liquid (sitemap integrado, canonical automático, extensiones de app de tema) por el control total de Remix: rutas personalizadas, loaders, exportaciones meta, HTML renderizado en el borde y propiedad del repositorio del front-end. Para el SEO, esto significa más poder y más responsabilidad.

Sí. 1Digital® Agency es un Shopify Plus Partner certificado con trabajo continuo en Shopify desde 2012. Hemos entregado tiendas Hydrogen + Oxygen y programas de SEO para Hydrogen en marcas DTC, B2B y Plus con varias tiendas. Más de 400 marcas confían en nosotros, con una calificación de 4.9/5 en más de 100 reseñas verificadas.

Hydrogen v2 está construido sobre Remix, por lo que las metaetiquetas se entregan mediante la exportación meta de Remix (sintaxis de Remix v2: arreglo de objetos que devuelve { title }, { name, content }, etc.). En Hydrogen v1 el patrón era distinto (un componente Head específico de Hydrogen); los proyectos modernos usan Hydrogen v2. Diseñamos un helper de meta en el layout para que las etiquetas globales (Organization, WebSite, OG por defecto) se definan una sola vez y el meta a nivel de ruta se combine encima. Canonical, hreflang, robots e imagen OG se manejan en la misma exportación.

El JSON-LD se entrega desde los loaders de rutas y un elemento renderizado en el servidor en el Layout o en el componente de la ruta. Patrón: los loaders obtienen los datos de producto/colección/artículo desde la Storefront API; el componente de la ruta renderiza tanto el contenido visible como la etiqueta script de JSON-LD con esos datos; la exportación meta maneja el canonical y los metadatos OG; todo se renderiza en el servidor antes de enviar el HTML. Diseñamos Product + Offer + Review + AggregateRating + BreadcrumbList + FAQPage + Organization en el alcance adecuado (Organization una vez por app, Product por página de producto).

Oxygen ejecuta las rutas de Hydrogen en los puntos de presencia globales del borde de Shopify, de forma similar a Vercel Edge o Cloudflare Workers. Consecuencias para el SEO: (1) un TTFB menor estira más el presupuesto de renderizado de Googlebot; (2) los rastreadores de motores de IA con presupuestos de tiempo estrictos por solicitud (GPTBot, ClaudeBot, PerplexityBot) reciben el HTML completo antes de agotar el tiempo; (3) las respuestas en caché en el borde implican que los encabezados Vary y Cache-Control deben ajustarse para un comportamiento amigable con los rastreadores. Auditamos el HTML servido por Oxygen contra la Inspección de URL de Search Console para confirmar un renderizado equivalente al del rastreador.

Hydrogen no genera automáticamente un sitemap como lo hace Liquid Online Store. Tú eres el responsable. Patrón: define $sitemap.xml como una ruta de recursos de Remix que consulta la Storefront API para productos, colecciones y contenido, los formatea como un índice de sitemaps con sub-sitemaps y los sirve con encabezados de caché adecuados. Lo mismo para robots.txt y llms.txt: las rutas de recursos de Remix devuelven respuestas de texto. Las entregamos como parte de la fase de base y las instrumentamos para revalidar con webhooks del catálogo o cada 60 minutos.

Puedes construir una tienda headless de Shopify con cualquier framework (Next.js, Nuxt, Astro, SvelteKit) que llame a la Storefront API. Hydrogen es el camino con criterio propio: componentes de React creados por Shopify, cliente de la Storefront API con tipado seguro, integración con el despliegue en Oxygen, hooks de la API de cuentas de clientes y patrones listos para carrito, pago y autenticación de clientes. Compensaciones de SEO: Hydrogen + Oxygen te da una integración estrecha con Shopify y despliegue en el borde; Next.js + Storefront API te da el ecosistema más amplio de Next.js (Vercel, Cloudflare, Netlify, patrones de App Router) a costa de construir tú mismo la integración con Shopify. Entregamos en ambos.

Hydrogen sobre Oxygen suele entregar LCP y TTFB en verde de fábrica gracias al SSR en el borde. INP es donde normalmente se concentran los proyectos: el árbol de React de Hydrogen puede ser pesado si los límites de hidratación no se trazan con cuidado. Usamos los loaders de Remix + patrones diferidos para transmitir contenido, trazamos de forma estrecha los límites de los componentes de cliente (solo widgets interactivos) y auditamos los ejecutores de personalización en busca de JS bloqueante. El trabajo de CLS se centra en pistas de precarga de imágenes desde el servidor, reserva de espacio en el diseño para la personalización de carga tardía y la estrategia de carga de fuentes.

Sí. Hydrogen se integra con Shopify Markets para el enrutamiento localizado (rutas con prefijo o enrutamiento a nivel de dominio) y con Plus B2B Edition para catálogo y precios según el grupo de clientes. Las implicaciones de SEO reflejan el manual general de SEO para Plus: topología de hreflang en el sitemap (no en meta), canonical fijado para contenido compartido entre Markets, límite indexable / restringido para catálogos B2B y esquema Offer que emite solo precios públicos del catálogo (nunca descuentos por grupo de clientes). Los loaders de rutas de Hydrogen hacen todo esto limpio: el contexto se conoce en el servidor antes de enviar el HTML.

Fase 1: auditoría que cubre la cobertura de exportaciones meta por ruta, la completitud del JSON-LD, la orquestación del sitemap, robots y llms.txt, la topología de canonical y hreflang, el comportamiento del borde de Oxygen, los Core Web Vitals por plantilla y la estrategia de caché de la Storefront API. Fase 2: base: rutas de recursos de sitemap y llms.txt, grafo de esquema en el layout y la ruta, refactorización de los límites de hidratación orientada a INP, ajuste de encabezados de caché en el borde y estrategia de imágenes OG. Fase 3: crecimiento: mapeo de palabras clave a rutas, plantillas de SEO programático (rutas dinámicas de Remix), producción de contenido y seguimiento de citaciones en motores de IA. El código llega directamente al repositorio de Hydrogen.