Cómo añadir un selector de idioma a tu sitio web (sin romper nada) (2026)
Un selector de idioma suena simple: un desplegable, una bandera, una lista de idiomas. Pero si se implementa mal, rompe la navegación, perjudica el SEO y confunde a los usuarios más que no tener selector en absoluto. Aquí tienes la guía completa para hacerlo bien.
Qué debe hacer realmente un selector de idioma
Un selector de idioma es más que un control de interfaz: es una capa de coordinación entre la preferencia del usuario, la estructura de URL y la entrega de contenido. Una implementación completa debe:
- →Detectar el idioma del navegador en la primera visita. La cabecera
Accept-Language(del lado del servidor) onavigator.language(del lado del cliente) indican qué idioma prefiere el usuario. Úsala para redirigir o servir automáticamente el locale adecuado en la primera visita. - →Permitir que el usuario lo anule manualmente. La detección automática es un punto de partida, no una respuesta definitiva. Un hablante de alemán que vive en Francia puede tener el navegador en francés pero querer contenido en alemán. El selector siempre debe estar accesible.
- →Recordar la elección. Guarda el idioma seleccionado en
localStorageo en una cookie para que los visitantes recurrentes no tengan que volver a cambiarlo. Una cookie es preferible cuando quieres que el servidor conozca el idioma antes de renderizar. - →Actualizar la URL a una versión específica del idioma. Cambiar a francés debería llevar a
/fr/about, no cambiar el contenido en el mismo sitio manteniendo la URL en/about. El enrutamiento de idioma basado en URL es la base del SEO multilingüe. - →No romper la navegación. Si un usuario está en
/fr/products/widget-proy cambia a alemán, debería llegar a/de/products/widget-pro, no a la página de inicio en alemán.
Patrones de diseño: dónde colocarlo
Tres posiciones dominan en la práctica. Cada una tiene un equilibrio distinto entre visibilidad e intrusión:
| Posición | Visibilidad | Intrusión | Mejor para |
|---|---|---|---|
| Barra de navegación superior | Alta | Baja | Audiencias globales, sitios B2C |
| Pie de página | Baja | Ninguna | Opción secundaria, documentación técnica |
| Widget flotante | Alta | Media | Añadirlo a sitios ya existentes |
Desplázate horizontalmente para ver todas las columnas.
Para la mayoría de sitios globales, la barra de navegación superior es la opción por defecto correcta. Es donde los usuarios miran primero y no compite con el contenido de la página. Un widget flotante es una buena opción cuando no puedes modificar la navegación del sitio (por ejemplo, un CMS de terceros o un sitio Webflow donde quieres cambios mínimos en la plantilla).
Qué NO hacer con los selectores de idioma
No uses solo iconos de banderas
Las banderas representan países, no idiomas. Brasil y Portugal hablan ambos portugués. Bélgica tiene tres idiomas oficiales (francés, neerlandés, alemán). Suiza tiene cuatro. Canadá usa inglés y francés. Usa el nombre nativo del idioma (Français, Deutsch, 日本語) o un código de idioma (FR, DE, JA), o combina banderas con el nombre del idioma si la desambiguación regional importa.
No redirijas automáticamente sin confirmación
Redirigir silenciosamente a un usuario que llega a lingvit.com/pricing hacia lingvit.com/fr/pricing resulta desconcertante si compartió la URL en inglés a propósito. Muestra un banner no bloqueante que ofrezca el idioma detectado y deje aceptar o descartar.
No lo hagas demasiado pequeño en móvil
Una etiqueta de idioma de 14px escondida dentro de un menú hamburguesa en móvil es prácticamente invisible. Si tu audiencia está distribuida globalmente, el selector merece un área táctil visible, de al menos 44×44px, incluso en pantallas pequeñas.
No elimines el selector en móvil
Un error común es ocultar el selector de idioma en móvil “para ahorrar espacio”. Los usuarios móviles en mercados no angloparlantes necesitan control de idioma con más frecuencia que los usuarios de escritorio: es más probable que naveguen en su primer idioma.
Implicaciones en la estructura de URL
Cuando un usuario cambia de idioma, la URL debe actualizarse para reflejar el nuevo locale. Los dos patrones estándar son:
/fr/about— subdirectorio (recomendado para la mayoría de sitios)fr.example.com/about— subdominio (preferido para grandes empresas)Los subdirectorios son más sencillos de implementar y heredan directamente la autoridad del dominio. Los subdominios requieren configuración DNS independiente y los buscadores pueden tratarlos como sitios separados.
La estructura de URL que elijas para el selector debe coincidir con tu implementación de hreflang. Las etiquetas hreflang en el <head> de tu página indican a los buscadores qué URL sirve cada idioma, y esas URL deben ser las mismas a las que navega el selector.
La cuestión del SEO
Un selector de idioma que solo cambia el contenido mediante JavaScript, sin actualizar la URL, es invisible para los buscadores. Google rastrea e indexa URL, no estados de JavaScript.
Para el SEO multilingüe, el requisito es:
- 1Cada versión de idioma debe tener su propia URL rastreable (por ejemplo,
/fr/pricing). - 2Cada página debe incluir etiquetas
hreflangque apunten a todas las versiones de idioma, incluida la original. - 3El selector de idioma debe enlazar a esas URL reales, no activar una función de JavaScript que sustituye el contenido en el mismo sitio.
Por eso el cambio de idioma únicamente en el cliente (cambiar el texto vía JS sin actualizar la URL) falla en SEO aunque funcione bien para los usuarios que cambian manualmente.
Cómo lo gestiona Lingvit
El widget integrable de Lingvit incluye una implementación completa de selector de idioma:
Detección automática de idioma
En la primera visita, Lingvit lee el idioma preferido del navegador y sirve la traducción correspondiente. Sin redirección: el contenido de la página se actualiza en el mismo sitio para una carga percibida más rápida.
Coordinación con el enrutamiento de la plataforma
La traducción en tiempo de ejecución general de Lingvit no crea URL de locale indexables ni hreflang en el lanzamiento. Cuando se requiere SEO multilingüe, mantén el selector alineado con las URL de locale y los metadatos que proporciona tu plataforma.
Preferencia persistente
El idioma seleccionado se guarda en localStorage. Los visitantes recurrentes reciben su idioma preferido de inmediato sin necesidad de volver a detectarlo.
Posición y estilo personalizables
Desde el panel de Lingvit puedes configurar la posición del selector (arriba a la derecha, abajo a la derecha, abajo a la izquierda), el formato de visualización (nombre del idioma, código o bandera + nombre) y el esquema de color para que coincida con tu marca.
Preguntas frecuentes
- ¿Puedo personalizar el diseño del selector de idioma?
- Sí. Desde el panel de Lingvit puedes definir la posición del widget, elegir entre mostrar el nombre completo del idioma, un código de dos letras o una bandera junto al nombre, y aplicar un color que coincida con tu marca. También se admiten sustituciones de CSS personalizadas para un estilo avanzado.
- ¿Cómo interactúa el selector con hreflang?
- La traducción en tiempo de ejecución general de Lingvit no crea URL de locale indexables ni hreflang en el lanzamiento. Mantén el selector alineado con las URL de locale que proporciona tu plataforma cuando se requiera SEO multilingüe.
- ¿Y si quiero construir mi propio selector personalizado?
- Un selector personalizado puede controlar el locale en tiempo de ejecución. Tu plataforma sigue siendo responsable del enrutamiento de URL indexables y de hreflang fuera de la integración de WordPress compatible.
Guías relacionadas
Añade un selector de idioma a tu sitio
Detección automática de idioma, enrutamiento de URL y un widget de selector personalizable, todo en una sola etiqueta de script.