Web en varios idiomas

En este artículo vamos a explicar cómo hacer una web en varios idiomas, utilizando diferentes técnicas con PHP, MySQL, cookies y .htaccess. Crear una página web multilingüe es una práctica común para llegar a un público diverso.

Las técnicas multi-idioma descritas en este artículo son las más habituales y te pueden ayudar o dar ideas para solucionar algunos problemas técnicos. En la práctica, dependerá de la envergadura y complejidad de tu web elegir las técnicas multilingüe que mejor se adapten a tus necesidades.

Consejos multi-idioma

En la mayoría de los casos, para crear una web en varios idiomas puedes seguir estos consejos generales:

Planificación de Contenido Multilingüe: Antes de comenzar, planifica qué idiomas ofrecerás en tu sitio web. Luego, asegúrate de tener contenido traducido y listo para cada idioma que desees incluir.
Utiliza un Marco de Trabajo o Biblioteca: Es aconsejable utilizar un marco de trabajo o una biblioteca que facilite la gestión de contenido multilingüe. Algunos populares incluyen Laravel, Symfony y gettext.
Configuración de Idiomas: Define los idiomas disponibles en tu sitio web y establece una forma de conmutar entre ellos. Esto puede hacerse a través de enlaces o botones de cambio de idioma en la interfaz de usuario.
Traducción de Contenido: Para cada idioma, crea archivos de traducción que contengan las cadenas de texto utilizadas en tu sitio web. Estos archivos deben contener pares clave-valor donde la clave es la cadena original en el idioma principal y el valor es la traducción en el idioma deseado. Los formatos comunes son JSON, XML o archivos de texto plano.
Plantillas Multilingües: En tus plantillas HTML, incrusta las cadenas de texto de manera dinámica. Utiliza una función o método para recuperar la traducción correcta basada en el idioma seleccionado por el usuario.
Gestión de Idiomas en la URL: Una práctica común es incluir el código del idioma en la URL, /en/ para inglés, /es/ para español, etc. Esto facilita la gestión de idiomas y ayuda en la indexación por motores de búsqueda.
Detecta el Idioma del Usuario: Puedes detectar el idioma predeterminado del usuario utilizando encabezados HTTP o mediante una selección inicial en función de su ubicación geográfica.
Almacenamiento de Preferencias de Idioma: Permite a los usuarios seleccionar su idioma preferido y almacena esta preferencia en una cookie o en la base de datos para futuras visitas.
SEO Multilingüe: Implementa etiquetas hreflang en tus páginas para indicar a los motores de búsqueda que tu sitio web tiene contenido en varios idiomas.
Pruebas y Validación: Realiza pruebas exhaustivas para asegurarte de que todas las traducciones funcionen correctamente y se muestren según el idioma seleccionado por el usuario.

Técnica web multilingüe

Un ejemplo sencillo que muestra cómo hacer una web en varios idiomas utilizando PHP y cookies podría ser el siguiente:

// Define las traducciones
$translations = [
    'en' => [
        'hello' => 'Hello',
        'world' => 'World',
    ],
    'es' => [
        'hello' => 'Hola',
        'world' => 'Mundo',
    ],
];

// Obtiene el idioma seleccionado por el usuario desde una cookie, si no hay cookie selecciona 'es'
$selectedLanguage = isset($_COOKIE['language']) ? $_COOKIE['language'] : 'es';

// Función para traducir una cadena
function translate($key, $language) {
    global $translations;
    if (isset($translations[$language][$key])) {
        return $translations[$language][$key];
    }
    return $key; // Si no se encuentra la traducción, devuelve la cadena original
}

// Ejemplo de uso
echo translate('hello', $selectedLanguage); // Muestra "Hola" o "Hello" según el idioma

Este es solo un ejemplo simplificado. En un sitio web real, es probable que desees estructurar tu código de manera más organizada y modular para manejar de manera efectiva el contenido multilingüe.

Etiquetas HTML multilingües

Crear una web en varios idiomas implica traducir etiquetas específicas como alt y meta description para mejorar el posicionamiento SEO en un sitio web multilingüe. Esto es importante para lograr un buen rendimiento en los motores de búsqueda en cada uno de los idiomas. Algunas pautas sobre cómo abordar esto son:

Etiqueta lang en el HTML: Asegúrate de incluir la etiqueta lang en la declaración <html> de tus páginas para indicar el idioma principal de la página. Esto ayuda a los motores de búsqueda a comprender el idioma principal de cada página.

   <html lang="es">

