Google Translate : intégrer la traduction automatique sur son site

Présentation de Google Translate

Google Translate est le service de traduction automatique de Google, disponible depuis 2006. Il prend en charge plus de 133 langues et traite des milliards de mots chaque jour grâce à son moteur de traduction neuronal (NMT).

Quand utiliser Google Translate sur son site ?

• Votre audience est internationale et vous n'avez pas de versions localisées
• Vous voulez tester la demande dans une nouvelle langue avant d'investir en traduction humaine
• Site de contenu léger (blog, portfolio) où une traduction automatique suffit
• Formulaires de contact ou FAQ accessibles à tous les visiteurs

Ajouter le widget de traduction

Le Google Website Translator est la solution la plus simple — un script JavaScript qui ajoute un sélecteur de langue à votre page. Aucune clé API, aucun backend.

Intégration minimaliste

<!-- 1. Zone où apparaît le sélecteur de langue -->
<div id="google_translate_element"></div>

<!-- 2. Initialisation du widget -->
<script type="text/javascript">
function googleTranslateElementInit() {
    new google.translate.TranslateElement(
        {
            pageLanguage: 'fr',         // langue d'origine
            includedLanguages: 'en,es,de,it,pt,ar,zh-CN,ja',  // langues proposées (vide = toutes)
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false
        },
        'google_translate_element'
    );
}
</script>

<!-- 3. Script Google (à placer en fin de body) -->
<script type="text/javascript"
    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

Options du constructeur TranslateElement

Masquer la barre Google Translate (CSS)

/* Masquer la barre d'info "Translated by Google" */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0 !important;
}

/* Personnaliser le sélecteur */
#google_translate_element select {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.9rem;
}

API Cloud Translation

Pour un contrôle précis sur les traductions (textes ciblés, stockage en base, traduction à la demande), l'API Cloud Translation de Google est la solution professionnelle. Elle est payante mais très performante avec le modèle NMT (neuronal).

Tarifs (2024)

Activer l'API et obtenir une clé

1. Créer un projet sur console.cloud.google.com
2. Activer "Cloud Translation API"
3. Créer des identifiants → Clé API
4. Restreindre la clé API (référrers HTTP, adresses IP serveur)

Important : Ne jamais exposer la clé API côté client (JavaScript).
Toujours appeler l'API depuis le serveur (PHP, Node.js, etc.)

Appel REST basique

GET https://translation.googleapis.com/language/translate/v2
    ?q=Bonjour+le+monde
    &target=en
    &key=VOTRE_CLE_API

Réponse JSON :
{
    "data": {
        "translations": [
            {
                "translatedText": "Hello world",
                "detectedSourceLanguage": "fr"
            }
        ]
    }
}

Intégration PHP

Classe utilitaire PHP

<?php
class GoogleTranslateService
{
    private string $apiKey;
    private string $baseUrl = 'https://translation.googleapis.com/language/translate/v2';

    public function __construct(string $apiKey)
    {
        $this->apiKey = $apiKey;
    }

    /**
     * Traduit un texte vers la langue cible.
     * @throws RuntimeException si l'appel API échoue
     */
    public function translate(string $text, string $targetLang, string $sourceLang = ''): string
    {
        $params = [
            'q'      => $text,
            'target' => $targetLang,
            'key'    => $this->apiKey,
            'format' => 'text',
        ];
        if ($sourceLang !== '') {
            $params['source'] = $sourceLang;
        }

        $url  = $this->baseUrl . '?' . http_build_query($params);
        $resp = @file_get_contents($url);

        if ($resp === false) {
            throw new RuntimeException('Erreur lors de l\'appel à Cloud Translation API');
        }

        $data = json_decode($resp, true);
        return $data['data']['translations'][0]['translatedText'] ?? '';
    }

    /**
     * Détecte la langue d'un texte.
     */
    public function detect(string $text): string
    {
        $url  = $this->baseUrl . '/detect?' . http_build_query([
            'q'   => $text,
            'key' => $this->apiKey,
        ]);
        $resp = @file_get_contents($url);
        $data = json_decode($resp, true);
        return $data['data']['detections'][0][0]['language'] ?? 'unknown';
    }
}

