Selector de idioma en tu web: dónde ponerlo y cómo hacerlo bien

Cuando tu web habla varios idiomas, hay un elemento de interfaz que parece un detalle menor pero que tiene un impacto directo en las ventas y en el SEO: el selector de idioma. Es el punto de entrada que le permite a cada visitante elegir su idioma, y si no está donde lo esperan o funciona mal, una parte de tu tráfico internacional simplemente se va sin comprar.

En esta guía te explicamos dónde colocarlo, cómo diseñarlo para que funcione, qué errores evitar y cómo conectarlo con tu SEO para que Google también lo aproveche.

Resumen rápido

• El selector de idioma reduce el rebote internacional y genera confianza en los usuarios que no hablan tu idioma principal.
• Las dos posiciones que funcionan son: arriba a la derecha (cabecera) y en el pie de página.
• Usa el nombre del idioma en texto ("Español", "English"), no solo banderas.
• Al cambiar de idioma, el usuario debe ir a la misma página en el nuevo idioma, no a la home.
• El selector debe apoyarse en URLs por idioma + hreflang para que Google también entienda tus versiones.

Por qué el selector importa más de lo que parece

El selector de idioma es el primer punto de fricción entre un visitante internacional y tu web. Si lo encuentran fácil, se quedan. Si no lo encuentran, o si funciona mal, se van. Y en e-commerce o en cualquier web donde la conversión depende de la confianza, la percepción de que "esta web es para mí" hace una diferencia real.

Un selector bien puesto:

• Reduce el rebote de visitantes internacionales. Si alguien de Francia llega a tu web en español y no encuentra rápidamente cómo cambiarlo, se irá. Un selector visible resuelve ese momento de duda en segundos.
• Genera confianza. Ver que tu idioma está disponible es una señal de que la web está pensada para ti. Eso reduce la fricción psicológica antes de comprar.
• Ayuda al SEO. Un selector con enlaces reales a URLs por idioma —no solo un cambio de JavaScript— permite a Google descubrir y rastrear tus otras versiones de idioma a través de esos enlaces.

Dónde colocarlo: las dos posiciones que funcionan

Hay convenciones de UX que los usuarios han interiorizado. Romperlas confunde. Seguirlas facilita la navegación sin que nadie tenga que pensarlo.

Arriba a la derecha (cabecera)

Es el sitio donde la gente espera encontrarlo. Un icono de globo 🌐 o el código del idioma actual (ES, EN, FR…) que, al hacer clic, despliega el resto de opciones. La ventaja de colocarlo en la cabecera es que está visible en todas las páginas y no compite con los elementos principales de navegación.

El estilo recomendado: el código del idioma actual en mayúsculas o el nombre del idioma, con una flecha o chevron para indicar que es un menú desplegable. Simple, reconocible y discreto.

En el pie de página

Mucha gente baja al footer buscando opciones que no encontraron arriba: política de privacidad, términos, idioma, país. Repetir el selector en el footer es una red de seguridad que no molesta a nadie y que puede ser determinante para el usuario que ya llegó hasta abajo de la página sin encontrar lo que buscaba.

La recomendación es usar las dos posiciones a la vez. El coste de implementación es prácticamente cero y cubre a todos los perfiles de usuario.

Los errores que comete casi todo el mundo

Solo banderas, sin texto

Las banderas representan países, no idiomas. El español no es solo de España, el inglés no es solo del Reino Unido y el francés no es solo de Francia. Usar solo la bandera de España para el español es técnicamente incorrecto y puede resultar molesto para un usuario mexicano, argentino o colombiano.

Usa el nombre del idioma en ese mismo idioma ("Español", "English", "Français", "Deutsch"). Si quieres añadir una bandera como apoyo visual, hazlo, pero que el texto siempre esté presente. Así es inequívoco para todos.

Esconderlo en un menú profundo

Si hay que hacer tres clics para cambiar de idioma, no sirve. El selector tiene que estar en primer nivel de navegación, visible sin interacción previa, o al menos al alcance con un solo clic. Enterrarlo en un menú de configuración o en el footer sin que sea visible es prácticamente como no tenerlo.

Redirigir siempre a la home al cambiar de idioma

Este es uno de los errores más frustrantes desde el punto de vista del usuario. Imagina que estás leyendo el artículo del blog de una empresa, encuentras el selector de idioma y lo cambias —y de repente estás en la portada de la web en otro idioma, sin que el artículo que estabas leyendo aparezca por ningún lado.

El selector debe llevar al usuario a la misma página que estaba viendo, pero en el nuevo idioma. Si estaba en /fr/produit/sneakers, al cambiar a inglés debe ir a /en/product/sneakers. Si no existe la versión equivalente en ese idioma, la segunda opción es la home de ese idioma. Nunca la home por defecto sin más.

