Google翻訳ツールでサイトを多言語対応にする

先日サイトにGoole翻訳のためのボタン ( Google翻訳ツール ) を追加しました。
備忘録兼ねて手順を書いておきます。
Googleアナリティクスでの追跡方法や一部コンテンツを翻訳対象外にする方法についても記載しました。

はじめに

昨年 ( 2016年) 11月に Google 翻訳がアップデートされて、ニューラルネットワークを利用した翻訳 (GNMT : Google Neural Machine Translation ) になり、翻訳精度が向上したと話題になりました。

Google 翻訳 を利用している方は多いと思いますが、Webサイトに翻訳ツールを埋め込む事も可能です。
GNMT になって変換精度が上がった事で、機械翻訳でのコンテンツ配信でも意味が通じる場合は多くなってきたのではないでしょうか。

先日当サイトにも翻訳ツールを追加したので、備忘録兼ねて手順を書いておきます。

※ちなみに多言語(日/英)対応自体は以前に実施済みだったり...
※海外からも技術記事の閲覧があったりする。
※一部記事で英訳しているものがあるが、全て英訳している余裕はない。

手順

翻訳ツールの追加

  1. ウェブサイト翻訳ツール にアクセスします。
  2. [ 今すぐウェブサイトに追加 ] ボタンをクリックします。
    今すぐウェブサイトに追加
  3. ログインしていない場合、ログイン画面が表示されるので Google アカウントでログインします。アカウントとパスワードを入力して [ 次へ ] ボタンをクリックします。
    googleアカウント ログイン
  4. ウェブサイト情報画面に遷移するので [ ウェブサイトのURL ]、及び、[ ウェブサイトの言語 ] を設定し [ 次へ ] ボタンをクリックします。
    ウェブサイト情報画面
  5. プラグインの設定画面に遷移するので、以下を設定し [ 次へ ] ボタンをクリックします。
    翻訳する言語"すべての言語"、あるいは、"言語を指定" をクリックして翻訳対象の言語を選択します。
    記事執筆時点で100以上の言語がリストされています。
    ※下表参照
    ※ちなみに最初すべての言語で設定したが、モバイル端末で利用した場合に結構すごい事になったので、サイトにアクセスが多い国幾つかで設定し直しました。
    表示モード翻訳ツールの表示モードを設定します。
    "インライン"、"タブ"、"自動" を選択可能です。右側にプレビュー表示されるのでこれを見ながら好きな設定を選びましょう。
    詳細設定ユーザーの言語がページの言語と異なる場合に自動的に翻訳バナーを表示する閲覧者のブラウザの言語設定がページの言語と異なる場合にツールを表示する場合にチェックする。
    ページに複数の言語のコンテンツが含まれているページに複数の言語が含まれる場合にチェックする。
    Google アナリティクスを使用して翻訳トラフィックを追跡する。Google アナリティクスで翻訳トラフィックを追跡する場合にチェックする。
    チェックすると"アナリティクス ウェブ プロパティID"の入力欄が表示されるので、トラッキングコード中に含まれるID("UA-"から始まる)を設定して下さい。
    プラグインの設定画面
  6. プラグインの追加画面に遷移するので表示されるコードをコピーし、Webページに追記します。
    プラグインの追加画面
    ※以下コード例。
    <div id="google_translate_element"></div><script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'ja', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-xxxxxxxx-x'}, 'google_translate_element');
    }
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    

対応言語 ( 2017年6月 )

対応言語
アイスランド語 アイルランド語 アゼルバイジャン語 アフリカーンス語 アムハラ語 アラビア語 アルバニア語 アルメニア語 イタリア語 イディッシュ語 イボ語 インドネシア語 ウェールズ語 ウクライナ語 ウズベク語 ウルドゥー語 エストニア語 エスペラント語 オランダ語 カザフ語 カタロニア語 ガリシア語 カンナダ語 ギリシャ語 キルギス語 グジャラート語 クメール語 クルド語 クロアチア語 コサ語 コルシカ語 サモア語 ジャワ語 ジョージア語 ショナ語 シンド語 シンハラ語 スウェーデン語 ズールー語 スコットランド・ゲール語 スペイン語 スロバキア語 スロベニア語 スワヒリ語 スンダ語 セブアノ語 セルビア語 ソマリ語 タイ語 タジク語 タミル語 チェコ語 テルグ語 デンマーク語 ドイツ語 トルコ語 ニャンジャ語 ネパール語 ノルウェー語 ハイチ語 ハウサ語 パシュトゥー語 バスク語 ハワイ語 ハンガリー語 パンジャブ語 ビルマ語 ヒンディー語 フィリピノ語 フィンランド語 フモン語 フランス語 ブルガリア語 ベトナム語 ヘブライ語 ベラルーシ語 ペルシア語 ベンガル語 ポーランド語 ボスニア語 ポルトガル語 マオリ語 マケドニア語 マダガスカル語 マラーティー語 マラヤーラム語 マルタ語 マレー語 モンゴル語 ヨルバ語 ラオ語 ラテン語 ラトビア語 リトアニア語 ルーマニア語 ルクセンブルク語 ロシア語 英語 韓国語 西フリジア語 中国語 中国語 (繁体字) 日本語