Hreflang para SEO Multilingüe: En los enlaces principales de la cabecera, puedes utilizar el atributo hreflang en las etiquetas <link> para indicar a los motores de búsqueda los idiomas y regiones disponibles. Esto ayuda a garantizar que las diferentes versiones de idiomas de tu web se muestren en los resultados de búsqueda adecuados para cada audiencia.

   <link rel="alternate" hreflang="es" href="https://ejemplo.com/es/pagina" />
   <link rel="alternate" hreflang="en" href="https://ejemplo.com/en/pagina" />

Traducción de etiquetas Meta: Las etiquetas internas como meta description son importantes para describir el contenido de la página en los resultados de búsqueda. Debes traducir estas etiquetas al idioma correspondiente para que sean relevantes a los usuarios que buscan en ese idioma.

   <meta name="description" content="Descripción en español" />

Traducción de Etiquetas alt (Imágenes): Las etiquetas alt en las imágenes son importantes para la accesibilidad y el SEO. Debes proporcionar descripciones adecuadas en el idioma correspondiente para que los usuarios con discapacidades visuales y los motores de búsqueda comprendan el contenido de las imágenes.

   <img src="imagen.jpg" alt="Descripción en español" />

Contenido de Calidad en Todos los Idiomas: Además de las etiquetas, es importante que el contenido de la web esté bien traducido y sea de calidad en todos los idiomas. El SEO se basa en gran medida en la relevancia y la calidad del contenido.

Es importante traducir las etiquetas HTML como alt y meta description para un sitio web multilingüe, mejorar el SEO y brindar una experiencia relevante a los usuarios en sus respectivos idiomas. También es esencial utilizar las etiquetas hreflang y establecer correctamente el idioma principal de cada página para optimizar la indexación en motores de búsqueda.

Ejemplo de web en varios idiomas

Vamos a ver un ejemplo de web en varios idiomas con PHP y un array de idiomas. En este ejemplo se mostrarán dos idiomas: español (es) e inglés (en).

Primero, crea un array que almacene las traducciones y otros detalles relacionados con los idiomas en un archivo PHP, por ejemplo, languages.php:

<?php
// Define las traducciones
$languages = [
    'es' => [
        'lang_code' => 'es',
        'lang_name' => 'Español',
        'title' => 'Título de la página',
        'meta_description' => 'Sitio web en español',
        'h1' => 'Bienvenido a mi sitio web',
        'p' => 'Este es un ejemplo de un sitio web multilingüe.',
    ],
    'en' => [
        'lang_code' => 'en',
        'lang_name' => 'English',
        'title' => 'Page title',
        'meta_description' => 'Website in English',
        'h1' => 'Welcome to my website',
        'p' => 'This is an example of a multilingual website.',        
    ],
];
?>

Ahora, en tu archivo HTML, puedes usar este array para configurar las etiquetas <html>, <meta>, <link>, <hreflang>, los enlaces de cambio de idioma y el contenido multilingüe de toda la web:

<?php
// Obtener el idioma seleccionado por el usuario desde la url
$selectedLanguage = isset($_GET['lang']) ? $_GET['lang'] : 'es';
?>

<!DOCTYPE html>
<html lang="<?php echo $languages[$selectedLanguage]['lang_code']; ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $languages[$selectedLanguage]['lang_name']; ?></title>
  <meta name="description" content="<?php echo $languages[$selectedLanguage]['meta_description']; ?>">

  <!-- Agregar etiquetas hreflang para SEO multilingüe -->
  <?php foreach ($languages as $langCode => $langData): ?>
    <link rel="alternate" hreflang="<?php echo $langCode; ?>" href="<?php echo basename($_SERVER['SCRIPT_NAME']) ?>?lang=<?php echo $langCode; ?>">
  <?php endforeach; ?>
</head>

<body>
  <!-- Encabezado con enlaces de cambio de idioma -->
  <header>
    <ul>
      <?php foreach ($languages as $langCode => $langData): ?>
      <li>
        <a href="<?php echo basename($_SERVER['SCRIPT_NAME']) ?>?lang=<?php echo $langCode; ?>"><?php echo $langData['lang_name']; ?></a>
      </li>
      <?php endforeach; ?>
    </ul>
  </header>
  <!-- Contenido de la página -->
  <section>
    <h1><?php echo $languages[$selectedLanguage]['h1']; ?></h1>
    <p><?php echo $languages[$selectedLanguage]['p']; ?></p>
  </section>
</body>
</html>

Explicación del contenido multilingüe

Este código PHP se encarga de mostrar una página web multilingüe con contenido dinámico dependiendo del idioma seleccionado por el usuario. El funcionamiento del código sería el siguiente:

