2022-03-04

Google Chromeの自動翻訳を非表示にする

HTML5に関する記事

Chrome Chromeで外国語のページにアクセスすると、ブラウザが翻訳を促すという便利な機能があります。Googleの公式見解やAWS公式サイトなど、日本語ページが存在しない時など大変お世話になっています。

しかし、明らかに日本語で構成されたページにもかかわらず、「翻訳しますか?」と表示されたのでは、アクセシビリティ上ユーザにとって好ましいことではありません。

今回はメッセージを非表示にする方法と、WEBページにおける言語の取り扱いについて調べてみました。

実際の表示と非表示にする方法

実際には下記のように表示されます。

GoogleChrome翻訳メッセージ

結論から言うと、HTML側で言語指定することで表示を回避できます。タグにlang=""属性を指定することで、ブラウザにページで指定している言語を伝えます。この属性を指定したタグで囲まれた部分について言語コードを指定します。例えば日本語の場合はlang="ja"、英語ページであればlang="en"と指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

ページ内の一部についても指定が可能

上記は<html>タグに対して言語属性を指定したので、ページ全体に及びます。また、ページ内の一部に対して指定を行うことも可能です。下記では日本語がベースのページですが、1部<p>タグでlang="en"を指定しています。

<p>このページのベースは日本語です。</p>
<p lang="en">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

ページの言語に合わせてコードを指定する

日本語の他、言語コードには下記などがあります。

  • 英語…en
  • 中国語…zh
  • 韓国語…ko
  • フランス語…fr
  • イタリア語…it
  • ドイツ語…de
  • ロシア語…ru etc…

ひとつの言語であっても国や地域で違いがある場合にはサブコードを指定することもできます。下記は中文についてです。

  • 中国大陸…zh-CN
    シンガポール…zh-SG
    香港…zh-HK
    マカオ…zh-MO
    台湾…zh-TW

スポンサーリンク

言語指定をする必要性とは

そもそも言語属性を指定する意味は何でしょうか。
以前はlang属性でコンテンツの言語を判断していました。

普段、日本語を使用して生活していると意識することはありませんが、英語は単語をスペースで繋げて文章が構成されています。ブラウザは文章および単語を認識し、単語の途中で改行しないようにするなど表示を行ってくれます。一方、日本語はどこで改行されても意味が通じなくなるということはないですね。

時は流れ現在(2022年3月)はどうでしょうか。
Google検索セントラルを確認すると、文章の内容やその他さまざまな要因からページにとって最良なターゲットユーザーを判断すると記載があります。つまり、lang属性では判断を行わないということです。

https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites?hl=ja
Google検索セントラル

いろいろと調査してみましたが、現時点ではそれほど重要なタグではなく、省略しても問題ないと判断しました。ただ、今回のテーマのように意図せず翻訳のメッセージが表示されてしまうなど、ユーザビリティを阻害する要因を取り除く必要がある場合などに指定すればいいと思います。

もっとも、共通ヘッダ等にひと言入れるだけなので、入れない理由はなく、今後もあえて使用していくつもりです。