Služba Google pro kontrolu mobilní verze. Pokud Google říká „Tato stránka není optimalizována pro mobilní zařízení. Emulátory mobilních zařízení: Android Studio a Apple Xcode

Dobré odpoledne přátelé. Dnes trochu ustoupím od reklamních nástrojů a založím novou rubriku na blogu. Říká se mu „Webmastering“ a bude obsahovat užitečné materiály ke zlepšení výkonu a kvality webu, vstupních stránek. Začnu přehledem skvělého nástroje pro kontrolu mobility webových stránek.

Kontrola rychlosti webu pomocí Google

Google k tomu nabízí 2 nástroje.

Statistiky č. 1 PageSpeed

Myslím, že ho dobře znáš. Vložte odkaz na váš web, stiskněte tlačítko „Analyzovat“ a získejte výsledek ve formě dvou záložek.

Karta „Pro mobilní zařízení“ obsahuje zprávu o rychlosti načítání webu pro mobilní zařízení a - důležité! - hodnocení pohodlí web pro chytré telefony. Karta "Pro počítače" respektive stejná analýza pro pracovní plochu.

Nejlepší na tom je, že vám služba umožňuje stahování optimalizováno obrázky, CSS a skripty, které lze použít na vašem webu. Tady je takový bezplatná pomoc z google.

Jak vidíte na obrázku, mám s mobilní verzí vážné problémy. Jak se máš?

# 2 Testmysite.Withgoogle

Ve skutečnosti je to stejný nástroj, jen má krásný obal. Tuto službu jsem objevil druhý den a byl jsem podplacen formulářem pro hlášení.

Když vložíte odkaz na web a kliknete na „Zkontrolovat“, služba nabídne výsledek v podobě plnohodnotné dynamické vstupní stránky, na které vám výstižně a přesvědčivě řekne, jak je to s webem, a nabídne stáhnout celou zprávu.

Samozřejmě jsem požádal o úplnou zprávu a za pár minut jsem ji obdržel poštou. Vypadá to rozumně, několik obrazovek užitečných pokynů s odkazy na konkrétní materiály:

Je pozoruhodné, že pokud analyzujete stejný web, pak se údaje pro tyto nástroje mírně liší. Fungují však na stejné technologii.

Takto můžete během několika sekund nejen zkontrolovat mobilitu webu a zkontrolovat rychlost načítání - ale také si stáhnout plnohodnotnou zprávu s optimalizovaným obsahem. Je zdarma. Z google

Jak jste na tom s mobilitou?

Verze stránek nejsou jen možným rozmarem vývojářů, dodatečnou položkou výdajů (nebo výdělků, pokud hovoříme o dodavatelích) a projevem zájmu návštěvníků zdroje. Podle nejnovějších prohlášení zástupců společnosti Google budou stránky, které nesplňují požadavky responzivního designu, při mobilním vyhledávání pesimizovány. Domácí vyhledávač Yandex také vydal doporučení „Jak důležité je být mobilní“ a ujistil se, že z důvodu pohodlí uživatelů mobilních zařízení označí mobilní verze ve výsledcích vyhledávání a upřednostní adaptivní stránky.

Vývojáři tedy musí nutně upravit weby pro chytré telefony a zkontrolovat provozuschopnost zobrazení zdrojů. V opačném případě můžete v blízké budoucnosti očekávat ztrátu významné části provozu, a tedy potenciálních zákazníků, protože nové pracovní algoritmy od společností Google a Yandex jsou již účinné. Můžete zkontrolovat mobilní verzi webu různé způsoby: Změnou prohlížeče při přepnutí do režimu vývojáře pomocí emulátorů mobilních zařízení nebo webových služeb.

Vstřícnost webových stránek pro mobilní zařízení

Přizpůsobivost mobilním zařízením se posuzuje podle různých parametrů. Je důležité zkontrolovat mobilní verzi webu nejen z hlediska správného zobrazení, ale stojí za to zvážit další faktory:

nedostatek animace, „těžký“ design a obrázky;
rychlost načítání zdrojů (měla by být minimální);
není třeba horizontálního posouvání;
nedostatek doplňků Silverlight a Java appletů;
jednoduchá navigace na webu;
kód obsahuje metaznačku výřezu.

Pokud jsou splněny uvedené podmínky, algoritmy nejběžnějších vyhledávačů rozpoznají webovou stránku jako vhodnou pro mobilní zařízení a zvýší pozici webu ve výsledcích vyhledávání ve vztahu k zdrojům, které nejsou přizpůsobeny.

Skutečné testování na mobilních zařízeních

Nejpohodlnějším způsobem je otestovat mobilní verzi webu na skutečných smartphonech. Tato metoda umožní testování za reálných podmínek. V ideálním případě je lepší zkontrolovat webový zdroj na několika zařízeních, ale pokud rozpočet projektu nezahrnuje náklady na nákup několika smartphonů nejpopulárnějších modelů, bude stačit zařízení se systémem Android nebo Apple.

