Kuinka ohjata sivustosi mobiilikäyttäjiä
Oletko koskaan yrittänyt kirjoittaa URL-osoitetta m.facebook.com työpöydälläsikö? Kokeile sitä, ja huomaat, että sivusto näyttää oudolta isolla näytöllä.
samoin, kokeile satunnaisen paikallisen verkkosivuston avaamista matkapuhelimeesi. Saatat törmätä joitakin sivustoja, jotka eivät ole optimoitu mobiili ja siksi se heittää sinut pois ensi silmäyksellä. Tällaisilla sivustoilla on taipumus menettää mobiiliyleisönsä kilpailijoilleen.
responsiivinen Web Design
nykyään kaikki hyvät CMS-alustat mahdollistavat verkkosivujen rakentamisen responsiivisella designilla, joka mukautuu näytön koon mukaan.
on tärkeää tarkastella, miten sivustosi näkyy eri laitteissa – tämä voi tarkoittaa sitä, että voit pitää vierailijasi sitoutuneina sivustoosi ja menettää heidät, eivätkä he koskaan palaa.
on tärkeää mainita myös, että koska Google siirtyi mobile first-indeksointiin, sivustosi mobiiliversio on Googlelle se, mikä merkitsee, että se ei todennäköisesti suoriudu hyvin haussa, jos se aiheuttaa kävijöille huonon käyttökokemuksen.
mobiilisivustot
vaikka se on yhä harvinaisempaa, jotkut yritykset haluavat edelleen erillisen verkkosivuston mobiilikäyttäjille. Tämä tulee paljon mahdollisia ongelmia, jotka voidaan helposti välttää.
Tarkista, että sivustosi on mobiiliystävällinen
voit tarkistaa, että sivustosi on asennettu oikein mobiilille ajamalla ilmaisen Woorank-arvostelun.
kun siirryt erilliselle mobiilisivuston reitille, on kaksi tärkeää asiaa, jotka on hoidettava, jotta voit taata mobiilikäyttäjillesi loistavan mobiiliselauskokemuksen:
- luo mobiilisivusto, joka tarjoaa loistavan käyttäjäkokemuksen
- ohjaa sivustosi mobiilikäyttäjille
tietenkin, jos sinulla on mobiilisivusto, joka on luotu reagoivan web-suunnittelun työkaluilla, sinun ei tarvitse huolehtia mobiilikävijöiden uudelleenohjaamisesta.
mobiilisivuston uudelleenohjaaminen
jos luot erillisen mobiilisivuston, mutta et määritä sitä ohjaamaan sitä mobiilikäyttäjillesi oikealla tavalla, kaikki mobiilisivuston luomiseen käytetty aika ja vaiva menisi hukkaan.
siksi tänään keskustelemme eri tavoista, joilla voit ohjata mobiilikäyttäjiä mobiilisivustollesi. Uudelleenohjaukset ovat sovellettavissa vain, jos sinulla on erillinen mobiilisivusto.
miten ohjaan mobiilisivustolle?
nyt kun olet oppimassa, miten ohjata mobiilikäyttäjäsi mobiilisivustollesi, kerrotaan miten uudelleenohjaus toimii.
on työpöytäselain työpöydän käyttäjille ja mobiiliselaimet mobiilin käyttäjille. Molemmat selaintyypit lähettävät tietoja ”käyttäjäagentin” muodossa www-palvelimelle, jossa verkkosivustosi sijaitsee. Tämä ’käyttäjäagentti’ sisältää tietoja, jotka kertovat www-palvelimelle, millaisessa laitteessa selain avataan. Nämä tiedot sisältävät selaimen nimen, version ja muita tietoja käyttöjärjestelmästäsi.
kokeile esimerkiksi seuraavan URL-osoitteen syöttämistä älypuhelimeesi – detectmobilebrowser.com. tiedot näet siellä on hieman samanlainen kuin tiedot lähetetään web-palvelimelle kaikista mobiililaitteen, että sivusto on käytettävissä.
”user-agent” – tunnistusmenetelmän lisäksi on vielä yksi tekijä, joka auttaa havaitsemaan mobiilikäyttäjät. Tämä tekijä on näytön resoluutio. Nykyaikaisilla laitteilla Näyttötarkkuudet ovat kuitenkin suurempia vielä pienemmillä älypuhelinten näytöillä. Näin ollen käyttäjä-agentti-tekijä on yleisin tapa tunnistaa mobiilikäyttäjät.
nyt, Let ’ s come down to business and talk about the various methods which you can apply a redirect to your site for your mobile users.
- the Plugin Method
- The Javascript Method
- the PHP Method
- The .htaccess Method
- The New CSS @media Method
the Plugin Method
If you are using a Content Management System (CMS) platform such as WordPress or Joomla, you are in luck. Heillä on valmiita laajennuksia, jotka auttavat ohjaamaan mobiilikäyttäjiä mobiilisivustollesi.
jotkin näistä CMS-spesifisistä Mobile redirect-liitännäisistä ovat seuraavat:
for WordPress –Simple Mobile URL Redirect, WordPress Mobile Pack
For Joomla – Simple Mobile Detection
For Magento – URL Redirects
For Drupal – Simple Mobile Redirect,Mobile JS Redirect
if your website is created in any other CMS, try a Google search for a plugin that helps with mobile redirects for that specific CMS.
JavaScript-menetelmä
JavaScript-koodin avulla voit ohjata mobiilikävijäsi mobiilisivustollesi. Tämä JS-koodi voi joko tunnistaa näytön koon tai käyttäjäagentin.
näytön kokoa käyttävä JS-koodi löytyy seuraavasta artikkelista: näin ohjaat sivustosi sen mobiiliversioon.
JS-koodi, joka käyttää user – agent-tätä koodia seuraavassa articessa: Redirect mobile devices.
voit käyttää näitä molempia koodeja sivustoosi. Molemmissa menetelmissä on kuitenkin huonoja puolia.
näytön koko-menetelmässä määritellään näytön resoluutio, mutta nykyään meillä on pienempiä kämmentietokoneen näyttöjä suuremmalla resoluutiolla. Tämä voi päätyä mobiilikäyttäjien virheelliseen tunnistamiseen.
käyttäjäagenttimenetelmässä on vaikea pitää kirjaa jokaisesta uudesta ja tulevasta käyttäjäagentista ja lisätä ne JS-koodiin. Käyttäjäagentteja on paljon, ja tämä muuttuu jatkuvasti kehittyvien teknologioiden myötä. Esimerkiksi, katsomaan tätä laajaa luetteloa käyttäjä-agentit.
ja suurin miinuspuoli on käyttäjillä, joiden puhelimiin ei ole asennettu JavaScriptiä. Vaikka, useimmat puhelimet on varustettu JavaScript jotkut haluavat poistaa sen. Jotkin vanhat Blackberry-mallit eivät tue JavaScriptiä. Jotta voittaa nämä esteet, voit käyttää palvelinpuolen uudelleenohjaus sivustoja koodattu PHP tai ASP.
the PHP Method
If your site is coded in PHP you can use this method to redirect your mobile users. Etuna käyttää tätä menetelmää on, että et rajoitu selaimiin, jotka toimivat JavaScript. Kuitenkin, sinun täytyy luetella useita käyttäjä-agentteja.
jotta tämä skripti toimisi, sivulaajennusten on oltava .php ja hosting tilin on tuettava PHP. Lisää seuraava koodi sivustosi
osioon.
<?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"; } ?>tämän koodin löydät seuraavasta artikkelista: Simple PHP Mobile Website Redirect Code.
korvaa http://m.site.com matkapuhelinsivustosi URL-osoitteella.
The .htaccess-menetelmä
toinen vaihtoehtoinen tapa ohjata mobiilikäyttäjä mobiilisivullesi, joka perustuu MIME-tyyppiin, jota selain tukee, on the .htaccess-menetelmä. Joten esimerkiksi, jos selaintyyppi tukee MIME-tyyppiä, joka sisältää WML (Wireless Markup Language), selain on peräisin mobiililaitteesta.
voit sijoittaa tämän artikkelin suositteleman koodin otsikolla Redirect mobiilisivustolle, jolla.htaccess.
mutta ennen kuin lisäät tämän koodin, varmista, että varmuuskopioit olemassa olevan koodin .htaccess-tiedosto. Asennus .htaccess-koodi väärin voi aiheuttaa ongelmia sivustossasi. Jos et ole varma, miten tehdä se itse kysy apua web-kehittäjä.
korvaa http://m.example.com mobiilisivuston URL-osoitteella.
uudessa CSS @media-menetelmässä
CSS: ssä on sisäänrakennettu menetelmä mobiiliselainten havaitsemiseksi. Sen jälkeen se näyttää CSS-tyylejä, jotka perustuvat selainikkunan kokoon. Tätä varten et tarvitse erillistä mobiilisivustoa. Tarvitset kaksi tyylisivua yhden verkkosivun sisällä, ensimmäinen ”näytön” mediatyypille (työpöytämonitoreille) ja toinen ”kämmentietokoneen” mediatyypille (älypuhelimille).
tämän menetelmän toteuttamiseksi HTML-dokumentin
tagiin on liitettävä seuraavat koodit.
<br /> /* Smartphones (portrait and landscape) ----------- */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px)<br /> /* Styles */<br />löydät tämän koodin ja monia muita muunnelmia tältä sivulta nimeltä Media Queries for Standard Devices.
tämän menetelmän käytössä on monia varjopuolia. Se vaatii lisäämällä valtava joukko CSS-koodi sivustoon. On vielä joitakin laitteita, jotka eivät tue ’handheld’ mediatyypit ja tehdä sivuja ’näyttö’ Näytön asetukset sijaan.
näin ollen on olemassa monia tapoja ohjata mobiilikäyttäjät mobiilisivustollesi, kuten yllä on lueteltu. Voit sijoittaa useita skriptejä sivustosi pään osioon, esimerkiksi skriptin, joka tunnistaa näytön koon sekä käyttäjäagentit.
mutta työsi on tehty vasta, kun kännykkäohjaukset toimivat hyvin myös hakukoneboteissa. Erityisesti, jos kyseessä on Google,on olemassa joitakin kokoonpanoja, jotka sinun täytyy tehdä niin, että ne erottaa työpöydän URL ja mobiili URL.
Lisätietoja saat Googlen webmastercentral-blogista älypuhelinten hakutulosten rankingissa tapahtuneista muutoksista ja Googlen tukemista uudelleenohjaustekniikoista.
sinun täytyy lisätä kanoninen URL-osoite mobiilisivullesi, jotta Google ymmärtää mobiiliosoitteesi ja työpöytäosoitteesi välisen suhteen.
auttaakseen Googlebotia löytämään sivustosi mobiilisivujen sijainnin Google suosittelee, että verkkosivujen tulisi:
lisätä työpöytäsivulle rel=”alternate” – tagi, joka osoittaa vastaavan mobiilisivun.
lisää mobiilisivulle rel=”canonical” – tunniste, joka osoittaa vastaavan työpöydän URL-osoitteen.
näin Googlen telaketjut ymmärtävät kahden URL – osoitteen-työpöydän ja mobiilin-välisen suhteen.
kun olet laittanut sivustollesi oikeat uudelleenohjaukset mobiilikäyttäjillesi, on aika testata, toimivatko uudelleenohjaukset hyvin eri laitteille. Sen testaaminen manuaalisesti millä tahansa käytettävissä olevalla älypuhelimella on yksi tapa tehdä siitä. Mutta voit myös käyttää näitä mobiili emulaattorit testata oikean renderöinti mobiilisivuston eri mobiililaitteissa.
muista, että mobiiliohjausten oikea käyttö on ratkaiseva askel sen varmistamisessa, että mobiilisivusto on hakukoneystävällinen. Jos sivustoasi ei ohjata hyvin mobiilikäyttäjillesi, saatat myös menettää paljon arvokkaita yrityksiä. Näin ollen sekä SEO sekä positiivisia muutoksia tulosprosentit sinun täytyy ryhtyä välittömiin toimiin saada sivuston uudelleenohjataan matkapuhelinkäyttäjille jollakin edellä mainituista menetelmistä.
tämä blogikirjoitus päivitettiin 15. tammikuuta 2020