Cómo agregar un selector de idioma a su sitio web: 2 métodos

Resume este post con: 8 minutos de lectura

ChatGPT Perplejidad Grok Inteligencia artificial de Google

Puede agregar un selector de idioma a un sitio web de dos maneras. Constrúyalo usted mismo como una lista de enlaces a cada versión de idioma de la página actual, o utilice una herramienta de traducción de sitios web que agregue un conmutador que pueda configurar. Elijas lo que elijas, el selector debe aparecer en cada página y etiquetar cada idioma en ese idioma (Deutsch, Español, Français). También debería mantener al visitante en la misma página cuando cambia y permitir que las personas elijan en lugar de redirigirlos.

Ambos métodos se muestran a continuación, paso a paso, con el código que puedes copiar y las reglas de diseño que recomiendan W3C y Google.

Conclusiones clave

• Un selector de idioma debe vincularse a una URL real e separada para cada idioma en lugar de intercambiar texto con un script. Las URL separadas son las que permiten a los motores de búsqueda indexar cada versión.
• Etiquete los idiomas con sus propios nombres (“Deutsch”, no “German”) y no confíe únicamente en las banderas. El W3C desaconseja el uso de banderas de países para identificar idiomas.
• Coloque el selector en el mismo lugar en cada página, generalmente el encabezado o una esquina fija, y mantenga a los visitantes en la página equivalente cuando cambien.
• No fuerce a los visitantes a ingresar a un idioma mediante la dirección IP o la configuración del navegador. Google recomienda no realizar redirecciones automáticas entre versiones de idiomas y sugiere vincularlas en su lugar.
• Las herramientas de traducción como ConveyThis agregan el selector automáticamente y le permiten darle estilo (banderas, etiquetas, posición, colores) sin código.

Qué hace que un selector de idiomas sea bueno

Estas reglas provienen de la guía de internacionalización del W3C y de la documentación de Google sobre sitios multilingües:

1. Ponlo en cada página. W3C dice: “Siempre es mejor agregar enlaces a versiones en idiomas alternativos y hacerlo en cada página” (W3C).
2. Nombra cada idioma en su propio idioma. Un hablante de alemán que escanea una página en inglés busca “deutsch”, no “alemán” W3C recomienda que los enlaces sean “en el idioma de la página a la que apuntan”
3. Trate las banderas como decoración opcional, nunca como etiqueta. W3C dice: “Resista la tentación de utilizar banderas de países para identificar idiomas. Algunos países tienen más de un idioma y algunos idiomas se hablan en más de un país” Si usa banderas para darle estilo, muestre siempre el nombre del idioma junto a ellas.
4. Mantenga al visitante en la misma página. Cambiando al español desde /pricing Debería aterrizar en /es/pricing, no en la página de inicio en español.
5. No fuerce las redirecciones. Google aconseja: “Evitar redirigir automáticamente a los usuarios de una versión de idioma de un sitio a una versión de idioma diferente de un sitio” y sugiere agregar hipervínculos a versiones de otros idiomas en su lugar (Centro de búsqueda de Google). Si desea sugerir un idioma basado en el navegador, utilice un banner que el visitante pueda descartar en lugar de una redirección.
6. Haz que sea fácil de encontrar y usar. Colóquelo en un lugar familiar (arriba a la derecha del encabezado o del pie de página en sitios con mucho contenido), hágalo lo suficientemente grande como para tocar un teléfono y asegúrese de que funcione con un teclado.

Método 1: construye tú mismo el selector de idioma

Utilice esto si administra su propio HTML o tema y cada idioma ya tiene su propia URL.

Paso 1: asegúrese de que cada idioma tenga su propia URL

Un selector vincula entre versiones, por lo que las versiones deben existir primero: example.com/about, example.com/de/about, example.com/es/about. Si todavía estás eligiendo una estructura, consulta subdirectorios vs subdominios para SEO multilingüe.

Paso 2: agregue el marcado del selector

