ウェブマスター向け公式ブログ
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Google Chrome でサイトをうまく表示する方法
2011年9月12日月曜日
Google Chrome が 2008 年 9 月にリリースされて以降、すでに多くの皆様に利用していただけるようになっておりますが、残念ながらいくつかのサイトが正しく表示されないという声がまだ聞かれます。サイトが正しく表示されないのは、もちろん Google Chrome 側の不具合が原因であることもありますが、一方でサイトがある特定のブラウザだけを対象にしている場合や Web 標準に沿わない形でサイトがデザインされていることもあります。
今までに、どうしたら Google Chrome でサイトを正しく表示させられるのか、ということに関してたくさんの質問がウェブマスターやデベロッパーのみなさんから寄せられました。今回は、このためのヒントをいくつかご紹介します。
Google Chrome を検出するためには
多くの場合、Safari と Google Chrome でサイトは同じように見えます。なぜならこれらは両方とも
WebKit
（英語）ベースのブラウザだからです。もしあなたのサイトが Safari で正しく表示されているのなら、Google Chrome でも同様に正しく表示 されるはずです。
サイトによっては Chrome が他のブラウザと混同されてしまうことも少なくありません。Safari では正しく表示されているサイトが Chrome で正しく表示されないのならば、そのサイトが Chrome のユーザー エージェント文字列を認識していない可能性があります。
Google Chrome のユーザー エージェント文字列は次のようになります。
Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/W.X.Y.Z Safari/534.24
Chrome 11 におけるユーザー エージェント文字列の変更 - Google Japan Developer Relations Blog
で紹介したように、Chrome 11 より変更になっていますので、ご注意ください。
ユーザー エージェントのタイプを検出したいのであれば、次の JavaScript が WebKit での検出に使えるでしょう。
var isWebkit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
そうではなく、もし WebKit が特定のバージョン以上であることを確認したいのならば、以下の新しい機能が使えるでしょう。
var webkitVersion =
parseFloat(navigator.userAgent.split
("AppleWebKit/")[1]) ||
undefined;
if (webkitVersion && webkitVersion > 500 ) {
// WebKitの素晴らしい機能を使う
}
Google Chrome が利用している WebKit のバージョンは Ominibox に “about:version” と入力することで得ることができます。
一般的に、WebKit や Google Chrome を検出するために "Google" や "Apple" といった文字列を navigator.vendor に加えることはお勧めしません。なぜならそうしてしまうと、他の Webkit や Chromium をベースとしたブラウザを検出できなくなってしまうからです！
WebKit の検出の詳細については、
webkit.org
（英語）をご覧ください。
その他のヒント
Google Chrome は Active X プラグインをサポートしていませんが、NPAPI プラグインはサポートしています。つまり、Google Chrome では Firefox や Safari と同じように Flash や Java といったプラグインのコンテンツを見せることができます。
もしあなたのサイト上のテキストがうまく表示されていない場合は、適切なコンテンツ タイプと文字コードの情報を HTTP レスポンス ヘッダーもしくはページの始めや セクションのなるべくトップに近いところで記載していることを確認してください。
ブロックレベル要素をインライン要素の中に書かないようにしましょう。
誤った例: <a><div>こちらは正しく表示されません。</div></a>
正しい例: <div><a>こちらは正しく表示されます。</a></div>
もし JavaScript が Google Chrome でうまく動かないようでしたら、Chrome に組み込まれている JavaScript ツールやデベロッパーツールを使ってデバッグを行うことができます。
あなたのページで使っている文字セットは
Official IANA LIst
に準拠している必要があります。表の preferred MIME name の名前をご使用ください。
例: ISO-8859-1, Shift_JIS
HTTP Header と Meta tag で異なる文字エンコーディングを指定している場合、Google Chrome は、HTTP Header の指定を優先的に使用します。HTTP Header と Meta tag で異なる文字エンコーディングを指定することはトラブルの原因になります。詳しい情報は、
The WHATWG Blog — The Road to HTML 5: character encoding
（英語）を御覧ください。
基本的に文字エンコーディングは UTF-8 を使用されることをお勧めしています。何らかの理由により、旧来の文字エンコーディングを使用する必要がある場合は、これまでご紹介した内容を踏まえているかをご確認の上使用してください。
この記事に関するコメントやご質問は、
ウェブマスター ヘルプフォーラム
までお寄せください。
Written by Glenn Wilson, Product Manager, Google Chrome
Original version:
Helping your site look great with Google Chrome
ラベル
+1 ボタン
2
AMP
11
API
3
App Indexing
8
CAPTCHA
1
Chrome
2
First Click Free
1
Google アシスタント
1
Google ニュース
1
Google プレイス
2
Javascript
1
Lighthouse
4
Merchant Center
8
NoHacked
4
PageSpeed Insights
1
reCAPTCHA v3
1
Search Console
101
speed
1
イベント
25
ウェブマスターガイドライン
57
ウェブマスタークイズ
2
ウェブマスターツール
83
ウェブマスターフォーラム
10
オートコンプリート
1
お知らせ
69
クロールとインデックス
75
サイトクリニック
4
サイトマップ
15
しごと検索
1
スマートフォン
11
セーフブラウジング
5
セキュリティ
18
ダイナミック レンダリング
1
データー ハイライター
2
ハッキング
19
ハングアウト
2
ビデオチュートリアル
7
フィードバックとコミュニケーション
1
プロダクトエキスパート
1
マルウェア
9
モバイル
2
モバイルサイト
54
リッチカード
2
リッチスニペット
12
リッチリザルト
4
画像
3
画像検索
2
検索エンジン最適化
13
検索結果
85
構造化データ
25
国際化
4
再審査リクエスト
9
初級者向け
160
上級者向け
203
中級者向け
206
動画
1
アーカイブ
2020
11月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2019
11月
10月
9月
8月
6月
5月
4月
3月
2月
1月
2018
12月
11月
10月
7月
6月
5月
4月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
4月
3月
2月
1月
2016
12月
11月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
5月
4月
3月
2月
1月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2009
12月
11月
10月
8月
7月
6月
4月
3月
2月
1月
2008
12月
Feed
Follow @googlewmc
