Google翻訳でWebサイトを多言語対応する方法

2023.08.13 Google翻訳でサイト全体を多言語化

はじめに

概要

Google翻訳を使用して、ウェブサイトを複数の言語に対応させる方法について説明します。タグを追加するだけで、設定できますので非常に便利な機能です。

目的

サイト全体を翻訳
設定方法
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

サイト全体を翻訳

実装内容は以下のようになります。

セレクトボタンで言語を選択することができて、サイトを多言語化することができます。

設定方法

HTML

<div id="google_translate_element"></div>

表示したい部分に記述します。以下のスクリプトを記述することで、自動的に中身を生成します。

Javascript

<script defer type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
                pageLanguage: "ja",
                layout: google.translate.TranslateElement.InlineLayout,
            },
            "google_translate_element"
        );
    }
</script>

<script defer type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

こちらの2つのscriptタグを記述します。以上で設定は完了です。言語を絞り込む等、便利なオプションもありますので調べてみてください。

まとめ