日本語サイトなのに文字化け&「翻訳しますか?」と出てきた時の対処法

日本語サイトなのに文字化け&「このページを翻訳しますか?」と出てくる理由

お世話になります。林です。日本語サイトを見ている時にも、文字化けに出くわしたり、「このページを翻訳しませんか?」というメッセージに出くわしたりします。

そのたびに、文字化けの種類から文字コードの設定を変えてみたり、「このページを翻訳しませんか?」というメッセージを無視したりという対応をしてきましたが、考えてみればサイトを見ている人が全員インターネット玄人というわけではなく、むしろインターネット玄人は全利用者の10%にも満たないため、この問題はどうにかしなければなりません。

では、そもそもなぜこうした問題が生じるのでしょうか?

HTMLの基本的な書き方を知ることの重要性

実は、私は、自分が経営している大学受験向けの塾のサイトの実装を、当時の株主から紹介された別の業者に任せたことがあります。その結果として、上の画像のような警告メッセージが出るサイトが出来上がりました。

下記がそのサイトのサンプルソースコードなのですが、なぜこのようなことになったのか、ソースコードを見ながら、みなさんも考えてみてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>慶應・環境情報学部 | 慶應SFC小論文入試対策の毎日学習会</title>
    <meta name="description" content="サンプルテンプレート">
    <meta name="keywords" content="サンプルテンプレート">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="http://skypeeveryday.com/wp-content/themes/mainichi/css/reset.css" rel="stylesheet" type="text/css">
    <link href="http://skypeeveryday.com/wp-content/themes/mainichi/css/animate.css" rel="stylesheet" type="text/css">
    <link href="http://skypeeveryday.com/wp-content/themes/mainichi/css/common.css" rel="stylesheet" type="text/css">
    <link href="http://skypeeveryday.com/wp-content/themes/mainichi/css/jquery.bxslider.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://skypeeveryday.com/wp-content/themes/mainichi/css/category111.css">
    <link rel="stylesheet" href="http://skypeeveryday.com/wp-content/themes/mainichi/mfp.statics/mailformpro.css" type="text/css" />
    <!-- Slidebars CSS -->
  <link rel="stylesheet" href="http://skypeeveryday.com/wp-content/themes/mainichi/css/slidebars.css">
    
  <script type="text/javascript" src="http://skypeeveryday.com/wp-content/themes/mainichi/js/jquery.js"></script>
  <script type="text/javascript" src="http://skypeeveryday.com/wp-content/themes/mainichi/js/jquery.bxslider.js"></script>
  <script src="http://skypeeveryday.com/wp-content/themes/mainichi/js/respond.src.js"></script>
  <!--[if lt IE 9]>
  <script src="http://skypeeveryday.com/wp-content/themes/mainichi/js/html5shiv-printshiv.js"></script>
  <![endif]-->

どうでしょうか。ピンと来ましたでしょうか?

ページの言語設定

まず、ここで書けているのは、このページがどういった言語で書かれているかという記載です。

日本語の場合だと、

<html lang="jp">

となります。

実際、これを下記のような形で、該当のサイトのソースコードに入れたところ、「ページを翻訳しませんか?」という表示は消えます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
 <html lang="jp">
  <title>慶應・環境情報学部 | 慶應SFC小論文入試対策の毎日学習会</title>
    <meta name="description" content="サンプルテンプレート">
    <meta name="keywords" content="サンプルテンプレート">

ページの文字コードの設定

また、このページで文字化けをしていない理由を考えると、

<meta charset="UTF-8">

という記載があるからです。これは文字コードがなにであるかを記載したものです。UTF-8の他にも、Shift_JISやEUC-JPなどがあります。文字化けが起きた場合には、このあたりの記載にも問題がないかを考えてみてください。

プログラミング・ネットビジネスのご相談はこちらから

「ネットビジネスがうまくいかない……」という方は、こちらからご相談ください。
(記事執筆者が相談対応させていただきます!)