サイトのモバイルバージョンのオプションの1つの実装

私はすぐに予約を入れます。私はウェブ開発の分野の私と同じ素人向けに書いています。 私は主な職業の写真家です。 同様の状況で誰かが助けてくれることを願っています。



ある時点で（率直に言って、非常に遅く、私はずっと早くそれをしなければなりませんでした）、私は自分のサイトのモバイル版を作成することに注意しました。 このタスクを実装する主な方法を分析した後（ これとこれを読んだ後）、私の場合（写真家のサイト）では、サブドメインに非常に切り捨てられた別個のバージョンを作成するのが最も簡単であるという結論に達しました。 詳細についてはあまり掘り下げませんが、私が最も時間を費やした実装の瞬間を強調するようにします。



そこで、必要なページを配置するサブドメインを作成しました。 この後、私たちが直面する主なタスク：

1. モバイルおよびデスクトップデバイスの対応するバージョンのサイトへの正しいリダイレクト
2. モバイルデバイスからフルバージョンを表示する機能
3. 縮小版のサイトでは、全ページの一部のページが欠落しているため、訪問者を失うことなくこれらのケースを処理する必要があります
4. ユーザー向けサイトのモバイルバージョンの利便性
5. あらゆる種類のseosh問題の回避-テイクの外観など

だから、順番に。

リダイレクトを伴う最初のタスクは、次のように解決されます。

htaccess フルバージョンで 、コードを追加します。

RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ((.*iPhone.*)|(.*iPod.*)|(.*BlackBerry.*)|(.*Android.*Mobile.*)|(.*Windows\ CE.*)|(.*IEMobile.*)|(.*Opera\ Mini.*)|(.*Opera\ Mobi.*)) RewriteCond %{REQUEST_FILENAME} !\.(jpg|gif|png|css|js|txt|ico|pdf|bmp|tif|mp3|wav|wma|asf|mp4|flv|mpg|avi|csv|doc|docx|xls|xlsx|ppt|pptx|zip|rar|tar|gz|dmg|iso)$ [NC] RewriteCond %{HTTP_REFERER} !^http://yourdomain\.ru(/)? RewriteCond %{QUERY_STRING} !no_redirect=true [NC] RewriteRule ^(.*)$ http://m.yourdomain.ru/$1 [L,R=302]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

htaccess モバイルバージョンでは、次のように記述します。

 RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !Windows\ NT.+Touch [NC] RewriteCond %{HTTP_USER_AGENT} Windows\ NT\ 6|Macintosh|Ubuntu|Linux\ (x86_64|i686)|CrOS [NC] RewriteCond %{QUERY_STRING} !no_redirect=true [NC] RewriteCond %{HTTP_REFERER} !^http://m\.yourdomain\.ru(/)? RewriteRule ^(.*)$ http://yourdomain.ru/$1 [L,R=302]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おおよその復号化：



モバイルバージョンにアクセスしたデスクトップユーザー（通常はそこに行くべきではありませんが、念のため）は、フルバージョン、モバイルユーザーはフルバージョンからモバイルバージョンにリダイレクトされます。



これには、次の例外が使用されます。

-URLにパラメーターno_redirect = trueがある場合（ユーザーとバージョンに関係なく）、リダイレクトは発生しません。

-ユーザーのリファラーが現在のサイトのバージョンである場合-リダイレクトは発生しません。

-モバイルユーザーがサイトのフルバージョンの特定のファイルにリクエストを行った場合-リダイレクトは発生しません。

最後の例外の理由は明らかですが、最初の2つは、アジェンダの2番目の項目（モバイルデバイスからサイトのフルバージョンを表示する機能）に関連しています。

そのため、モバイルユーザーがフルバージョンのサイトを必要としているとします。

適切なユーザーは何をしますか？ ブラウザの設定では、DAW「フルバージョン」を突くと幸せです。 しかし。 第一に、すべてのユーザーがそれほど適切なわけではなく、第二に、おそらくすべてのモバイルブラウザーにそのようなチェックマークがあるわけではありません。



