Localización de páginas web: guía para WordPress, Shopify y Next.js

Localización web no es solo traducir texto

Localizar una página web significa adaptar la experiencia completa del usuario a otro idioma y mercado. Esto incluye textos visibles (headlines, párrafos, botones, formularios), textos ocultos (alt de imágenes, meta descriptions, structured data, microcopy), URLs (slugs traducidos), imágenes (con connotaciones culturales), formatos (fecha, moneda, teléfono, dirección), e incluso flujo de navegación. Una traducción sin localización deja la mitad del trabajo sin hacer.

Paso 1: Inventario de strings

Antes de traducir, hay que identificar todo el contenido localizable. En una web típica esto incluye: páginas (home, about, services, contact, blog posts), posts (artículos publicados), productos (fichas, variantes, atributos, categorías), elementos de navegación (menús, breadcrumbs, footer), elementos de UI (botones, formularios, mensajes de error), emails transaccionales, contenido del checkout, structured data, meta tags, alt de imágenes.

Un error común es olvidar los strings ocultos: meta descriptions, alt de imágenes, microcopy, structured data, emails transaccionales. Estos strings no se ven al navegar pero afectan SEO, accesibilidad y experiencia.

Paso 2: Traducción con lingüista web

La traducción web requiere lingüistas especializados. No es lo mismo traducir un blog post que un CTA de 3 palabras; no es lo mismo traducir un párrafo que un menú de navegación. Los lingüistas web entienden las restricciones de espacio (un botón solo acepta N caracteres), las convenciones de UI (los verbos van en infinitivo o imperativo según idioma), y la jerarquía visual (un H1 se traduce distinto a un párrafo).

Paso 3: SEO localizado

El SEO localizado es la mitad del valor de una traducción web. Una traducción sin SEO localizado pierde la mitad del tráfico potencial. Esto incluye: keyword research en el mercado objetivo (México, España, LATAM), adaptación de URLs (slugs traducidos), meta titles y descriptions optimizados para el keyword del mercado objetivo, encabezados H1-H6 con keywords localizadas, alt de imágenes descriptivos, textos de anclas internas, y structured data traducido.

Paso 4: hreflang y sitemap multilingüe

El hreflang es una etiqueta HTML que le dice a Google qué versiones de idioma y región existen de una página. La sintaxis es: <link rel='alternate' hreflang='es-MX' href='https://www.traduc-ir.com/servicios/' />. Para una página con versiones en español de México (es-MX), español de España (es-ES) e inglés (en), cada página debe tener 3 hreflang: uno para cada versión, más uno x-default.

Paso 5: QA en staging

Antes de publicar, haz QA en staging. Esto significa revisar la versión traducida en un entorno de pruebas para detectar problemas antes de que lleguen al usuario final. Los problemas típicos son: overflow (el texto traducido es más largo y rompe el layout), truncado (el texto no cabe y se corta), caracteres especiales mal renderizados (ñ, acentos, comillas tipográficas), variables sin reemplazar ({{name}} aparece literal), HTML roto, JavaScript que depende de texto en inglés que ya no funciona.

Particularidades por plataforma

WordPress: la opción más popular es WPML (de pago, $99/año), que maneja todo el flujo de traducción dentro de WordPress. Alternativa gratuita: Polylang (más manual pero funcional). TranslatePress es buena para traducción visual en vivo.

Shopify: la opción nativa es Translate & Adaptapt (gratis hasta 2 idiomas, $20/mes para más). Para tiendas grandes, Langify ($17.50/mes) ofrece más control. Shopify maneja automáticamente el hreflang y las URLs traducidas.

Next.js: la opción moderna es next-intl (recomendada para App Router), con archivos JSON por idioma. Alternativa: react-i18next (más flexible pero más compleja). Next.js maneja routing multilingüe con carpetas [locale].

Webflow: la localización nativa (lanzada 2023) es la opción nativa, incluida en plan CMS. Alternativa: Weglot (externo, $15+/mes). Webflow maneja URLs traducidas y hreflang automáticamente.