Sok országban az okostelefonokat gyakrabban használják az internet böngészésére, mint a számítógépeket. Ezért nagyon fontos a webhelyet mobileszközökhöz igazítani. A Search Console egy speciális eszközével megtudhatja, hogy az Ön oldalai kényelmesek-e az okostelefon-felhasználók számára.
Használata
Könnyű ellenőrizni, hogy egy oldal kényelmes-e okostelefonon történő megtekintéshez: csak adja meg teljes URL-jét. Az ellenőrzés általában kevesebb, mint egy percet vesz igénybe. Ha vannak átirányítások az oldalon, azokat is feldolgozzuk.
Az ellenőrzés eredményei alapján látni fogja, hogyan néz ki az oldal egy okostelefonon, és megtudhatja, milyen problémák merülhetnek fel annak megtekintésekor. Leggyakrabban ezek apró betűk (kis képernyőn nehezen olvashatók) és Flash elemek (a legtöbb mobileszközön nem támogatottak).
A nézetablak metacímke értéke nincs beállítva
Az oldalkód nem határozza meg a nézetablak tulajdonságát, amely megmondja a böngészőnek, hogyan kell megfelelően méretezni az oldalelemeket az eszköz képernyőméretéhez igazodva. Ahhoz, hogy webhelye megfelelően jelenjen meg a különböző méretű képernyőkön, állítsa be a nézetablakot a nézetablak metacímkéjével. Erről részletesen olvassa el útmutatónk Reagáló webtervezés alapjai részt.
A nézetablak metacímkének eszközszélesség-értékkel kell rendelkeznie
Az oldalt nem lehet különböző méretű képernyőkhöz adaptálni, mert a rögzített szélességű nézetablak tulajdonság a kódjában van megadva. Ebben az esetben adaptív kialakítást kell alkalmaznia az oldal méretezésének a képernyőhöz igazításával.
A képernyőnél szélesebb tartalom
Ez a jelentés azokat az oldalakat határozza meg, amelyek vízszintes görgetést igényelnek a szöveg és a képek megtekintéséhez. Ez a probléma akkor fordul elő, ha a CSS-stílusok dimenzióit abszolút értékre állítják, vagy olyan képeket használnak, amelyeket a böngészőablak meghatározott szélességéhez terveztek. Győződjön meg arról, hogy a CSS elemek szélessége és elhelyezkedési értéke viszonylagos, és a képek méretarányosak. Ennek részleteiről lásd oktatóanyagunk Nézetablak tartalmi méretei című szakaszát.
Túl kicsi a betűtípus
Ez a jelentés apró betűs oldalakat sorol fel, amelyek olvasásához a felhasználóknak nagyítási gesztusokat kell használniuk. A nézetablak beállítása után meg kell határoznia a betűtípusok méretét, hogy azok helyesen jelenjenek meg benne.
Az interaktív elemek túl közel vannak
Ez a jelentés azokat az oldalakat sorolja fel, ahol a navigációs elemek olyan közel vannak egymáshoz, hogy a felhasználónak nehéz megérinteni az egyiket anélkül, hogy hozzá kellene érnie másokhoz. Ügyeljen a gombok, linkek stb. Optimális méretére és a köztük lévő távolságra, hogy a mobileszközök felhasználói kényelmesen kommunikálhassanak velük.
Mi a következő lépés?
- Hogyan állapíthatjuk meg, hogy a webhely mobileszközökön történő megtekintésével milyen problémákat találtunk egy speciális jelentés segítségével (ehhez igazolnia kell a webhely tulajdonjogát a Search Console-fiókban)
- Hogyan optimalizálhatunk egy weboldalt mobil eszközökhöz (a WordPress, a Joomla! És más tartalomkezelő rendszerek oldalaihoz)
Jó napot mindenkinek, barátaimnak és a blogom vendégeinek. Ma cikkem meglehetősen rövid lesz, de ma sem veszíti el jelentőségét. Nevezetesen egy olyan dologról szeretnék neked mesélni, mint a google, amely ellenőrzi az oldal mobil verzióját. És talán nem is írtam volna ilyen nyilvánvaló cikket, ha ez a csekk nem zavart volna nemrég.
Ellenőrzés a Google-lal
Korábban az emberek nem törődtek az adaptív dizájnnal vagy a mobilal. De amikor megjelentek az információk, hogy a keresőmotorok csökkentik a keresőmotorok eredményét olyan webhelyek esetében, amelyek nem rendelkeznek mobil verzióval, az emberek megerőltették magukat (ahogy ez a HTTPS esetében is van). Az emberek azonnal elkezdtek mobilverziókat rendelni szabadúszóktól, néhány speciális plugint telepített, amelyek görbén működhetnek.
Tehát, amikor valaki adaptív elrendezést vagy mobil verziót szerzett, azonnal ellenőrizte egy speciális Google-szolgáltatásban, amely csak azt vizsgálja, hogy az elrendezés hogyan felel meg a követelményeknek. Most a felület kissé megváltozott, de a lényeg ugyanaz marad.
Ehhez a szolgáltatáshoz meg kell néznie ezt az esetet - search.google.com/search-console/mobile-barát... Ezt követően az URL-sávba írja be ennek a webhelynek a címét, és várjon. Rövid idő után megkapja az összes információt arról, hogy webhelye megfelel-e a Google mobilelrendezésre vonatkozó követelményeinek.
Nem ertem...
Tökéletesen tudom, hogy a webhelyemet átalakították, főleg, hogy csak nemrég módosítottam az elrendezést. De nemrég szórakozásból elmentem erre a szolgálatra, hogy megnézzem, mit fog mondani az öreg Gosha, és nagyon meglepődtem. Az a tény, hogy a szolgáltatás közölte velem, hogy a blogomat soha nem alakítottuk át, és mobileszközök számára rosszul olvasható.
Semmiképp sem értettem, mi a baj, ezért az interneten kezdtem keresni a megoldást. És egy oldalon találtam. Kiderült, hogy az egész a robots.txt fájlban volt. Fekete-fehéren írtam, hogy a keresőmotorok ne indexeljék a témafájljaimat, ezért nem látott mobil verziót.
Miután eltávolítottam egy sort a robotról ( Letiltja: / wp-content / themes / my theme), akkor a szolgáltatás azonnal megállapította, hogy a mobil verzióm normális. Tehát ne aggódjon, ha hirtelen ugyanaz a dolga van. Valószínűleg egyszerűen nem engedte meg, hogy a Google indexelje a témáját.
Nos, ezzel valószínűleg ma befejezem a cikkemet. Remélem hasznosnak találta. Amint látod a Google mobil verziójának ellenőrzése lehetővé teszi, hogy meggyőződjön arról, hogy a webhely megfelel-e a követelményeinek. De valójában ritkán találunk olyan weboldalt, amely nem rendelkezik saját mobil verzióval vagy válaszkészséggel. Még egy kis idő telik el, és minden újonnan létrehozott webhely automatikusan SSL tanúsítvánnyal rendelkezik.
Köszönöm, hogy elolvastál. Biztosan újra várlak rád a blogom oldalain. Addig is ajánlom, hogy olvasson el más cikkeket. Biztos vagyok benne, hogy sok érdekes dolgot talál magának. Sok szerencsét. Viszlát!
Üdvözlettel: Dmitry Kostin.
Ma már nem kell senkit meggyőzni arról, hogy szükség van a webhely mobil változatára. Végül is minden nap egyre több látogató érkezik okostelefonokról és táblagépekről. Az írás idején a blog látogatóim mintegy 20% -a mobil eszközöket használ böngészéshez. Vagyis minden ötödik telefonon vagy táblagépen keresi fel a webhelyemet.
Néhány évvel ezelőtt még nem is gondoltam ilyen látogatókra, de amikor számuk meghaladta a teljes létszám 10% -át, elkezdtem reagáló elrendezést használni. Ez lehetővé tette a tartalom megfelelő megjelenítését a mobileszközökön, és növelte mind a látogatók, mind a keresőmotorok lojalitását a webhely iránt.
A webhely mobil verziója és az érzékeny kialakítás nem ugyanaz. Ez a cikk az adaptív elrendezés tesztelésére összpontosít, amikor a webhely kialakítása a látogató eszközének képernyőfelbontásától függően változik.
Ahhoz, hogy megbizonyosodjon arról, hogy webhelye megfelelően jelenik meg a mobileszközökön, ellenőriznie kell, ehhez számos hasznos szolgáltatás és eszköz létezik.
Az érzékeny elrendezés gyors ellenőrzése
Népszerű internetes böngésző (böngésző) Mozilla Firefox beépített eszközökkel felszerelve a weboldal tervezésének mobileszközökön való megjelenésre való alkalmasságának ellenőrzésére. Használatához lépjen a "Menü" - "Fejlesztés" - "Reszponzív tervezés" menüpontra. Vagy egyszerűen nyomja meg egyszerre a billentyűzet három gombját ++ [M]
Valami ilyesmit kellene látnia:
A képernyő felbontásának és tájolásának megváltoztatásával ellenőrizheti, hogy webhelye hogyan jelenik meg a mobil látogatók számára.
Google böngésző Króm beépített támogatással is rendelkezik a webhelyterv reagáló képességének ellenőrzéséhez. Ehhez lépjen a menübe, válassza ki a "További eszközök" elemet, majd a "Fejlesztői eszközök" elemet (vagy nyomja meg a gombot ).
Ezt követően kattintson az adaptív design ikonra (vagy egyidejűleg kattintson a billentyűzetre ++ [M]):
A képernyő közepén látni fogja, hogyan jelenik meg webhelye a mobileszközök képernyőjén:
Mobil tervezés SEO tesztelése
Mint tudják, a világ két keresési vezetőjének, a Google-nek és a Yandex-nek saját szerény véleménye van arról, hogyan kell kinéznie a webhelynek a mobileszközök képernyőjén. És ha a webhelyet kényelmetlennek találják a mobil látogatók számára, akkor csökken a keresési eredmények között. Tehát SEO szempontból, ha nem akarja elveszíteni a mobil látogatókat, akkor nemcsak érzékeny kialakítással kell rendelkeznie, hanem a keresőmotoroknak is ezt kell tekintenie, vagyis alkalmasnak kell lenniük a mobil eszközökre.
Az alkalmazkodóképesség ellenőrzéséhez a Google szolgáltatás használatával lépjen a következő címre, és írja be webhelye nevét: https://www.google.com/webmasters/tools/mobile-friendly/.
Így néz ki a blogom ellenőrzésének eredménye:
A Yandex használatával ez egy kicsit bonyolultabb, az ellenőrzéshez regisztrálnia kell magát a Yandex.Webmaster szolgáltatásban, és használni kell a felület béta verzióját:
Online szolgáltatások az alkalmazkodóképesség teszteléséhez
Ezeknek a szolgáltatásoknak a fő feladata bemutatni (megmutatni), hogy webhelye hogyan fog kinézni egy mobil eszközön. Nagyon sok ilyen funkcionalitású webhely létezik. Csak néhányat adok közülük. A legtöbb esetben megismétlik a FireFox és a Chrome beépített funkcionalitását.
Google átméretező
Újrakezdem a Google-lal, amelynek saját adaptív demonstrációs szolgáltatása van: http://design.google.com/resizer/#
Quirktools képernyő
A második csinos szolgáltatás a http://quirktools.com/screenfly/. Megmutatja, hogyan nézhet ki webhelye még a tévében is!
Symby.ru alkalmazkodni
Nos, annak érdekében, hogy ne sértsem meg a "hazai gyártót", példát hozok egy másik oldalra: http://symby.ru/adaptest/. Egy oldalon egyszerre több nézetet fog látni, különböző képernyőfelbontással.
A webhely mobil változatának sebessége
Miután megbizonyosodott arról, hogy webhelye reagál-e és helyesen jelenik-e meg a legtöbb eszköz képernyőjén, ellenőrizze annak sebességét. Ismét a mobil látogatókra vonatkozik.
PageSpeed \u200b\u200bInsights
A Google, mint mindig, megelőzi a többit: https://developers.google.com/speed/pagespeed/insights/. Ez a szolgáltatás megmutatja, hogyan néz ki a webhely a telefon képernyőjén, és javaslatokat ad a kód optimalizálására a mobileszközök betöltési sebességének növelése érdekében.
WebPageTest
Befejezésül hozok egy példát egy szolgáltatásra, amely nemcsak megmutatja, hogyan néz ki a webhely egy mobil eszközön, hanem megmutatja annak munkájának sebességét is: http://www.webpagetest.org/
következtetések
Véleményem szerint a mindennapi munkában, amikor módosítják a webhelytervet, könnyebb kihasználni a Firefox és a Chrome böngészők beépített képességeit. Ezt követően természetesen ellenőriznie kell a keresőmotorok hűségét a tervezéséhez. És csak ezután használhatja az online szolgáltatásokat a lélek megnyugtatásához vagy a bemutatáshoz.
A keresőmotorok arra törekszenek, hogy javítsák a mobil eszközök (okostelefonok, táblagépek) felhasználói keresési eredményeit, ezért a különböző képernyőméretekre optimalizált webhelyek magasabbak lesznek, mint az ilyen optimalizálás nélkül. Ez magában foglalja a webhelyek mobil verzióit is.
A mobilbarát webhely jelei:
- Kényelmesen olvasható tartalom (nagyítás nélkül olvasható), nagy űrlapmezők és gombok.
- Hiányzik a "nehéz" képek, a Flash elemek és a túlzott animáció.
- Java kisalkalmazások és Silverlight bővítmények hiánya.
- A vízszintes gördítősáv hiánya.
- A webhely minimális betöltési sebessége.
- A legegyszerűbb navigáció.
- A nézetablak metacímke regisztrálva van.
Szolgáltatások a webhely "mobilitás" ellenőrzésére
A szolgáltatások működésének bemutatásához vegyük fel jó partnereim - a CONTEXT fordítóiroda - oldalát.
1. Google mobilbarát
Bármely webhelyet ellenőrizhet, ha egyszerűen beírja a címét a sorba.
A képernyőn megjeleníti, hogyan néz ki a webhely egy okostelefonon, és átfogóan értékeli a mobileszközökre történő optimalizálását.
Más szolgáltatásokkal ellentétben itt nem minden webhelyet ellenőrizhet, hanem csak a sajátját. Vagyis miután a webhely hozzá lett adva a webmester felületéhez, megerősítve a rá vonatkozó jogokat.
A szolgáltatás megjeleníti az általános minősítést, ellenőrzi a megfelelőségi pontokat és megmutatja, hogy a webhely hogyan néz ki egy okostelefonon.
3. Bing Checker
Ellenőrzik a teljes optimalizálást, valamint a 4 pontnak való megfelelést.
Azt is megjeleníti, hogy a webhely hogyan néz ki egy okostelefon képernyőjén (természetesen az operációs rendszer ablakain, míg a korábbi szolgáltatások androidos okostelefont \u003d).
4. Mobil ellenőrző a W3C-től
Az összes szolgáltatás közül a "leghosszabb". Olyan "hosszú", hogy nem vártam meg az ellenőrzés végét \u003d)
5 percet vártam, míg a többi szolgáltatás 5-20 másodperc alatt teljesült.
5. Responsinator
A többiektől eltérően nem ad értékelést, de megjeleníti az Ön webhelyének megjelenését 6 különböző eszközön, két irányban az IOS és az Android számára, ami nagyon jó.
UPD1: 2017.07.20 .:
6. Adaptivator
A szolgáltatás a cikk megjegyzésében javasolta. Én személy szerint nem használtam, de úgy tűnik, hogy nagyon jó. A lehetőségek hasonlóak a válaszadóéihoz, de van értékelés az alkalmazkodóképességi eredményről is.
UPD2: 2017.11.3:
7. iloveadaptive.com
Egy másik vadonatúj szolgáltatás, amelyet a megjegyzésekben javasolnak. Ami engem illet, kissé túlsúlyos és kivitelezhetetlen, de ez több, mint nagy lehetőségekkel megtérül. Van még OS szerinti rendezés is.
Kimenet
Kétségtelen, hogy az oldal mobileszközökhöz való adaptálása nem csupán a divat és az idő tisztelete, hanem egy modern webhely szükséges attribútuma, amely nemcsak a végfelhasználót segíti.
Ezért mindenkinek ajánlom, aki szeretne közelebb lenni az ügyfélhez, és több látogatásra / leadre lenne szüksége, hogy minél hamarabb adaptálja webhelyét. Kérdezz valamit -
Projektjei során valószínűleg már régen észrevette, hogy a mobil felhasználók száma folyamatosan növekszik. Egyeseknél ez a tendencia kevésbé észrevehető, és egyes projekteknél ez a szám évente megduplázódik vagy annál is nagyobb. A LiveInternet adatai szerint a Runet forgalmának több mint 50% -át mobil eszközök jelentik. Egyébként ennek a blognak sok olvasója már régóta panaszkodik arra, hogy nincs itt mobil verzió 🙂, amelyet természetesen a közeljövőben kijavítanak.
A mobilizáció ezen tényét a keresési platformok sem hagyhatják figyelmen kívül. Fokozatosan előnyöket nyújtanak a mobil keresésben azoknak a webhelyeknek, amelyek alkalmazkodnak a felhasználók eszközeihez.
Eleinte a Google részletekben jelölte meg a webhelyeket, hogy azokat helyesen jelenítsék meg a mobiltelefonokon.
Ezenkívül a Google létrehozott egy eszközt, amely segíti a webmestereket a mobileszközök webhely-megjelenítésének helyességének ellenőrzésében:
https://www.google.com/webmasters/tools/mobile-friendly/
Április 21-én a Google elindította a Mobilegeddon nevű új algoritmust nyugaton. A mobilbarát teszt letétele most az egyik SEO tényező, amelyet a Google figyelembe vesz. Eddig nem történt jelentős változás a SERP-ben, de most felkészülhet.
Hogyan lehet webhelyét érzékenyebbé tenni a Google számára? A titok egyszerű - feladatot kell beállítania a programozóinak / elrendezőinek. Nos, ha nincs idő várni, akkor ... használhatja a MobileCheat 🙂 alkalmazást
Valójában ez egy még nem tesztelt technológia, nem tudni, mi vezet a jövőben, ezért csak saját felelősségére és kockázatára használja. Legalább egy sor teszt elvégezhető itt.
Hogyan lehet megkerülni a Google Testet a MobileCheat segítségével
Csak két dolgot kell tennie:
1. Adja hozzá a nézetablak metacímkét a kódhoz.
2. Zárja be a robot hozzáférését a CSS fájlokhoz vagy ahhoz a mappához, ahol találhatók, a robots.txt fájlon keresztül
Például a blogom így teljesíti az alapértelmezett tesztet:
A CSS bezárásakor a kép megváltozik:
Úgy tűnik, hogy az oldalon semmi sem változott, de a teszt eredményei teljesen mások. Egyébként magam is szeretnék letiltani a CSS-t, hogy kényelmesebb legyen megtekinteni és használni 🙂 ezért ez egy teljesen indokolt séma. De csak tájékoztató jellegű.
Mit gondolsz erről? Vajon a Google egy lovag ellenszámlálásaként fogja-e számolni, vagy előre mindent átgondolt, és azonnal ellenőrizni fogja az oldalt? 🙂