Změna velikosti okna prohlížeče

Nejjednodušší, ale ne optimální z hlediska ověřování, je změnit velikost okna prohlížeče. Pokud je stránka vytvořena pomocí technologie, můžete tímto způsobem zkontrolovat mobilní verzi webu. Ale v případech, kdy je použit samostatný design, zdroj potřebuje jasný údaj, že uživatel pochází ze smartphonu, tabletu nebo jiného mobilního zařízení. Tak, tudy umožňuje ověřit dostupnost mobilní verze webu. Je však nepravděpodobné, že bude posouzena správnost zobrazení (z technického hlediska).

Přepnutí do vývojářského režimu v prohlížeči

Nejlepší způsob, jak zkontrolovat mobilní verzi webu (Google nebo Yandex, jakož i další vyhledávače zdůrazňují přizpůsobivost v seznamu nejdůležitějších faktorů ovlivňujících hodnocení), je přepnout do vývojářského režimu v prohlížeči. Metoda funguje podobným způsobem s více prohlížeči:

Mozilla: Do vývojářského režimu se můžete přepnout výběrem možnosti „Responzivní design“ v nabídce „Vyvinout“; stisknutím kombinace Ctrl+ Shift + M; kliknutím na tlačítko „Režim responzivního designu“ na panelu nástrojů webového vývojáře;
Chrome: přepněte do mobilního režimu stisknutím klávesy F12 a poté vyberte ikonu mobilní verze (smartphone v levém horním rohu zobrazeného okna).

V Opeře můžete přepnout do vývojářského režimu a zkontrolovat mobilní verzi stisknutím Ctrl + Shift + i, ale existuje jiný způsob. Speciální verze prohlížeče - Opera Mobile Classic Emulator - vám umožňuje vyhodnotit mobilní design mnoha způsoby. Verze programu existují pro hlavní operační systémy.

Emulátory mobilních zařízení: Android Studio a Apple Xcode

Mobilní verzi webu (Yandex a Google) můžete zkontrolovat pomocí emulátorů mobilních zařízení, což jsou pro Android a Apple Android Studio nebo Apple Xcode.

Takové nástroje celkem přesně reprodukují web, jak bude vypadat na mobilních zařízeních: v programech jsou předinstalovány nejběžnější verze prohlížečů pro mobilní zařízení. Emulátory však neberou v úvahu rychlost stahování a některé další nuance, které lze pozorovat v reálných podmínkách.

Chcete -li to zkontrolovat, stačí nainstalovat jeden z výše uvedených programů do počítače a otevřít web z emulátoru.

Webové služby pro ověření mobilního designu

Je jich víc jednoduché způsoby zkontrolujte mobilní verzi webu. Online služba Responsinator vám například umožňuje vyhodnotit správnost zobrazení zdroje na mobilních zařízeních a snadnost používání webu uživatelem. Prostředek zobrazuje web tak, jak by vypadal v šesti různá zařízení založené na Androidu nebo Apple a ve více orientacích.

Kontrola optimalizace webových stránek pro mobilní zařízení

Další zdroje, které vám umožňují zkontrolovat mobilní verzi webu, navíc posoudí přizpůsobivost a nejen ukážou, jak by web vypadal na různých zařízeních. Nejuznávanějšími službami jsou Google Mobile Friendly a Yandex WebMaster (kontrola webových stránek). Bing's Checker nebo například W3C's Mobile Checker také vyhodnocuje optimalizaci webu pro mobilní zařízení.

Vše, co webmaster vyžaduje při hodnocení verze webu pro mobilní zařízení využívající online služby, je zadat adresu zdroje a počkat na dokončení analýzy. Většina výše uvedených služeb testuje optimalizace výše uvedených parametrů přívětivosti pro mobilní zařízení.

Adaptabilitu webového zdroje tedy můžete vyhodnotit několika způsoby: od testování na skutečných smartphonech, tabletech nebo jiných mobilních zařízeních nebo změny velikosti okna webového prohlížeče, kontroly v emulátorech nebo v režimu vývojáře webového prohlížeče až po použití služby od společností Yandex a Google. Je velmi snadné komplexně zkontrolovat mobilní verzi webu, a to vám umožní provést potřebné úpravy a zlepšit pozici webu ve výsledcích vyhledávání.

Zde je případ, že Google brzy (říká se - od 21. dubna 2015) začne velmi špatně hodnotit weby, které neprošly kontrolou v Google Webmasters, kvůli snadnému prohlížení na mobilních zařízeních.

Není to přesně jasné, stránka bude mít problémy pouze v případě, že se zobrazí mobilním uživatelům nebo dokonce těm, kteří se přihlásili z počítače, to znamená, že bude existovat samostatný problém?

