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 itt nincs 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 jelölést adott a webhelyeknek a részletekben, amelyeket helyesen jelenítenek meg a mobiltelefonokon.
A Google létrehozott egy eszközt is, amely segít a webmestereknek abban, hogy ellenőrizzék a mobileszközökön megjelenített webhelyek helyességét:
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 az egyik SEO tényező, amelyet a Google figyelembe vesz. Eddig nem történt jelentős változás a SERP-kben, de most felkészülhet.
Hogyan lehet egy weboldalt adaptívvá 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, így kényelmesebb megtekinteni és használni to ezért 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? 🙂
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.
- A "nehéz" képek, a Flash elemek és a túlzott animáció hiánya.
- 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 összesített pontszámot, ellenőrzi a megfelelés 6 pontját é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 a teszt 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 képességek hasonlóak a válaszadóhoz, de van egy é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 -
Eh, a Google ismét "tetszik" nekünk a szabályaival és algoritmusaival, új "migrénnel" állva elő a webmesterek számára. Ezúttal felajánljuk, hogy kipróbálunk egy új mobilbarát algoritmust, amely adaptált webhelyeket hoz fel a mobil keresésben, és csökkenti a „nem mobil” erőforrásokat.
Hogyan fog működni mindez?
Nagyon egyszerű: az összes olyan webhelyet, amelyet nem adaptáltak mobileszközökhöz (a Google szerint), a keresőmotor egyszerűen figyelmen kívül hagyja, és a mobilkeresésben az utolsó helyeken jelenik meg, és a mobil erőforrások magasabbak lesznek. Például, ha több hasonló témájú webhely létezik, akkor a táblagépen a felhasználó megtalálja azokat, amelyek adaptált kialakításúak a mobileszközökön történő megtekintéshez.
Kettős benyomásom van erről az újításról: egyrészt minden helyes, ha tableten vagy okostelefonon keresést használok, akkor a SERP-ben szeretném látni azokat a webhelyeket, amelyek helyesen viselkednek a képernyőn. Másrészt a "mobilitás" meghatározásának algoritmusa olyan furcsa, hogy elgondolkodtatja az embert az ilyen "know-how" célszerűségén. Természetesen ellenőriztem a webhelyeimet, és találtam-e furcsa, enyhén szólva is furcsa viselkedést a Google-nál az erőforrások elemzésével kapcsolatban.
Érdemes elmondani, hogy a webhelyek létrehozásakor mindig kézileg és a szolgáltatások segítségével ellenőriztem a megjelenést a különböző eszközökön, így nyugodt voltam a "mobilitás" miatt, de kiderült, hogy ez nem olyan egyszerű. Tehát a Google azt javasolja, hogy tesztelje erőforrásait egy mobilbarát teszt segítségével:
Csak írja be a webhely vagy oldal címét, és kattintson az "Elemzés" gombra. A teszten keresztül krimeo.ru krími barátom webhelyének főoldalát ellenőrizve láttam, hogy az oldalt mobileszközökre optimalizálták.
Nem meglepő, hogy a sablon reagál, és a webhely kiválóan néz ki különböző eszközökön. Aztán úgy döntöttem, hogy megnézem a webhelyemet, és mi volt a meglepetésem, amikor ez az erőforrás nem teljesítette a tesztet.
Érdekes ... ennek a blognak a sablonja is érzékeny, többször is eljutottam táblagépről és okostelefonról egyaránt ... miért nem tetszett akkor a Google?
Elkezdtem elemezni, hogy az oldalon pontosan mi válthat ki ilyen eredményt. A megoldást ott találták meg, ahol erre a legkevésbé számítottam: webhelyemen a cikkek miniatűrjei 720x350px-es téglalapban jelentek meg, és ez (a Google szerint) nem ösztönzi a webhely mobilnak tekintését. Meglepő, hogy minél nagyobb a kép (gombok), annál könnyebben tudnak ujjal ütni a mobileszközökről érkező felhasználók ... de a Google másképp gondolja.
Az is meglepő, hogy amikor okostelefonon böngészünk a webhelyen, az összes kép tökéletesen igazodik a képernyő méretéhez, és nem figyelhetők meg "torlódások". Nos, úgy döntöttem, hogy elvégzek egy kísérletet, és a képek méretét adaptívvá, azaz minél kisebb az eszköz képernyőmérete, annál kisebb a kép a webhelyen. Próbáld megfogni az egérrel a böngésző sarkát, és kicsinyíteni .. 
Most egyes webmestereknek lehet egy másik problémája: ha a Google nagy bélyegképekkel viselkedett így, akkor a cikkek illusztrációival azonos a helyzet, és ez sokkal fontosabb, mint a főoldal. Ehhez a képeket az egész webhelyen érzékenyé kell tenni, a js-szkript indításának eszközével, de ez még nem minden, a gyorsítótár mappát és a képek mentésére vonatkozó szabályt meg kell másolni a .htaccess fájlban.
A nagyméretű képeket tartalmazó cikkek nem felelnek meg a Google tesztjén, és a kisebb illusztrációkat teljes mértékben mobilra optimalizáltnak tekintik. Nem adok képernyőképeket - csak vegye el egy külön kiadvány URL-jét, és ellenőrizze, hogy van-e "mobilitás".
Miért látja a Googlebot, hogy a blog nincs mobilra optimalizálva?
Mivel a robots.txt sok felesleges korlátozást tartalmaz.
Csak egy korlátozás van az automatikusan létrehozott WordPress virtuális robots.txt fájlban:
Disallow: / wp-admin
És itt ír a Google arról, hogy a WordPress alkotói miért készítették alapértelmezés szerint a robots.txt fájlt:
Az oldalak indexelésének és megfelelő megjelenítésének biztosítása érdekében hozzáférést kell adnia a Googlebot-nak a webhelyen található JavaScript, CSS és grafikákhoz. A Googlebot-nak rendszeres felhasználóként kell látnia webhelyét. Ha a robots.txt fájl nem fér hozzá ezekhez az erőforrásokhoz, akkor a Google nem lesz képes megfelelően elemezni és indexelni a tartalmat. Ez ronthatja webhelye keresési rangsorát.
User-agent: * Disallow: / wp-admin Disallow: / wp-magában foglalja Disallow: / wp-content / plugins Host: Your_site webhelytérkép: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) Felhasználó -agent: Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /
Remélem, hogy a Google továbbfejleszti ellenőrzési algoritmusát és valós eredményeket ad, mert a táblagépeken és okostelefonokon a valós életben sok webhely nagyszerűen néz ki.
Ilyen meglepetést láthatunk egy mobilbarát algoritmus formájában 2015. április 21. óta. A Google "elront" minket)). Békében élni? Itt egy Panda az Ön számára! Kevés? Itt van egy pingvin is! Elküldés? Legyen mobilbarát!
Kimenet
Önön múlik, hogy mit kezdjen ezekkel az információkkal, váltson át adaptív tervekre vagy sem, ez minden webmester személyes kérdése, de ezek az új szabályok már életbe léptek.
Egyébként a „mobileszközökre optimalizált” nemcsak érzékeny weboldal-tervezés, hanem itt külön mobil verzió és plugin is alkalmas a WordPress számára, a lényeg az, hogy a webhely bármilyen eszközön megfelelő legyen. Ezt vegye figyelembe.
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 tervezés ikonjára (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 két világkeresési vezető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 található. 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 webhely kialakítását, 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.
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, hogy az oldalt mobilbaráttá tegyük. 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 a teljes URL-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, hogy 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 oldal kódja nem határozza meg a nézetablak tulajdonságot, amely megmondja a böngészőnek, hogyan kell megfelelően méretezni az oldalelemeket az eszköz képernyőméretének megfelelően. Ahhoz, hogy webhelye különböző képernyőméretekben megfelelően jelenjen meg, á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éjének eszközszélességgel kell rendelkeznie
Az oldalt nem lehet különféle méretű képernyőkhöz igazítani, mivel 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. A részletekről lásd a Tartalomméretek részt az oktatóanyag nézési területéhez.
Túl apró betűs
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álhatja webhelyét mobileszközökhöz (a WordPress, a Joomla! És más tartalomkezelő rendszerek oldalaihoz)