// Utilisation
$translator = new GoogleTranslateService($_ENV['GOOGLE_TRANSLATE_API_KEY']);
echo $translator->translate('Bonjour le monde', 'en');  // "Hello world"
echo $translator->detect('Hola mundo');                 // "es"

Mise en cache des traductions

<?php
// Évite les appels API répétés pour le même texte
function translateWithCache(
    GoogleTranslateService $translator,
    string $text,
    string $targetLang,
    string $cacheDir = '/tmp/translations'
): string {
    $cacheKey  = md5($text . $targetLang);
    $cacheFile = $cacheDir . '/' . $cacheKey . '.txt';

    if (is_readable($cacheFile)) {
        return (string) file_get_contents($cacheFile);
    }

    $translated = $translator->translate($text, $targetLang);

    if (!is_dir($cacheDir)) {
        mkdir($cacheDir, 0755, true);
    }
    file_put_contents($cacheFile, $translated);

    return $translated;
}

Langues supportées et détection automatique

Google Translate supporte 133 langues (2024) avec des niveaux de qualité variables. Les grandes langues (EN, ES, FR, DE, ZH, JA, KO, AR) bénéficient du modèle neuronal complet. Les langues moins dotées en ressources utilisent des modèles phrase-par-phrase moins précis.

Codes de langue courants

Lister les langues disponibles via l'API

GET https://translation.googleapis.com/language/translate/v2/languages
    ?key=VOTRE_CLE_API
    &target=fr   // noms de langues en français

Réponse :
{
    "data": {
        "languages": [
            { "language": "af", "name": "Afrikaans" },
            { "language": "ar", "name": "Arabe" },
            ...
        ]
    }
}

Accessibilité et bonnes pratiques

Attribut lang HTML

<!-- Toujours déclarer la langue de la page -->
<html lang="fr">

<!-- Signaler qu'une section est dans une autre langue -->
<blockquote lang="en">
    "The best way to predict the future is to create it."
</blockquote>

Indiquer clairement la traduction automatique

<!-- Ajouter un bandeau d'avertissement -->
<div class="alert alert-info" role="alert">
    <strong>Traduction automatique</strong> — Cette page a été traduite
    automatiquement par Google Translate. Des inexactitudes peuvent être présentes.
</div>

Exclure des éléments de la traduction

<!-- L'attribut translate="no" empêche le widget/navigateur de traduire l'élément -->
<code translate="no">npm install @angular/core</code>
<span translate="no" class="brand">AngularForAll</span>

<!-- Même chose via classe Google Translate -->
<div class="notranslate">Code à ne pas traduire</div>

Limitations et alternatives

Limitations connues

• Qualité variable — les textes techniques, juridiques ou médicaux peuvent contenir des erreurs significatives
• Contexte perdu — la traduction est phrase à phrase, sans mémoire du contexte global du document
• SEO limité — les pages générées par le widget ne sont pas indexées par Google comme des URLs distinctes
• Widget dépendant de Google — si le service est interrompu, le sélecteur disparaît sans dégradation gracieuse
• Confidentialité — les textes traduits sont transmis aux serveurs Google

Alternatives à Google Translate

Conclusion

Google Translate offre deux niveaux d'intégration clairs : le widget gratuit pour une traduction rapide de toute la page sans backend, et l'API Cloud Translation pour des traductions ciblées, mises en cache et gérées côté serveur.

• 🆓 Widget — idéal pour un blog ou site vitrine, sans infrastructure
• 🔑 API + PHP — pour des apps web qui ont besoin de traduire du contenu dynamique
• 🚫 translate="no" — protégez vos blocs de code et noms propres
• ♿ Accessibilité — signalez toujours la traduction automatique à vos visiteurs
• 📊 SEO — préférez des pages localisées statiques pour indexer plusieurs langues