エンコードの設定とは

こんにちは。あきです。

 

今僕が住んでいる地域は例年にない大雨で水道水禁止令出されてしまいました。

もし使う場合は必ず15分沸騰させたお湯で、食器や野菜を洗ったり歯を磨けとのこと。

なのに禁止だと言われた三日後その事をすっかり忘れ焼酎(母親が送ってくれた)の水割りを普通に飲んでしまった自分….。

お腹の調子に少し不安を抱えつつ今日はページが表示されなくなった原因であるHEAD要素の変更箇所についてお届けします。

 

まずはHEAD要素を修正した理由。

それはHEAD要素に不要な情報(タグ)が多く含まれていた為です。

 

基本的にシンプルなHTMLにする事がSEOに有効だと言われていますよね。

その為、少しシンプルなソースに変更しようとHEAD要素の情報を消しまくったのが、今回の悲劇へと繋がってしまいました。

 

さてそれではどの部分を変更したのかお話しますね。

変更前のHEAD要素

<head>

    <meta name="….">
    <meta name="….">
    <meta name="….">

    <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

    <title>タイトル</title>
    <meta name="description" content="サイトの説明文">

    <!– この下に不要な情報が多く含まれていた –>

    <meta name="….">
    <meta name="….">
    <meta name="….">
    <meta name="….">

</head>

 

間違えて修正を加えてしまったソース

<head>

    <title>タイトル</title>
    <meta name="description" content="サイトの説明文">

    <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

    <meta name="….">
    <meta name="….">

</head>

 

変更内容としては青色で書かれている不必要なMETAタグをほぼ削除し、赤色で書かれている文字コードの指定を下に移動したのです。
※TITLEタグをHEADタグの直後にしたのはSEO上の効果を期待しての修正….。

さて感のいい方、HTMLに詳しい方はすでに何が問題なのか気付かれたのでは…..。

 

そうです。赤色で書かれている文字コードの宣言は日本語をHTMLソース内で使う前に宣言しなければならないのです。
(コメントなども同様)

もし宣言してないしていない場合は文字化けや今回の僕の例のようにページが真っ白で表示されてしまう可能性があります。

 

皆様の報告により、大きな自分の間違い気付き変更したソースがこちら。

変更後のソース

<head>

    <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

    <title>タイトル</title>
    <meta name="description" content="サイトの説明文">

    <meta name="….">
    <meta name="….">

</head>

この修正により自分のサイトは「赤色で書かれた文字コード(UTF-8)を使ってます!」と宣言していることになるので、訪問者のブラウザがこのページで使われている文字コードが何なのか認識できるようになったのです。

 

 

ただここでまだ一つ疑問が残ります。

なぜ修正前のページでも正常に表示された人がいたのか?

 

その理由はこれです。(IEのメニュー「表示」-「エンコード」で表示されます)

おそらく上記の青枠部分、自動選択のチェックがついていた方、またはIE以外のブラウザをお使いの方が正常に表示されたのでは..

MTで使われるデフォルト文字コードは上記にチェックが付いているUnicode(UTF-8)という文字コードです。

 

この文字コードは上記の青枠の様に自動選択のチェックがなく、HEAD要素で文字コードの宣言が正常に行われてないと、正常にページが表示されないのです。(他の文字コードはおそらく文字化けだけですむのですが。)

 

もしIEをお使いの方でこのチェックがついてない場合は、なるべくつけておく事をお勧めします。

文字化けや真っ白なページが表示されるのを極力防止できると思うので。

 

もし上記のチェックがついていても正常に表示されないページでは自分で直接文字コードを変更してみてください。

 

ちなみにこのページ上で文字コードを日本語(EUC)または日本語(シフト JIS)にするとページが真っ白になり前回の現象が再現されます。(F5キーを押すことで元に戻ります)

以上がページを表示できなかった真の原因でした。(ようやく終わった…)