確認

コードを追記したらページを表示して確認しましょう。

想定した位置に言語選択メニューが表示され、翻訳が行われればOKです。

その他設定

見た目

必要に応じて見た目を調整します。
以下は、表示モードが "インライン(プルダウンリストのみ)" の場合の CSS の例。

div#google_translate_element {
    clear: left;
    margin-bottom:5px;
}
div#google_translate_element * {
    font-size:large;
}

※表示モードによっては上記コードは正しく機能しない可能性があります。

※実際の表示を変更した例は当サイトの記事タイトル上にあるツールで確認できます。

コンテンツの一部を翻訳対象外にする。

Google 翻訳は便利ですが、一部のコンテンツは翻訳対象外にしたい場合もあると思います。

例えば当サイトの場合、

  • ソースコード
  • コマンド

といったものは翻訳されるとまずい結果 ( 誤った内容を提示してしまう ) を引き起こす可能性があります。

こういった場合に、これらを変換対象外とするための方法が google から提示されています。

参考 : Official Google Webmaster Central Blog: Helping you break the language barrier

一部を翻訳対象外とする方法

変換対象外としたい要素に以下の class 属性を追記すればOKです。

<span class="notranslate">翻訳対象外</span>

ページ全体を翻訳対象外とする方法

<meta name="google" value="notranslate">

あるいは

<meta name="google" content="notranslate">

※実際に上記 "翻訳対象外" が含まれるブロックに class="notranslate" 属性を記載しているので、このページを翻訳すれば対象外になる事を確認できます。

Google アナリティクスでの見え方

上記手順において "Google アナリティクスで翻訳トラフィックを追跡する" 設定がある旨記載しましたが、実際に Google アナリティクスで確認する方法に関しても簡単に示します。

翻訳トラフィックの確認

  1. Google アナリティクスにログインします。
  2. 左メニューの [ 行動 ] > [ イベント ] > [ 概要 ] をクリックします。
  3. 既に翻訳イベントが発生していれば、イベントカテゴリ="Google Website Translator" のイベントが表示されます。
    Googleアナリティクス 翻訳イベント

どの言語に翻訳されたのか?

どの言語に翻訳されたのか確認する場合、[ イベントラベル ] リンクをクリックします。

Googleアナリティクス 翻訳イベント

上図では "ko" = 韓国語への翻訳が行われた事が確認できます。

どのページが翻訳されたのか?

どのページが翻訳されたのか確認する場合、メニューから [ 行動 ] > [ イベント ] > [ ページ ] をクリックします。

Googleアナリティクス 翻訳イベント

まとめ

Webページに翻訳ツールを追加する事で、Webサイトを多言語対応させる事が可能です。
きちんと人手によって翻訳したものには叶わないでしょうが、 Google 翻訳の精度が向上している現在、利用価値は大いにある断言してよいでしょう。

簡易的な多言語対応サイトとして

Google 翻訳ツールを導入するだけで、簡易的な多言語対応サイトを構築する事も可能といえるでしょう。

※検索エンジンからインデクシングされるのは元のページなのでSEOの観点からはきちんと多言語化対応サイトを構築した方がよい。

※画像や動画等の文字、音声等は当然変換できないため、これらコンテンツも切り替えたい場合には多言語対応のCMS等で構築する必要があります。

分析に

Googleアナリティクスでイベントを追跡する事で、どういった国の方が翻訳して見ているかも確認できるので、特にグローバルに情報発信するサイトでは価値のある施策が行えるのではないかと思われます。

ちなみに、多言語対応CMSを利用したサイト構築も行っています。お気軽にお問合せ下さい。