したがって、リンクが必要です。 わかりました、リンクは洗い流されました。 ただし、モバイルユーザーがそれをクリックすると、すぐにモバイルバージョンのサイトに再び送信されます。 これを行うために、パラメーターno_redirect = trueの例外を作成し、それをフルバージョンへのリンクに追加しました。 モバイルユーザーはフルバージョンに切り替えました。 ただし、サイトの他のページに移動しようとすると、パラメーターno_redirect = trueがURLから消えるため、彼は再びモバイルバージョンにスローされます。 これを行うには、htaccessの2番目の例外が必要です-ユーザーがフルバージョンでリンクをクリックした場合、モバイルで彼をスローする必要はありません（逆も同様です）。 私は自分でこの方法を思いついたので、その信頼性を少し疑いますが、どのようにテストしても、すべてが正常に機能します。

第三のポイント。 モバイル版での404エラー。

このサイトのフルバージョンには、約70ページ以上あります。 しかし、モバイルの場合、最も必要なもの（約8〜10）のみを作成しました。 したがって、検索エンジンからのモバイルユーザーは404に出くわすことがよくありました。最初は、フルバージョンで必要なページと思われる情報をそこに投稿しましたが、失敗の割合は依然として非常に高かったです。 したがって、騎士の動きを作りました。モバイルサイトで404番目のエラーが発生した場合、忘れられないno_redirect = trueを追加して、同じURLを持つフルバージョンにユーザーをリダイレクトします。 方法：



htaccessモバイル版：

 ErrorDocument 404 /404.php
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このファイル内：

 <? $ref=$_SERVER['REQUEST_URI']; if ($ref!='') $ref=$ref.'?no_redirect=true'; header('Location: http://yourdomain.ru'.$ref); ?>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4番目のタスク：モバイルユーザーの利便性

よく知られたツールを使用して解決しました： developers.google.com/speed/pagespeed/insights



原則として、すべての推奨事項があります。主なものだけを強調します-モバイル版のヘッダー

 <meta name=viewport content="width=device-width, initial-scale=1">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、コンテンツの正しい配置とスケーリングに従います。



そして、まあ、彼はスタイルで追加しました：

 body{max-width:900px;margin:0 auto;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、水平方向に見たときに、サイトは広く伸びません。

そして最後に、seoshの問題

フルバージョンの各ページがモバイルのページに対応する場合、標準のようなタグがあります。

しかし、私は気にせず、モバイル版のインデックス作成をまったく禁止しました。



モバイルデバイス向けのすばらしい Google SEO ガイドがあります



私たちが興味を持っている主な点は次のとおりです。

通常のページ（http://www.example.com/page-1）で、次のコードを追加します。

 <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モバイルページ（http://m.example.com/page-1）では、次の属性を使用します。

 <link rel="canonical" href="http://www.example.com/page-1" >
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モバイルサイトのページにあり、通常のコンピューターのこのページの類似物を指すURLで、rel = "canonical"タグを必ず追加してください。

さらに、サイトマップファイルでサイトのモビリティを示します。

 <?xml version="1.0" encoding="UTF-8" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"> <url> <loc>http://m.photocrew.ru/</loc> <lastmod>2015-05-26T18:07:54+06:00</lastmod> <changefreq>never</changefreq> <priority>1.0</priority> <mobile:mobile/> </url>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、各URLに対して。



Yandexは 、m.example.com、pda.example.comなどの標準サブドメインを認識すると主張しています。

信頼性を高めるために、各モバイルページに対応するdoctypeを指定することもできます。

 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このような一連の措置の後、検索エンジンはサイトのどのバージョンがどこにあるかを適切に把握する必要があると思います。



上記のすべてが実装され、機能しています。 おそらく、横棒、未確認のケースなどがあります。 -批判やアドバイスを聞いてうれしいです。 PMでは、テスト用のリンクを送信できます。