Jak przekierować użytkowników mobilnych na swoją stronę
czy próbowałeś kiedyś wpisać adres URL m.facebook.com na pulpicie? Spróbuj, a zobaczysz, że strona wygląda dziwnie na dużym ekranie.
podobnie, spróbuj otworzyć losową lokalną stronę na telefonie komórkowym. Możesz natknąć się na niektóre witryny, które nie są zoptymalizowane pod kątem urządzeń mobilnych, a zatem rzuca cię na pierwszy rzut oka. Takie witryny mają tendencję do utraty odbiorców mobilnych na rzecz konkurentów.
Responsive Web Design
w dzisiejszych czasach wszystkie dobre platformy CMS umożliwiają tworzenie stron internetowych za pomocą responsywnego projektu, który dostosowuje się w zależności od rozmiaru ekranu.
ważne jest, aby sprawdzić, w jaki sposób Twoja witryna pojawia się na różnych urządzeniach – może to oznaczać różnicę między utrzymaniem zaangażowania użytkowników w witrynie, a ich utratą, aby nigdy nie powrócić.
ważne jest również, aby wspomnieć, że ponieważ Google przeniósł się do mobilnej pierwszej indeksacji, mobilna wersja witryny jest tym, co się liczy dla Google, co oznacza, że jest mało prawdopodobne, aby dobrze sprawdzać się w wyszukiwaniu, jeśli spowoduje to, że odwiedzający będą mieli złe wrażenia użytkownika.
strony mobilne
chociaż staje się to coraz bardziej rzadkie, niektóre firmy nadal wolą mieć oddzielną stronę internetową dla użytkowników mobilnych. Wiąże się to z wieloma potencjalnymi problemami, których można łatwo uniknąć.
sprawdź, czy Twoja witryna jest przyjazna dla urządzeń mobilnych
możesz sprawdzić, czy Twoja witryna została poprawnie skonfigurowana dla urządzeń mobilnych, uruchamiając bezpłatną recenzję WooRank.
kiedy idziesz w dół oddzielnej trasy strony mobilnej, Tjest dwie ważne rzeczy, które muszą być załatwione w celu zapewnienia doskonałego mobilnego przeglądania dla użytkowników mobilnych:
- stwórz stronę mobilną, która zapewnia doskonałe wrażenia użytkownika
- Przekieruj swoją stronę dla użytkowników mobilnych
oczywiście, jeśli masz stronę mobilną utworzoną przy użyciu narzędzi do responsywnego projektowania stron internetowych, nie musisz się martwić o przekierowanie użytkowników mobilnych.
przekierowanie witryny mobilnej
jeśli utworzysz oddzielną witrynę mobilną, ale nie skonfigurujesz jej tak, aby przekierowywała do użytkowników mobilnych we właściwy sposób, cały czas i wysiłek włożony w stworzenie witryny mobilnej pójdzie na marne.
dlatego dzisiaj omówimy różne sposoby przekierowywania użytkowników mobilnych na swoją stronę mobilną. Przekierowania mają zastosowanie tylko wtedy, gdy masz oddzielną stronę mobilną.
jak przekierować na stronę mobilną?
teraz, gdy masz zamiar dowiedzieć się, jak przekierować użytkowników mobilnych do witryny mobilnej, wyjaśnijmy, jak działa przekierowanie.
jest przeglądarka pulpitu dla użytkowników pulpitu i przeglądarek mobilnych dla użytkowników urządzeń mobilnych. Oba te typy przeglądarek wysyłają dane w formie „agenta użytkownika” do serwera www, na którym znajduje się Twoja witryna. Ten „agent użytkownika” zawiera informacje, które informują serwer WWW o typie urządzenia, w którym przeglądarka jest otwierana. Informacje te obejmują nazwę przeglądarki, wersję i inne informacje o systemie operacyjnym.
na przykład spróbuj wprowadzić następujący adres URL na smartfonie – detectmobilebrowser.com. informacje, które tam widzisz, są nieco podobne do informacji wysyłanych do serwera www ze wszystkich urządzeń mobilnych, z których uzyskuje się dostęp do witryny.
poza metodą wykrywania „User-agent” istnieje jeszcze jeden czynnik, który pomaga wykrywać użytkowników mobilnych. Tym czynnikiem jest rozdzielczość ekranu. Jednak w przypadku nowoczesnych urządzeń rozdzielczość ekranu jest wyższa dla jeszcze mniejszych ekranów smartfonów. W związku z tym czynnik user-agent jest najczęstszą metodą stosowaną do identyfikacji użytkowników mobilnych.
teraz przejdźmy do biznesu i porozmawiajmy o różnych metodach, dzięki którym możesz zastosować przekierowanie do swojej witryny dla użytkowników mobilnych.
- metoda wtyczek
- metoda Javascript
- metoda PHP
- .metoda htaccess
- nowa metoda CSS @media
metoda wtyczek
jeśli korzystasz z platformy Systemu Zarządzania Treścią (CMS), takiej jak WordPress lub Joomla, masz szczęście. Mają gotowe wtyczki, które pomagają przekierować użytkowników mobilnych na Twoją mobilną stronę internetową.
niektóre z tych wtyczek mobilnych przekierowań specyficznych dla CMS są następujące:
dla WordPress – proste mobilne przekierowanie URL, WordPress Mobile Pack
dla Joomla – proste wykrywanie mobilnych
dla Magento – przekierowania URL
dla Drupal-proste przekierowanie mobilne,mobilne przekierowanie js
jeśli Twoja strona jest utworzona w dowolnym innym CMS, spróbuj wyszukać wtyczkę Google, która pomaga w przekierowaniach mobilnych dla tego konkretnego CMS.
metoda JavaScript
za pomocą kodu JavaScript Możesz przekierować odwiedzających na Twoją stronę mobilną. Ten kod JS może wykryć rozmiar ekranu lub agenta użytkownika.
kod JS wykorzystujący rozmiar ekranu można znaleźć w poniższym artykule: jak przekierować swoją stronę do wersji mobilnej.
kod JS, który używa User-agent-ten kod w następującym artice: przekierowanie urządzeń mobilnych.
możesz zastosować oba te zestawy kodów do swojej witryny. Istnieją jednak wady obu tych metod.
w metodzie rozmiar ekranu definiujesz rozdzielczość ekranu, ale w dzisiejszych czasach mamy mniejsze ekrany urządzeń przenośnych o wyższej rozdzielczości. Może to skończyć się nieprawidłowym wykrywaniem użytkowników urządzeń mobilnych.
w metodzie User-agent trudno jest śledzić każdy nowy i nadchodzący user-agent i dodawać go do kodu JS. Istnieje wiele agentów użytkowników, a to stale się zmienia wraz z rozwojem technologii. Na przykład, spójrz na tę obszerną listę agentów użytkowników.
a największym minusem jest dla użytkowników, którzy nie mają zainstalowanego JavaScript na swoich telefonach. Chociaż większość telefonów jest wyposażona w JavaScript, niektórzy decydują się go wyłączyć. Niektóre stare modele Blackberry nie obsługują JavaScript. Aby pokonać te przeszkody, możesz użyć przekierowania po stronie serwera dla stron zakodowanych w PHP lub ASP.
metoda PHP
jeśli Twoja strona jest zakodowana w PHP, możesz użyć tej metody do przekierowania użytkowników mobilnych. Zaletą korzystania z tej metody jest to, że nie są ograniczone do przeglądarek, które działają na JavaScript. Będziesz jednak musiał wymienić wielu agentów użytkowników.
aby skrypt działał, konieczne jest rozszerzenie strony .php i Twoje konto hostingowe muszą obsługiwać PHP. Dodaj poniższy kod do sekcji
swojej witryny.
<?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"; } ?>możesz znaleźć ten kod w następującym artykule: Simple PHP Mobile Website Redirect Code.
Zastąp http://m.site.com adresem URL swojej witryny mobilnej.
metoda htaccess
inną alternatywną metodą przekierowania użytkownika mobilnego na Twoją mobilną stronę internetową, opartą na typie MIME obsługiwanym przez przeglądarkę, jest .metoda htaccess. Na przykład, jeśli typ przeglądarki obsługuje typ MIME, który zawiera WML (Wireless Markup Language), przeglądarka pochodzi z urządzenia mobilnego.
możesz umieścić kod zalecany w tym artykule zatytułowanym Redirect to a Mobile Site with .htaccess.
ale zanim wkleisz ten kod, upewnij się, że wykonałeś kopię zapasową istniejącego .plik htaccess. Instalowanie .nieprawidłowy kod htaccess może powodować problemy w Twojej witrynie. Jeśli nie jesteś pewien, jak to zrobić sam, poproś o pomoc programistę stron internetowych.
Zastąp http://m.example.comadresem URL witryny mobilnej.
nowa metoda CSS @media
CSS ma wbudowaną metodę wykrywania przeglądarek mobilnych. Następnie wyświetla style CSS na podstawie rozmiaru okna przeglądarki. Do tego nie potrzebujesz oddzielnej strony mobilnej. Na jednej stronie internetowej potrzebne są dwa arkusze stylów, pierwszy dla typu” ekran „(dla monitorów stacjonarnych) i drugi dla typu” przenośny ” (dla smartfonów).
aby zaimplementować tę metodę, należy wkleić następujący zestaw kodów do znacznika
dokumentu 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 />ten kod i wiele innych odmian znajdziesz na tej stronie zatytułowanej Media Queries for Standard Devices.
istnieje wiele wad stosowania tej metody. Wymaga dodania ogromnego zestawu kodu CSS do witryny. Nadal istnieją urządzenia, które nie obsługują „przenośnych” typów multimediów i renderują strony z ustawieniami wyświetlania „ekranu”.
tak więc istnieje wiele sposobów przekierowania użytkowników mobilnych na Twoją witrynę mobilną, jak wspomniano powyżej. Możesz umieścić wiele skryptów w sekcji head witryny, na przykład skrypt, który wykrywa rozmiar ekranu, a także agentów Użytkownika.
ale Twoja praca nie zostanie wykonana, dopóki twoje przekierowania mobilne nie będą dobrze działać również dla botów wyszukiwarek. Zwłaszcza w przypadku Google istnieją pewne konfiguracje, które musisz zrobić, aby odróżnić adres URL komputera od adresu URL urządzenia mobilnego.
więcej informacji na blogu Google webmastercentral na temat zmian w rankingach wyników wyszukiwania smartfonów oraz informacji na temat technik przekierowywania obsługiwanych przez Google.
musisz dodać kanoniczny adres URL do swojej witryny mobilnej, aby Google zrozumiał związek między Twoim adresem URL w telefonie komórkowym a adresem URL w komputerze.
aby pomóc Googlebotowi odkryć lokalizację stron mobilnych Twojej witryny, Google zaleca, aby witryny internetowe:
Dodaj tag rel=”alternate” na stronie pulpitu, który wskazuje na odpowiedni mobilny adres URL.
Dodaj tag rel = „canonical” na stronie mobilnej, który wskazuje na odpowiedni adres URL pulpitu.
pozwala to robotom INDEKSUJĄCYM Google zrozumieć związek między dwoma adresami URL-stacjonarnymi i mobilnymi.
po umieszczeniu odpowiednich przekierowań na swojej stronie dla użytkowników mobilnych nadszedł czas, aby sprawdzić, czy przekierowania działają dobrze dla różnych urządzeń. Testowanie go ręcznie na dowolnym dostępnym urządzeniu smartphone jest jednym ze sposobów na to. Ale możesz również użyć tych mobilnych emulatorów, aby przetestować poprawne renderowanie witryny mobilnej na różnych urządzeniach mobilnych.
pamiętaj, prawidłowe użycie przekierowań mobilnych jest kluczowym krokiem w zapewnieniu, że Twoja witryna mobilna jest przyjazna dla wyszukiwarek. Jeśli Twoja strona nie zostanie przekierowana dobrze dla użytkowników mobilnych, możesz również stracić wiele cennych firm. Dlatego zarówno w przypadku SEO, jak i pozytywnych zmian współczynników konwersji, musisz podjąć natychmiastowe działania, aby przekierować swoją stronę dla użytkowników mobilnych za pomocą jednej z powyższych metod.
ten wpis na blogu został zaktualizowany dnia 15 stycznia 2020