あなたのウェブサイト上のモバイルユーザーをリダイレクトする方法
URLを入力しようとしたことがありますかm.facebook.com あなたのデスクトップ上に? それを試してみると、サイトが大画面で奇妙に見えることがわかります。
同様に、あなたの携帯電話でランダムなローカルウェブサイトを開いてみてください。 あなたは、モバイル用に最適化されていないいくつかのサイトに遭遇する可能性があり、それゆえ、それは一目であなたを このようなサイトは、競合他社に自分のモバイル視聴者を失う傾向があります。
レスポンシブWebデザイン
最近、すべての優れたCMSプラットフォームでは、画面サイズに応じて適応するレスポンシブデザインを使用してウェブサイトを構築することができます。
あなたのウェブサイトが異なるデバイスでどのように表示されるかを確認することが重要です-これは、あなたの訪問者があなたのウェブサイト
Googleがモバイルファーストインデックスに移行したため、ウェブサイトのモバイル版はGoogleにカウントされるものであり、訪問者がユーザーエクスペリエンスが悪い場合に検索でうまく機能する可能性は低いことにも言及することが重要です。
モバイルサイト
それはますます珍しくなってきているが、一部の企業はまだモバイルユーザーのための別のウェブサイトを持っていることを好む。 これは簡単に回避することができます潜在的な問題の多くが付属しています。
あなたのウェブサイトは、モバイルフレンドリーであることを確認するためにチェック
あなたは無料のWooRankレビューを実行することにより、あなたのウェブサイトが正しくモバイル用に設定されていることを確認することができます。
別のモバイルウェブサイトのルートを下るとき、tあなたのモバイルユーザーのための素晴らしいモバイルブラウジング体験を確保す:
- 優れたユーザーエクスペリエンスを提供するモバイルウェブサイトを作成する
- モバイルユーザーのためにサイトをリダイレクトする
もちろん、レスポンシブwebデザインのためのツールを使用して作成されたモバイルウェブサイトがあれば、モバイル訪問者のリダイレクトを心配する必要はありません。
モバイルサイトのリダイレクト
別のモバイルサイトを作成しても、モバイルユーザーに適切な方法でリダイレクトするように設定しないと、モバイル
したがって、今日はモバイルユーザーをモバイルサイトにリダイレクトするさまざまな方法について説明します。 リダイレクトは、別のモバイルwebサイトがある場合にのみ適用されます。
モバイルサイトにリダイレクトするにはどうすればよいですか?
モバイルユーザーをモバイルウェブサイトにリダイレクトする方法を学習しようとしているので、リダイレクトの仕組みを説明しましょう。
デスクトップユーザー向けのデスクトップブラウザと、モバイルユーザー向けのモバイルブラウザがあります。 これらのブラウザの両方のタイプは、あなたのウェブサイトが存在するwebサーバーに”ユーザーエージェント”の形でデータを送信します。 この”user-agent”には、ブラウザが開かれているデバイスの種類をwebサーバーに伝える情報が含まれています。 この情報には、ブラウザの名前、バージョン、およびオペレーティングシステムに関するその他の情報が含まれます。
例えば、あなたのスマートフォンに次のURLを入力してみてください–detectmobilebrowser.comそこに表示される情報は、webサイトにアクセスしているすべてのモバイルデバイスからwebサーバーに送信される情報と多少似ています。
“ユーザーエージェント”検出方法の他に、モバイルユーザーを検出するのに役立つもう一つの要因があります。 その要因は画面の解像度です。 しかし、現代のデバイスでは、より小さなスマートフォンの画面でも画面解像度が高くなります。 したがって、ユーザーエージェント要因は、モバイルユーザーを識別するために使用される最も一般的な方法です。
さて、ビジネスに降りて、あなたのモバイルユーザーのためにあなたのサイトにリダイレクトを適用することができる様々な方法について話しましょう。
- プラグインメソッド
- Javascriptメソッド
- PHPメソッド
- 。htaccessメソッド
- 新しいCSS@mediaメソッド
プラグインメソッド
WordPressやJoomlaなどのコンテンツ管理システム(CMS)プラットフォームを使用している場合、あなたは運 彼らはあなたの携帯電話のウェブサイトにモバイルユーザーをリダイレクトするのに役立つ既製のプラグインを持っています。
これらのCMS固有のモバイルリダイレクトプラグインのいくつかは次のとおりです:
ワードプレスのための–シンプルなモバイルURLリダイレクト、WordPressのモバイルパック
Joomlaのための–シンプルなモバイル検出
Magentoのための–URLリダイレクト
Drupalのための–シンプルなモバイルリダイレクト、モバイルJSリダイレクト
あなたのウェブサイトは、他のCMSで作成されている場合は、その特定のCMSのためのモバイルリダイレクトに役立つプラグインのGoogle検索を試してみてください。
JavaScriptメソッド
JavaScriptコードを使用すると、モバイル訪問者をモバイルサイトにリダイレクトできます。 このJSコードは、画面サイズまたはユーザーエージェントのいずれかを検出できます。
画面サイズを使用するJSコードは、次の記事で見つけることができます:あなたのウェブサイトをそのモバイル版にリダイレクトする方法。
ユーザーエージェントを使用するJSコード-次のarticeでこのコード:モバイルデバイスをリダイレクトします。
あなたのサイトにこれらのコードのセットの両方を適用することができます。 しかし、これらの両方の方法には欠点があります。
画面サイズの方法では、画面の解像度を定義していますが、最近では、より高い解像度の小さなハンドヘルドデバイスの画面があります。 これは、モバイルユーザーの誤った検出に終わる可能性があります。
user-agentメソッドでは、新規および今後のすべてのuser-agentを追跡し、それらをJSコードに追加するのは難しいです。 多くのユーザーエージェントがあり、これは技術の開発とともに常に変化し続けています。 たとえば、ユーザーエージェントのこの広範なリストを見てみましょう。
そして、すべての最大の欠点は、自分の携帯電話にJavaScriptがインストールされていないユーザーのためのものです。 ほとんどの携帯電話にはJavaScriptが装備されていますが、いくつかはそれを無効にすることを選択します。 一部の古いBlackberryモデルはJavaScriptをサポートしていません。 これらの障害を克服するために、PHPまたはASPでコード化されたサイトにサーバー側のリダイレクトを使用できます。
PHPメソッド
サイトがPHPでコード化されている場合は、このメソッドを使用してモバイルユーザーをリダイレクトできます。 この方法を使用する利点は、JavaScriptで実行されるブラウザに限定されないことです。 ただし、複数のユーザーエージェントを一覧表示する必要があります。
このスクリプトを動作させるには、ページ拡張機能が必要です。phpとホスティングアカウントはPHPをサポートしている必要があります。 ウェブサイトの
セクションに次のコードを追加します。
<?php $iphone = strpos($_SERVER,"iPhone"); $android = strpos($_SERVER,"Android"); $palmpre = strpos($_SERVER,"webOS"); $berry = strpos($_SERVER,"BlackBerry"); $ipod = strpos($_SERVER,"iPod"); if ($iphone || $android || $palmpre || $ipod || $berry == true) { echo "](https://s3.amazonaws.com/woocms.woorank.com/2020/05/poor-mobile-optimization.png"; } ?>
このコードは、次の記事で見つけることができます:単純なPHPモバイルウェブサイトのリダイレクトコード。
http://m.site.comをモバイルサイトのURLに置き換えます。
htaccess Method
ブラウザがサポートするMIMEタイプに基づいて、モバイルユーザーをモバイルウェブサイトにリダイレクトする別の方法は次のとおりです。htaccessメソッド。 したがって、たとえば、ブラウザの種類がWML(Wireless Markup Language)を含むMIMEタイプをサポートしている場合、ブラウザはモバイルデバイスからのものです。
モバイルサイトへのリダイレクトというタイトルのこの記事で推奨されるコードを配置することができます。htaccess。
しかし、このコードを貼り付ける前に、既存のバックアップを確認してください。htaccessファイル。 をインストールします。htaccessコードが正しくないと、サイトに問題が発生する可能性があります。 あなたがそれを自分で行う方法がわからない場合は、web開発者の助けを求めてください。
http://m.example.comを携帯サイトのURLに置き換えます。
新しいCSS@mediaメソッド
CSSには、モバイルブラウザを検出するための組み込みメソッドがあります。 次に、ブラウザのウィンドウサイズに基づいてCSSスタイルを表示します。 このためには、別のモバイルサイトは必要ありません。 1つのwebページには、「画面」メディアタイプ(デスクトップモニター用)と「ハンドヘルド」メディアタイプ(スマートフォン用)の2つのスタイルシートが必要です。
このメソッドを実装するには、HTMLドキュメントの
タグに次のコードセットを貼り付ける必要があります。
<br /> /* Smartphones (portrait and landscape) ----------- */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px)<br /> /* Styles */<br />
このコードと他の多くのバリエーションは、標準デバイスのメディアクエリというタイトルのこのページにあります。
この方法を使用することには多くの欠点があります。 これは、サイトにCSSコードの巨大なセットを追加する必要があります。 “ハンドヘルド”メディアタイプをサポートしておらず、代わりに”画面”表示設定でページをレンダリングしないデバイスもあります。
したがって、上記のようにモバイルユーザーをモバイルサイトにリダイレクトする方法はたくさんあります。 たとえば、画面サイズやユーザーエージェントを検出するスクリプトなど、webサイトのヘッドセクションに複数のスクリプトを配置できます。
しかし、あなたの仕事は、あなたの携帯リダイレクトが検索エンジンのボットにもうまく機能するまでは行われません。 特に、Googleの場合、デスクトップURLとモバイルURLを区別するために必要な構成がいくつかあります。
詳細については、google webmastercentralのブログを読んで、スマートフォンの検索結果のランキングの変更とGoogleがサポートするリダイレクト技術に関する情報を参照してくださ
GoogleがモバイルURLとデスクトップURLの関係を理解できるように、モバイルwebサイトに正規のURLを追加する必要があります。
Googlebotがサイトのモバイルページの場所を検出できるようにするには、
デスクトップページに、対応するモバイルURLを指すrel=”alternate”タグを追加することをお勧
対応するデスクトップURLを指すrel=”canonical”タグをモバイルページに追加します。
これにより、Googleのクローラーは、デスクトップとモバイルの二つのUrlの関係を理解することができます。
モバイルユーザーのためにサイトに適切なリダイレクトを配置したら、リダイレクトが異なるデバイスでうまく機能するかどうかをテストします。 利用可能な任意のスマートフォンデバイス上で手動でそれをテストすることは、それについて行くの一つの方法です。 ただし、これらのモバイルエミュレータを使用して、さまざまなモバイルデバイスでモバイルサイトの正しいレンダリングをテス
覚えておいて、モバイルリダイレクトの正しい使用は、あなたのモバイルウェブサイトが検索エンジンに優しいことを確認する上で重要なステッ あなたのウェブサイトがあなたのモバイルユーザーのためにうまくリダイレクトされない場合、あなたはまた、貴重な企業の多くを失う可能性があります。 したがって、SEOだけでなく、コンバージョン率の肯定的な変化の両方のために、あなたのウェブサイトは、上記の方法のいずれかを使用して、モバイルユーザーこのブログ記事は2020年1月15日に更新されました