El selector accesible más simple es una lista de enlaces. Cada enlace dice a qué idioma conduce (hreflang) y en qué idioma está su texto (lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

Este marcado funciona por tres razones:

• Los enlaces simples se pueden rastrear, por lo que los motores de búsqueda descubren todas las versiones de idioma.
• lang En cada enlace, los lectores de pantalla pueden pronunciar “Deutsch” correctamente.
• aria-current marca el idioma que el visitante está leyendo ahora.

Con más de cinco idiomas, un menú desplegable ahorra espacio. Utilice un botón que abra la lista en lugar de un <select> que navega al cambiar, lo cual resulta incómodo para los usuarios del teclado.

Paso 3: generar los enlaces para la página actual

Cada enlace debe apuntar a la página actual en el otro idioma. En un CMS, esto generalmente proviene de variables de plantilla o complemento multilingües. En un sitio estático, genere la lista en el momento de la compilación a partir de un mapa de URL equivalentes. No codifique enlaces a la página de inicio de cada idioma.

Paso 4: agregue etiquetas hreflang en el encabezado de la página

El selector visible es para personas. Los motores de búsqueda también lo necesitan <link rel="alternate" hreflang="…"> etiquetas en el <head> de cada página, enumerando cada versión de idioma, incluida la página misma, más una x-default. Nuestro Guía completa de Hreflang muestra el marcado exacto.

Paso 5: prueba

• Cambie de idioma desde una página profunda (no desde la página de inicio) y confirme que llega a la página equivalente.
• Vaya al selector con el teclado y ábralo sin el mouse.
• Compruébalo en un teléfono y asegúrate de poder tocar cada idioma fácilmente.
• Vea la fuente en una página traducida y confirme que las etiquetas hreflang estén allí.

Obtienes control total sobre el diseño y el comportamiento. El costo es que usted mismo mantenga el mapeo de URL, las etiquetas hreflang y las traducciones.

Método 2: utilizar el selector de una herramienta de traducción de sitios web

Una herramienta de traducción crea las versiones de idioma, sus URL, las etiquetas hreflang y el selector juntos, lo que las mantiene todas sincronizadas. Con ConveyThis, el conmutador se agrega cuando instala el complemento, la aplicación o el script y lo personaliza desde la configuración del panel sin escribir código.

Estas son las configuraciones que puedes cambiar:

Para seguir las mejores prácticas anteriores con ConveyThis:

1. Establezca la etiqueta con el nombre nativo del idioma. Mantenga las banderas como un extra visual o apáguelas.
2. Coloque el conmutador dentro de su encabezado proporcionando el ID del elemento donde debería aparecer, de modo que quede donde los visitantes lo esperan.
3. Deje la redirección automática opcional por idioma del navegador desactivada a menos que tenga una razón de peso para usarla. El propio panel advierte que los rastreadores de motores de búsqueda pueden seguir dichas redirecciones.
4. Elija una estructura de URL (subcarpetas, subdominios o ?lang; dominios de segundo nivel en el plan Extreme). Las etiquetas Hreflang se agregan automáticamente.

Lea más sobre el diseño actual en conoce al nuevo selector de idioma, o consulte las guías de la plataforma para WordPress y Shopify.

No escribes código, el selector, las URL y hreflang permanecen sincronizados automáticamente y funciona en la mayoría de las plataformas. Obtienes menos control sobre el marcado que con una compilación totalmente personalizada, aunque aún puedes colocar y diseñar el conmutador.

¿Qué método debes elegir?

Errores comunes en el selector de idiomas

• Usando solo banderas. ¿La bandera española significa España, México o Argentina? ¿La bandera suiza es alemana, francesa o italiana? Añade siempre una etiqueta.
• Listado de idiomas únicamente en inglés. Es posible que un visitante japonés no reconozca la palabra “japonés”.
• Dejar a los visitantes en la página de inicio después de que cambien.
• Ocultar el selector en un menú de hamburguesas en el escritorio o detrás de un pequeño icono.
• Redireccionamiento automático por IP o idioma del navegador, sin posibilidad de retorno.
• Cambiar de idioma solo mediante script, sin URL separadas, por lo que los motores de búsqueda solo ven un idioma.

Preguntas frecuentes

¿A dónde debe ir un selector de idioma? La mayoría de los sitios lo colocan en la parte superior derecha del encabezado, donde los visitantes lo esperan. Los sitios con mucho contenido a menudo lo repiten en el pie de página. Mantenlo en el mismo lugar en cada página.

¿Debo usar banderas en mi selector de idioma? Sólo junto a los nombres de los idiomas. Las banderas representan países, no idiomas, por lo que por sí solas confunden a los visitantes de países multilingües y a los hablantes de idiomas ampliamente hablados.

¿Mi sitio web debería cambiar de idioma automáticamente según el navegador? Es mejor no forzarlo. Google recomienda no realizar redirecciones automáticas entre versiones de idiomas. Si desea ayudar a los visitantes, muestre una sugerencia que puedan aceptar o descartar y mantenga siempre visible el selector.

¿Un selector de idioma ayuda al SEO? El selector en sí ayuda a los motores de búsqueda a descubrir sus versiones de idioma a través de enlaces rastreables. Las clasificaciones en cada idioma dependen de tener URL separadas, etiquetas hreflang y metadatos traducidos.

Para configurar un conmutador, páginas traducidas y hreflang juntos, prueba ConveyThis gratis. Los planes están en marcha página de precios.