V podstatě se to téměř nemění na webech, které mají poloviční nebo významnou část mobilního provozu. Proto je lepší test absolvovat co nejrychleji.

Řeknu vám, jak to udělat:

Před	Po

První kus, což pomohlo vyřešit problém bez dalších gest.

V souboru robots.txt přidejte řádek:
Povolit:/wp-content/themes/Template_Name/style.css

(Pokud je soubor se styly umístěn na jiné adrese, zaregistrujte jej. Pokud existuje několik souborů se styly, vložte řádky pro každý soubor.)

Druhý okamžik Pokud vidíme zprávu „ Interaktivní prvky jsou příliš blízko sebe. " Zobrazeno na google.com/webmasters/tools/mobile-friendly.
Pouze přiřadí další odrážky pro odkazy a tlačítka ve stylech požadované třídě. Získá marži nebo polstrování od 5 pixelů.
Někdy může takový problém vytvořit blok Adsense. Možná budete muset vložit větší blok nebo větší písmo.

P.S. Zpočátku očekávám, že primární jste udělali vy.

Eh, opět nás Google „potěší“ svými pravidly a algoritmy a přichází s novými „migrénami“ pro webmastery. Tentokrát se nám nabízí vyzkoušet nový algoritmus přizpůsobený pro mobily, který v mobilním vyhledávání vyvolá přizpůsobené stránky a sníží zdroje „jiných než mobilních“.

Jak to všechno bude fungovat?

Velmi jednoduché: všechny stránky, které nejsou vhodné pro mobilní zařízení (podle Googlu), budou jednoduše ignorovány vyhledávač a zobrazeny v mobilním vyhledávání na posledních místech a mobilní zdroje se zvýší. Například pokud existuje několik webů s podobným tématem, pak na tabletu uživatel najde ty, které mají přizpůsobený design pro prohlížení na mobilních zařízeních.

Moje dojmy z této inovace jsou dvojí: na jedné straně je vše správné, pokud používám vyhledávání na tabletu nebo smartphonu, pak chci v SERP vidět ty stránky, které se na obrazovce chovají správně. Na druhou stranu je algoritmus pro určování „mobility“ tak zvláštní, že člověka nutí přemýšlet o vhodnosti takového „know-how“. Samozřejmě jsem zkontroloval doporučení na svých webech a připadalo mi zvláštní, přinejmenším, chování Googlu při analýze zdrojů.

Stojí za to říci, že jsem vždy při vytváření stránek zkontroloval vzhled na různých zařízeních ručně a prostřednictvím služeb, takže jsem byl ohledně „mobility“ klidný, ale ukázalo se, že to není tak jednoduché. Google tedy doporučuje otestovat vaše zdroje pomocí testu vhodného pro mobilní zařízení:

Stačí zadat adresu webu nebo stránky a kliknout na „Analyzovat“. Při kontrole hlavní stránky webu mého krymského přítele krimeo.ru prostřednictvím testu jsem viděl, že stránka byla optimalizována pro mobilní zařízení.

Není divu, že jeho šablona reaguje a web vypadá skvěle různá zařízení... Pak jsem se rozhodl zkontrolovat své stránky a jaké bylo moje překvapení, když tento zdroj neprošel testem.

Zajímavé ... šablona tohoto blogu je také responzivní, několikrát jsem přistupoval jak z tabletu, tak ze smartphonu ... proč se to tedy Googlu nelíbilo?

Začal jsem analyzovat, co přesně na webu může vyvolat takový výsledek. Řešení bylo nalezeno tam, kde jsem to nejméně očekával: na mých stránkách se miniatury článků zobrazovaly v obdélníku 720x350px a to (podle Googlu) neznamená, že je web považován za mobilní. Překvapivě platí, že čím větší je obrázek (tlačítka), tím snáze se uživatelé z mobilních zařízení trefují prstem ... Google ale uvažuje jinak.

Je také překvapivé, že při procházení stránek na smartphonu jsou všechny obrázky perfektně přizpůsobeny velikosti obrazovky a nejsou pozorovány žádné „jamby“. Rozhodl jsem se provést experiment a velikost obrázků jsem přizpůsobil, tj. čím menší je velikost obrazovky zařízení, tím menší je obrázek na webu. Zkuste chytit roh prohlížeče myší a zmenšit ho ...
Někteří webmasteři nyní mohou mít jiný problém: pokud se Google choval takto s miniaturami velká velikost, což znamená, že s ilustracemi k článkům bude situace stejná, a to je mnohem důležitější než domovská stránka... Chcete-li to provést, musíte přizpůsobit obrázky pro celý web pomocí prostředků pro spuštění skriptu js, ale to není vše, složku mezipaměti a pravidlo pro ukládání obrázků je třeba v .htaccess duplikovat