Se verifica si el parámetro ‘lang’ está presente en la URL. Si existe, se asigna su valor a la variable $selectedLanguage. De lo contrario, se establece ‘es’ como el idioma predeterminado.
La etiqueta <html> tiene un atributo lang que refleja el idioma seleccionado por el usuario.
Se generan metadatos dinámicos, como el título de la página y la descripción, según el idioma seleccionado.
Se crean etiquetas <link> con atributos hreflang para SEO multilingüe, permitiendo a los motores de búsqueda comprender las diferentes versiones de idiomas disponibles para la página.
El encabezado muestra una lista de enlaces de cambio de idioma. Cada enlace refleja la página actual pero con el parámetro ‘lang’ ajustado al idioma correspondiente.
El contenido de la página, incluido el encabezado (<h1>) y el párrafo (<p>), se muestra en el idioma seleccionado por el usuario.

Este código PHP permite la creación de una página web multilingüe que se puede cambiar dinámicamente entre diferentes idiomas, asegurándose de que los motores de búsqueda y los usuarios puedan acceder a la versión del idioma deseado de manera efectiva.

Este es solo un ejemplo básico, pero puedes ampliarlo según las necesidades de tu sitio web y agregar más contenido y características multilingües según sea necesario.

Grandes webs en varios idiomas

En aplicaciones web grandes y complejas, la optimización y la organización son esenciales. Hay estrategias para hacer más manejable la gestión de múltiples idiomas que un simple Array:

Separación en Archivos: En lugar de tener un solo archivo con un gran array de idiomas, puedes dividirlo en múltiples archivos, uno por cada idioma, y organizarlos en una estructura de carpetas. Por ejemplo:

   /languages
       /es
           translations.php
       /en
           translations.php

Carga Dinámica: En lugar de cargar todo el array de idiomas en cada página, puedes cargar dinámicamente el archivo de traducciones correspondiente al idioma seleccionado por el usuario. Esto puede hacerlo el script principal de tu aplicación, por ejemplo, en el punto de entrada.

   $selectedLanguage = obtenerIdiomaSeleccionado(); // Función para obtener el idioma
   $translations = cargarTraducciones($selectedLanguage); // Función para cargar traducciones

Esto ayuda a reducir la carga en cada página y hace que la gestión de las traducciones sea más eficiente.

Uso de una Base de Datos: En lugar de almacenar todas las traducciones en un array en PHP, considera almacenarlas en una base de datos, lo que facilita la gestión y actualización de contenido multilingüe, especialmente en aplicaciones web grandes.
Utilizar Herramientas de Internacionalización (I18n): En PHP, hay bibliotecas y frameworks que facilitan la gestión de contenido multilingüe, como Gettext y bibliotecas de I18n. Estas herramientas ofrecen métodos más avanzados para gestionar traducciones y son especialmente útiles en aplicaciones grandes y complejas.
Caching: Puedes utilizar técnicas de caché para almacenar en caché las traducciones una vez cargadas, reduciendo la necesidad de cargarlas en cada solicitud. Puedes leer el artículo cache de datos con php y mysql para más información sobre esta técnica.

La gestión de contenido multilingüe en aplicaciones web complejas puede ser complicada, pero con una estructura organizada y técnicas de optimización, puedes hacer que sea más manejable y eficiente. La elección de la estrategia dependerá de la complejidad de tu aplicación y tus necesidades específicas.

Web multilingüe en Mysql

Si el contenido de tu sitio web se encuentra en una base de datos MySQL y deseas implementar múltiples idiomas, puedes seguir estos pasos para hacerlo de manera efectiva:

Tabla de Idiomas: Crea una tabla en tu base de datos que almacene información sobre los idiomas disponibles. Esta tabla puede incluir columnas como id, code (código de idioma, como «es» o «en»), name (nombre del idioma) y otras columnas que necesites. Ejemplo de una tabla de idiomas:

   CREATE TABLE languages (
       id INT AUTO_INCREMENT PRIMARY KEY,
       code VARCHAR(5) NOT NULL,
       name VARCHAR(50) NOT NULL
   );

Tabla de Contenido Multilingüe: Para cada página web que deseas mostrar en múltiples idiomas, crea una o más tablas en la base de datos que almacene el contenido en varios idiomas. Estas tablas deben tener una columna que haga referencia a la tabla de idiomas y una columna que almacene el contenido en el idioma correspondiente. Ejemplos de tablas con contenido multilingüe:

   CREATE TABLE articles (
       id INT AUTO_INCREMENT PRIMARY KEY,
       title_multilang_id INT NOT NULL,
       content_multilang_id INT NOT NULL,
       FOREIGN KEY (title_multilang_id) REFERENCES language_content(id),
       FOREIGN KEY (content_multilang_id) REFERENCES language_content(id)
   );

   CREATE TABLE language_content (
       id INT AUTO_INCREMENT PRIMARY KEY,
       language_id INT NOT NULL,
       title VARCHAR(255) NOT NULL,
       content TEXT NOT NULL,
       FOREIGN KEY (language_id) REFERENCES languages(id)
   );

