Hogyan lehet átirányítani a mobil felhasználókat a webhelyén
próbálta már beírni az URL-t m.facebook.com az asztalon? Próbáld ki, és látni fogod, hogy az oldal furcsán néz ki a nagy képernyőn.
hasonlóképpen próbáljon meg megnyitni egy véletlenszerű helyi weboldalt a mobilján. Előfordulhat, hogy olyan webhelyeket talál, amelyek nem optimalizáltak a mobilra, ezért első látásra eldobja Önt. Az ilyen webhelyek hajlamosak elveszíteni mobil közönségüket versenytársaik számára.
reszponzív Web Design
manapság minden jó CMS platformok lehetővé teszik, hogy építsenek weboldalak segítségével reagáló design, amely alkalmazkodik attól függően, hogy a képernyő mérete.
fontos áttekinteni, hogy a webhely hogyan jelenik meg a különböző eszközökön – ez azt jelentheti, hogy a látogatók elkötelezettek a webhelyén, és elveszítik őket, soha nem térnek vissza.
fontos megemlíteni azt is, hogy mivel a Google átállt a mobil első indexelésre, a webhely mobil verziója számít a Google-nak, ami azt jelenti, hogy nem valószínű, hogy jól teljesít a keresésben, ha rossz felhasználói élményt okoz a látogatóknak.
mobil weboldalak
bár ez egyre ritkábbá válik, egyes vállalkozások még mindig inkább külön weboldalt szeretnének a mobil felhasználók számára. Ez sok lehetséges problémával jár, amelyek könnyen elkerülhetők.
ellenőrizze, hogy a webhely mobilbarát-e
ellenőrizheti, hogy webhelye helyesen lett-e beállítva a mobilhoz egy ingyenes WooRank áttekintés futtatásával.
ha megy le a külön mobil honlapján útvonal, tkét fontos dolog, hogy kell gondoskodni annak érdekében, hogy egy nagy mobil böngészési élményt a mobil felhasználók számára:
- hozzon létre egy mobil weboldal, amely egy nagy felhasználói élmény
- átirányítja a webhely mobil felhasználók számára
természetesen, ha van egy mobil weboldal segítségével létrehozott eszközök érzékeny web design, akkor nem kell aggódnia átirányítása a mobil látogatók.
Mobilwebhely átirányítása
ha külön mobilwebhelyet hoz létre, de nem úgy állítja be, hogy a megfelelő módon irányítsa át a mobilfelhasználókat, akkor a mobilwebhely létrehozására fordított összes idő és erőfeszítés kárba veszne.
ezért ma fogunk megvitatni a különböző módszereket, amelyek segítségével átirányíthatja a mobil felhasználók a mobil oldalon. Az átirányítások csak akkor alkalmazhatók, ha külön mobil webhelye van.
hogyan lehet átirányítani egy mobil webhelyre?
most, hogy megtanulja, hogyan irányíthatja át mobilfelhasználóit a mobil webhelyére, magyarázza el, hogyan működik az átirányítás.
van az asztali böngésző az asztali felhasználók számára, a mobil böngészők pedig a mobil felhasználók számára. Mindkét böngészőtípus felhasználói ügynök formájában küldi az adatokat a webszerverre, ahol a webhely található. Ez a ‘user-agent’ olyan információkat tartalmaz, amelyek megmondják a webszervernek, hogy milyen típusú eszközben nyitja meg a böngészőt. Ez az információ tartalmazza a böngésző nevét, verzióját és egyéb információkat az operációs rendszeréről.
például próbálja meg beírni a következő URL-t az okostelefonján – detectmobilebrowser.com. az ott látható információk némileg hasonlítanak azokhoz az információkhoz, amelyeket a webszervernek küldtek az összes mobil eszközről, amelyről a webhelye elérhető.
a ‘user-agent’ detektálási módszeren kívül van még egy tényező, amely segít a mobil felhasználók észlelésében. Ez a tényező a képernyő felbontása. A modern eszközöknél azonban a képernyőfelbontás nagyobb a még kisebb okostelefon-képernyőknél is. Ezért a felhasználói ügynök tényező a leggyakoribb módszer a mobil felhasználók azonosítására.
most térjünk rá az üzletre, és beszéljünk a különböző módszerekről, amelyekkel átirányítást alkalmazhat a webhelyére a mobil felhasználók számára.
- a Plugin módszer
- a Javascript módszer
- a PHP módszer
- a .htaccess módszer
- az új CSS @media módszer
a Plugin módszer
ha olyan tartalomkezelő rendszer (CMS) platformot használ, mint a WordPress vagy a Joomla, akkor szerencséje van. Kész bővítményeik vannak, amelyek segítenek átirányítani a mobil felhasználókat a mobil webhelyére.
néhány ilyen CMS-specifikus mobil átirányítási plugin a következő:
WordPress –Simple Mobile URL Redirect, WordPress Mobile Pack
Joomla – Simple Mobile Detection
Magento – URL átirányítások
a Drupal – Simple Mobile Redirect,Mobile JS Redirect
ha a honlap jön létre bármely más CMS, próbálja meg a Google keresés egy plugin, amely segít a mobil átirányítások az adott CMS.
a JavaScript módszer
JavaScript kód segítségével átirányíthatja mobil látogatóit a mobil webhelyére. Ez a JS kód képes felismerni a képernyő méretét vagy a felhasználói ügynököt.
a képernyőméretet használó JS-kód a következő cikkben található: hogyan lehet átirányítani webhelyét a mobil verziójára.
a JS-kód, amely a user-agent-ez a kód a következő artice: átirányítás mobil eszközök.
mindkét kódot alkalmazhatja webhelyére. Mindkét módszernek azonban vannak hátrányai.
a képernyőméret módszerben meghatározza a képernyő felbontását, de manapság kisebb kézi eszköz képernyők vannak nagyobb felbontással. Ez a mobil felhasználók helytelen észleléséhez vezethet.
a user-agent módszerben nehéz nyomon követni minden új és közelgő user-Agentet, és hozzáadni őket a JS kódhoz. Sok felhasználói ágens létezik, és ez folyamatosan változik a fejlődő technológiákkal. Például, vessen egy pillantást a felhasználói ügynökök ezen kiterjedt listájára.
és a legnagyobb hátránya az összes, a felhasználók számára, hogy nincs JavaScript telepítve a telefonra. Bár a legtöbb telefon JavaScript-vel van felszerelve, egyesek úgy döntenek, hogy letiltják. Néhány régi Blackberry modell nem támogatja a Javascriptet. Ezen akadályok leküzdése érdekében használhatja a szerver oldali átirányítást a PHP-ben vagy ASP-ben kódolt webhelyekhez.
a PHP módszer
ha webhelye PHP-ben van kódolva, akkor ezzel a módszerrel átirányíthatja mobilfelhasználóit. Ennek a módszernek az az előnye, hogy nem korlátozódik a JavaScript-en futó böngészőkre. Azonban több felhasználói ügynököt kell felsorolnia.
ahhoz, hogy ez a szkript működjön, az oldalbővítményeknek kell lenniük .a php-nek és a tárhely-fiókjának támogatnia kell a PHP-t. Adja hozzá a következő kódot a webhely
szakaszához.
<?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"; } ?>ezt a kódot a következő cikkben találja meg: egyszerű PHP mobil webhely átirányítási Kód.
cserélje le a http://m.site.com elemet a mobil webhely URL-jére.
az .htaccess módszer
egy másik alternatív módszer a mobil felhasználó átirányítására a mobil webhelyére, a böngésző által támogatott MIME típus alapján .htaccess módszer. Tehát például, ha a böngésző típusa támogatja a WML-T (Wireless Markup Language) tartalmazó MIME-típust, akkor a böngésző mobileszközről származik.
az ebben a cikkben ajánlott kódot átirányíthatja egy mobil webhelyre.htaccess.
de mielőtt beillesztené ezt a kódot, győződjön meg róla, hogy biztonsági másolatot készít a meglévőkről .htaccess fájl. Telepítése .a htaccess kód helytelenül problémákat okozhat a webhelyén. Ha nem biztos benne, hogyan kell csinálni magad, kérjen segítséget egy webfejlesztőtől.
cserélje ki a http://m.example.com a mobil webhely URL-jét.
az új CSS @media módszer
a CSS beépített módszerrel rendelkezik a mobil böngészők észlelésére. Ezután megjeleníti a CSS stílusokat a böngészőablak mérete alapján. Ehhez nincs szükség külön mobil webhelyre. Két stíluslapra van szüksége egy weboldalon belül, az első a “képernyő” médiatípushoz (asztali monitorokhoz), a másik pedig a “kézi” médiatípushoz (okostelefonokhoz).
ennek a módszernek a megvalósításához be kell illesztenie a következő kódkészletet a HTML-dokumentum
címkéjébe.
<br /> /* Smartphones (portrait and landscape) ----------- */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px)<br /> /* Styles */<br />ezt a kódot és sok más variációt ezen az oldalon találod, melynek címe: Media Queries for Standard Devices.
ennek a módszernek számos hátránya van. Ehhez hatalmas CSS-kódot kell hozzáadni a webhelyhez. Még mindig vannak olyan eszközök, amelyek nem támogatják a ‘kézi’ médiatípusokat, és az oldalakat a ‘képernyő’ megjelenítési beállításokkal renderelik.
így számos módja van a mobil felhasználók átirányítására a mobil webhelyére, a fent felsoroltak szerint. Több szkriptet is elhelyezhet a webhely fejrészében, például azt a szkriptet, amely felismeri a képernyő méretét, valamint a felhasználói ügynököket.
de a munka nem történik meg, amíg a mobil átirányítások jól működik a kereső botok is. Különösen a Google esetében vannak olyan konfigurációk, amelyeket meg kell tennie, hogy megkülönböztessék az asztali URL-t a mobil URL-től.
további információkért olvassa el a Google webmastercentral blogját az okostelefonok keresési eredményeinek rangsorolásában bekövetkezett változásokról, valamint a Google által támogatott átirányítási technikákról.
gyűjtő URL-t kell hozzáadnia mobilwebhelyéhez, hogy a Google megértse a mobil URL és az asztali URL közötti kapcsolatot.
annak érdekében, hogy a Googlebot megtalálja webhelye mobil oldalainak helyét, a Google azt javasolja, hogy a webhelyeknek:
adjon hozzá egy rel=”alternate” címkét az asztali oldalon, amely a megfelelő mobil URL-re mutat.
adjon hozzá egy rel=”canonical” címkét a mobil oldalon, amely a megfelelő asztali URL-re mutat.
ez lehetővé teszi a Google robotjainak, hogy megértsék a két URL – asztali és mobil-közötti kapcsolatot.
miután elhelyezte a megfelelő átirányításokat a webhelyén a mobil felhasználók számára, itt az ideje, hogy tesztelje, hogy az átirányítások jól működnek-e a különböző eszközökön. Az egyik módja annak, hogy manuálisan tesztelje bármely elérhető okostelefon-eszközön. De ezeket a mobil emulátorokat is használhatja a mobil webhely helyes megjelenítésének tesztelésére különböző mobil eszközökön.
ne feledje, hogy a mobil átirányítások helyes használata kritikus lépés annak biztosításában, hogy mobil webhelye keresőmotor-barát legyen. Ha webhelyét nem irányítja át jól a mobil felhasználók számára, akkor sok értékes vállalkozást is elveszíthet. Ezért mind a SEO, mind a konverziós arány pozitív változásai esetén azonnali lépéseket kell tennie annak érdekében, hogy webhelyét átirányítsa a mobil felhasználók számára a fenti módszerek egyikével.
ez a blogbejegyzés frissült 15 január 2020