Články, které obsahují velké obrázky, neprošly testem Google a články s menšími obrázky jsou považovány za plně „optimalizované pro mobilní zařízení“. Nebudu dávat screenshoty - vezměte URL samostatné publikace a zkontrolujte, zda je „mobilita“.

Proč jinak Googlebot vidí, že blog není optimalizován pro mobily

Protože v souboru robots.txt je spousta zbytečných omezení.

V automaticky generovaném virtuálním souboru robots.txt WordPress je pouze jedno omezení:

Zakázat: / wp-admin

A tady je to, co Google píše o tom, proč tvůrci WordPressu ve výchozím nastavení vytvořili soubor robots.txt takto:

Abyste zajistili správné indexování a vykreslování stránek, musíte Googlebotu poskytnout přístup k JavaScriptu, CSS a grafické soubory Na stránce. Googlebot by měl váš web vidět jako běžný uživatel. Pokud soubor robots.txt neumožňuje přístup k těmto zdrojům, Google nebude moci obsah řádně analyzovat a indexovat. To může snížit hodnocení vašeho webu ve vyhledávání.

User-agent: * Disallow: / wp-admin Disallow: / wp-includes Disallow: / wp-content / plugins Host: Your_site Sitemap: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) User -agent : Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /

Doufám, že Google vylepší svůj ověřovací algoritmus a poskytne skutečné výsledky, protože „v reálném životě“ na tabletech a chytrých telefonech vypadá mnoho stránek skvěle.

Takové překvapení v podobě algoritmu vhodného pro mobilní zařízení můžeme vidět od 21. dubna 2015. Google nás „rozmazluje“)). Žijete v míru? Tady je Panda pro vás! Málo? Tady je také tučňák! Poslat pryč? Přizpůsobte se mobilním telefonům!

Výstup

Rozhodněte, co s těmito informacemi dělat, zda přejít na responzivní návrhy nebo ne, je osobní záležitostí každého webmastera, ale tato nová pravidla již vstoupila v platnost.

Mimochodem, „optimalizováno pro mobilní zařízení“ není jen responzivní design stránek, hodí se zde i samostatná mobilní verze a plugin pro WordPress, hlavní je, že web na každém zařízení vypadá správně. Vezměte to v úvahu.

U vašich projektů jste si pravděpodobně už dávno všimli, že počet mobilní uživatelé neustále roste. U některých je tento trend méně patrný a u některých projektů se toto číslo každý rok zdvojnásobí nebo více. Podle údajů LiveInternet tvoří více než 50% provozu na Runetu mobilní zařízení. Mimochodem, mnoho čtenářů tohoto blogu si již delší dobu stěžuje, že zde neexistuje mobilní verze 🙂, která bude v blízké budoucnosti samozřejmě opravena.

Tuto skutečnost mobilizace nemohou ignorovat ani vyhledávací platformy. Postupně dávají výhody v mobilním vyhledávání těm stránkám, které jsou přizpůsobeny zařízením uživatelů.

Google nejprve ve fragmentech označil stránky, které by se správně zobrazovaly na mobilních telefonech.

Google také vytvořil nástroj, který pomáhá správcům webů kontrolovat správnost zobrazení webových stránek na mobilních zařízeních:
https://www.google.com/webmasters/tools/mobile-friendly/

21. dubna Google spustil nový algoritmus s názvem Mobilegeddon na Západě. Úspěšné absolvování testu Mobile Friendly je jedním z faktorů SEO, které Google zohledňuje. V SERP zatím nedošlo k žádným zásadním změnám, ale můžete se připravit.

Jak zajistíte, aby web reagoval na Google? Tajemství je jednoduché - musíte nastavit úkol pro své programátory / návrháře rozvržení. Pokud není čas čekat, pak ... můžete použít MobileCheat 🙂

Ve skutečnosti se jedná o nevyzkoušenou technologii, není známo, k čemu to v budoucnu povede, takže ji používejte pouze na vlastní nebezpečí a riziko. Zde lze provést alespoň sérii testů.

Jak obejít test Google pomocí MobileCheat

Lze dělat pouze dvě věci:

1. Přidejte do kódu metaznačku výřezu.

2. Zavřete přístup robota k souborům CSS nebo ke složce, kde jsou umístěny, pomocí souboru robots.txt

Můj blog například takto projde výchozím testem:

Když je CSS zavřený, obrázek se změní:

Zdá se, že se na webu nic nezměnilo, ale výsledky testů jsou úplně jiné. Mimochodem, na některých webech sám rád vypnu CSS, aby bylo pohodlnější je zobrazit a používat 🙂 proto je to zcela odůvodněné schéma. Ale slouží pouze pro informační účely.

Co si o tom myslíš? Bude to Google počítat jako protiútok s rytířem, nebo má vše předem promyšlené a okamžitě dá stránku na šach a mat? 🙂