ウェブマスター向け公式ブログ
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Google Chrome でサイトをうまく表示する方法
2011年9月11日日曜日
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
0 件のコメント :
コメントを投稿
ラベル
+1 ボタン
AMP
API
App Indexing
Google プレイス
Merchant Center
Search Console
イベント
ウェブマスターガイドライン
ウェブマスタークイズ
ウェブマスターツール
ウェブマスターフォーラム
オートコンプリート
お知らせ
クロールとインデックス
サイトクリニック
サイトマップ
スマートフォン
セーフブラウジング
セキュリティ
データー ハイライター
ハッキング
ハングアウト
ビデオチュートリアル
マルウェア
モバイルサイト
リッチスニペット
検索エンジン最適化
検索結果
構造化データ
国際化
再審査リクエスト
初級者向け
上級者向け
中級者向け
アーカイブ
2016
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月
災害時、急激なアクセス集中に備えてウェブマスターができること
ページ スピード サービス - ウェブ パフォーマンスを高速化
検索結果における PDF ファイルの取り扱いについてのヒント
Google Chrome でサイトをうまく表示する方法
ウェブマスター ツールの内部リンクと外部からのリンクの取り扱いを変更しました
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
モバイルの検索結果が
4 月 21 日
から変わります。
モバイル フレンドリーかどうかをぜひ試してみてください!
0 件のコメント :
コメントを投稿