Autodetectar el idioma y no dejar cambiarlo

La detección automática del idioma por geolocalización o por la configuración del navegador puede mejorar la experiencia. Pero siempre debe haber una forma visible de cambiar manualmente. Hay usuarios que tienen el navegador en inglés aunque prefieran ver el contenido en español, o que están viajando y quieren el contenido en su idioma aunque su IP diga que están en otro país. El control final siempre debe estar en el usuario.

El detalle de SEO que la mayoría ignora

Aquí está la parte que pocos implementan bien: para que Google entienda tus versiones de idioma a través del selector, los enlaces del menú deben apuntar a URLs reales que Google pueda rastrear.

Si el cambio de idioma solo ocurre mediante JavaScript sin cambiar la URL —es decir, si tuweb.com/producto muestra el contenido en español o en francés según alguna cookie o parámetro— Google no puede rastrear las versiones distintas. Para Google, es una sola URL con un solo contenido.

La estructura correcta es que cada idioma tenga su propia URL real:

• tuweb.com/es/producto — versión en español
• tuweb.com/fr/produit — versión en francés
• tuweb.com/en/product — versión en inglés

Y que el selector de idioma enlace a esas URLs reales. Así, cuando Google rastrea tu web y encuentra el selector en la cabecera, puede descubrir las otras versiones de idioma siguiendo esos enlaces, además de a través del hreflang.

Si quieres entender cómo funciona el hreflang y por qué es crítico para el SEO internacional, lo explicamos paso a paso en hreflang explicado fácil.

Un selector de idioma que solo usa JavaScript para cambiar el contenido —sin cambiar la URL— no ayuda al SEO. Google no ve las versiones de idioma; solo ve una URL. Para posicionar en otros idiomas necesitas URLs reales.

Accesibilidad: lo que muchos olvidan

El selector de idioma también debe ser accesible para usuarios con lectores de pantalla:

• El botón o enlace principal debe tener un texto descriptivo: "Seleccionar idioma" o "Change language", no solo un icono de globo sin texto alternativo.
• El menú desplegable debe ser navegable con teclado.
• Los nombres de los idiomas deben estar escritos en el idioma de destino, no en el de origen. "English" se escribe "English", no "Inglés". Así los lectores de pantalla lo pronuncian correctamente para el usuario del idioma correspondiente.

Cómo añadirlo sin tocar código

La parte buena es que si usas una herramienta de traducción como Lantis, el selector de idioma se añade automáticamente al instalar el snippet en tu web. No necesitas diseñarlo, programarlo ni conectarlo a las URLs por idioma: aparece ya configurado, conectado a las versiones correctas de cada página y con el hreflang generado.

Funciona en Framer, Webflow, Shopify y cualquier plataforma. Puedes ajustar su posición, el estilo y qué idiomas muestra desde el panel de Lantis, sin tocar código.

Para webs que ya tienen un selector personalizado o que quieren un control más fino sobre el estilo, Lantis también expone la API de idiomas para que el equipo de desarrollo pueda conectar el selector propio.

Preguntas frecuentes

¿Debo mostrar el selector aunque solo tenga dos idiomas?

Sí, siempre. Incluso con dos idiomas, el selector es necesario para que el usuario pueda cambiar manualmente si la detección automática no acierta, y para que Google pueda descubrir la segunda versión a través del enlace.

¿El selector de idioma puede afectar a la velocidad de la web?

Si está bien implementado, no debería. Un selector de idioma es básicamente un menú con enlaces, que es uno de los elementos más ligeros que puede tener una web. El impacto en velocidad viene de la herramienta de traducción subyacente, no del selector en sí.

¿Es mejor mostrar el selector con el nombre del idioma actual o con el de destino?

Las dos convenciones existen. La más común —y la más intuitiva— es mostrar el idioma actual y, al desplegarlo, los idiomas disponibles con su nombre en su propio idioma. Lo importante es que los nombres siempre estén en el idioma de destino ("Français", no "Francés"), para que un usuario francés lo reconozca aunque no entienda el idioma de la web.

Conclusión

El selector de idioma es una pieza pequeña con un impacto desproporcionado en la experiencia del usuario internacional y en el SEO. Colocarlo bien (cabecera + footer), diseñarlo correctamente (nombres de idioma, no solo banderas) y conectarlo a URLs reales por idioma es lo que convierte un detalle técnico en una ventaja de negocio.

La buena noticia es que si usas una capa de traducción como Lantis, todo esto se configura solo: el selector aparece automáticamente, ya conectado a las URLs correctas y con el hreflang generado.

Empieza gratis y ten tu selector de idioma funcionando hoy.