エンコードの設定とは」への16件のフィードバック

  1. Rin@558110.jp ネットでアルバイト

    ☆★★━━ こんばんは、あきさん。
    Rinです。
    訪問が遅くなり、ごめんなさいね。
    きちんと表示されるようになって、良かったですね!
    前回の記事のなかでご紹介いただき、ありがとうございました。
    今後ともよろしくです!
    応援P!☆(^□^)☆ フレ~フレ~!

    返信
  2. アトム

    始めまして、アトムです。
     ランキングから来ました。ブログ興味深く拝見させていただきました。
     私はアドセンス専門にやっているので、知らない事も多くあり参考になりました。
     また遊びに来させて頂きますね!!!
     トラックバックさせていただきましたので、もし問題があれば削除しておいてください。
     それでは失礼致します。ポチ。

    返信
  3. 初心者から上級者まで グーグルアドセンスで月に2000ドル稼ぐ方法   全13話完結

    グーグルアドセンスを始める前に

     はじめまして!私のブログを訪問していただき有難うぅ

    返信
  4. 理系学生アフィリエイター☆唯’

    こんばんは、アキさん。
    理系学生アフィリエイター☆唯’です。
    むむむ、まだ無料ブログしかいじったことのない私には初めての内容です。
    最近HPにも挑戦したいと思っているので、気をつけなきゃ~。
    コンピューターって律儀すぎるから困るというか……
    頭がいいんだか悪いんだか分かりませんよね。
    応援クリックしていきますね~。

    返信
  5. 海外在住金髪アフィリエイト【リリー夫】

    あきさん、こんばんは。
    リリー夫です。
    なるほど~、よくわかりました!
    エンコード、外国住んでいると必須ですよね。
    日本では気にしたことなかったのに、、
    あ、今日の記事で、あきさんの記事をご紹介させていただきました。
    ご迷惑でしたらおっしゃってくださいね。
    では、応援ぽち!

    返信
  6. おすし

    アキさん、こんばんは。
    お世話になります、おすしです。
    具体的な説明で非常に参考になりました!
    私もやりかねませんので…。
    水道水禁止令大変ですね…
    焼酎で消毒されることはないのでしょうか…?(苦笑)
    今日もいい日になりますように”凸”

    返信
  7. 紅「白衣の天使のブログアフィリエイト教室」

    こんにちは。紅です♪
    わかりやすかったです(^^)
    失敗から学んだことを、こういうふうに共有させてもらえるのは
    ありがたいです♪
    今日はセミナーに行ってきます♪
    私のブログ、まだ更新してません(^^;>
    応援クリック注射!(σ´□`)σ・・・・…━━━━☆ズキューン!!

    返信
  8. marimama◆誰でもできる超簡単アフィリエイト2倍法則の方法◆

    あきさん♪
    こんにちは♪いつも、コメントありがとう(^^♪
    なるほど。。。
    こういう事だったんですね。
    HTMLはやっぱり、お勉強しないとだめですね。
    わからないこともあるから。。
    今日の記事はためになりましたよ!
    また、こういう記事お願いします!
    応援ポチッとな\(*⌒0⌒)bがんばっ♪

    返信
  9. 女起業家★まこ

    あきさん、こんにちは!
    まこ(仮)です(*゚ー゚)
    同じような事、しちゃったことあります(笑)
    シンプルなhtmlにしようと思って。。。
    幸い、データを取っておいていたのでよかったのですが
    とっていなかったらと思うと。
    今までちょこちょこいじっていた事が
    台無しになるところでした。
    htmlも、cssも まだまだ勉強中です。
    ご存知かもしれないですが、このサイト htmlを採点してくれます
    http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
    うちのブログは、-170点でした
    (・ω・ )
    リンクのお誘い、ありがとうございます!
    早速設置したので、確認してみてくださいね~!
    応援ポチポチ★

    返信

女起業家★まこ にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>