Gestión de Idiomas en la Aplicación: En tu aplicación PHP, debes gestionar la selección de idioma por parte del usuario y consultar la base de datos para obtener el contenido en el idioma seleccionado. Puedes usar el código de idioma almacenado en la URL o en una cookie para determinar qué contenido mostrar.
Consulta de la Base de Datos: Al realizar consultas a la base de datos para obtener contenido, incluye la selección del idioma en la consulta. Por ejemplo:

   $selectedLanguage = 'es'; // Obtener el idioma seleccionado del usuario

   $query = "SELECT title, content FROM articles 
                    JOIN language_content ON articles.title_multilang_id = language_content.id 
                    WHERE language_content.language_id = '$selectedLanguage'";

Visualización del Contenido: Utiliza el contenido recuperado de la base de datos en el idioma seleccionado para mostrarlo en tu página web.

Este enfoque te permite gestionar contenido en múltiples idiomas en tu base de datos y recuperar automáticamente el contenido correcto según el idioma seleccionado por el usuario. A medida que agregues más contenido o idiomas, puedes ampliar la estructura de tu base de datos y tu aplicación para acomodarlos.

Varios idiomas con .htaccess

Para gestionar las URL con fragmentos de idioma como /es/ o /en/ en el archivo .htaccess, puedes utilizar el archivo para redirigir las solicitudes a tu script PHP principal. Vamos a ver un ejemplo de cómo podrías configurar tu archivo .htaccess para lograr esto:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Redirigir todas las solicitudes a tu script PHP principal (index.php en este ejemplo)
RewriteRule ^([^/]+)/(.*)$ index.php?lang=$1&request=$2 [QSA,L]

En el archivo .htaccess hacemos lo siguiente:

RewriteEngine On habilita el motor de reescritura de URL.
RewriteCond se utiliza para excluir los archivos y directorios reales (que existen en el sistema de archivos) de la reescritura.
RewriteRule define la regla de reescritura. Toma la URL que contiene el fragmento de idioma y el resto de la URL después de este fragmento, y pasa estos valores como parámetros GET a tu script principal (en este caso, index.php). El flag [QSA] permite conservar las demás variables de consulta en la URL, y [L] indica que no se deben procesar más reglas después de esta.

Luego, en tu script PHP principal (index.php), puedes recuperar el fragmento de idioma de la variable $_GET['lang'] y utilizarlo para determinar qué contenido mostrar al usuario. Aquí hay un ejemplo simplificado:

$language = isset($_GET['lang']) ? $_GET['lang'] : 'en';

if ($language === 'es') {
    // Cargar contenido en español
} elseif ($language === 'en') {
    // Cargar contenido en inglés
} else {
    // Manejar idioma no admitido o predeterminado
}

Esta configuración en .htaccess redirigirá todas las solicitudes que contengan el fragmento de idioma (/es/, /en/, etc.) a tu script PHP principal, donde puedes tomar medidas en función del idioma seleccionado para mostrar el contenido adecuado.

Multi-idioma con Cookies, Sessiones o .htaccess ?

La elección entre usar .htaccess, cookies o variables de sesión para determinar el idioma en tu sitio web depende de tus necesidades específicas y preferencias. Cada enfoque tiene sus pros y sus contras. Veamos una descripción general de cada opción:

Web multi-idioma con .htaccess:
- Pros: Es una forma efectiva de manejar la redirección de URL basada en el idioma. Permite configurar rutas limpias y amigables para los usuarios.
- Contras: Puede requerir una configuración adicional en tu servidor web y no almacena la preferencia de idioma del usuario para futuras visitas.

Web multi-idioma con Cookies:
- Pros: Las cookies pueden almacenar la preferencia de idioma del usuario en su navegador, lo que facilita la personalización de la experiencia en futuras visitas. Es útil para usuarios que regresan.
- Contras: Los usuarios pueden deshabilitar las cookies en sus navegadores, por lo que no es 100% confiable en todos los casos. Además, las cookies solo funcionan si el usuario acepta su uso.

Web multi-idioma con Variables de Sesión:
- Pros: Las variables de sesión pueden almacenar temporalmente la preferencia de idioma del usuario durante su visita. Funcionan mientras el usuario está en el sitio web, pero no se almacenan permanentemente.
- Contras: Las variables de sesión requieren que el usuario mantenga una sesión activa en el sitio web, lo que puede no ser adecuado para todas las aplicaciones. Además, como las cookies, pueden depender de la configuración del navegador.