Проверете дисплея на мобилни устройства. Ако Google изпише „Страницата не е оптимизирана за мобилни устройства

Добър ден приятели. Днес ще се отдръпна малко от рекламните инструменти и ще започна нов раздел в блога. Нарича се „Уебмастеринг“ и ще включва полезни материали за подобряване на производителността и качеството на сайта, целевите страници. И ще започна с преглед на готин инструмент за проверка на сайт за мобилност.

Проверете скоростта на уебсайта с Google

За целта Google предлага 2 инструмента.

#1 PageSpeed ​​​​Insights

Мисля, че го познаваш добре. Поставете връзка към вашия сайт, щракнете върху бутона "Анализиране" и получете резултата под формата на два раздела.

Разделът „Мобилни устройства“ включва отчет за скоростта на зареждане на сайта за мобилни устройстваи - важно! — оценка за удобствосайт за смартфони. Разделът „За компютри“, съответно, е същият анализ за работния плот.

Най-добрата част е, че услугата ви позволява да изтегляте оптимизиранизображения, css и скриптове, които да използвате на вашия сайт. Ето малко безплатна помощ от Google.

Както можете да видите от екранната снимка, имам сериозни проблеми с мобилната версия. И как вървят нещата при вас?

#2 Testmysite.Withgoogle

Всъщност това е същият инструмент, само има красива обвивка. Онзи ден открих тази услуга и бях подкупен от формуляра за докладване.

Когато поставите връзка към сайта и щракнете върху „Проверка“, услугата ще предложи резултата под формата на пълноценна динамична целева страница, на която кратко и убедително ще разкаже как вървят нещата със сайта и ще предложи за да изтеглите пълния отчет.

Разбира се, поисках пълен отчет и няколко минути по-късно го получих по пощата. Изглежда разумно, няколко екрана с полезни инструкции с връзки към конкретни материали:

Трябва да се отбележи, че ако анализирате един и същ сайт, тогава числата за тези инструменти ще варират леко. Те обаче работят по една и съща технология.

По този начин само за няколко секунди можете не само да проверите сайта за мобилност и да проверите скоростта на изтегляне, но и да изтеглите пълноценен отчет с оптимизирано съдържание. Е свободен. От Google

Е, как си с мобилността?

Днес няма нужда да убеждавате никого в необходимостта от мобилна версия на сайта. В крайна сметка всеки ден има все повече посетители от смартфони и таблети. По време на това писане около 20% от посетителите на блога ми използват мобилни устройства за сърфиране. Тоест всеки пети посещава сайта ми от телефон или таблет.

Преди няколко години дори не мислех за такива посетители, но когато броят им надхвърли 10% от общия брой, започнах да използвам адаптивно оформление. Това направи възможно правилното показване на съдържание на мобилни устройства и повишаване на лоялността както на посетителите, така и на посетителите на сайта. търсачки.

мобилна версияуебсайтът и адаптивният дизайн не са едно и също нещо. Тази статия ще се фокусира върху тестването на адаптивно оформление, когато дизайнът на сайта се променя в зависимост от разделителната способност на екрана на устройството на посетителя.

За да сте сигурни, че вашият сайт се показва правилно на мобилни устройства, трябва да проверите, като за това има няколко полезни услуги и инструменти.

Бърза проверка на адаптивното оформление

Популярен интернет браузър (браузър) Mozilla Firefoxе оборудван с вграден инструмент за проверка на дизайна на сайта за пригодност за показване на мобилни устройства. За да го използвате, отидете на "Меню" - "Разработка" - "Адаптивен дизайн". Или просто натиснете три клавиша на клавиатурата едновременно ++[M]

Трябва да видите нещо подобно:

Като промените резолюцията и ориентацията на екрана, можете да проверите как вашият сайт ще се показва на мобилните посетители.

Google браузър Chromeсъщо има вградена поддръжка за проверка на адаптивността на дизайна на сайта. За да направите това, отидете в менюто, изберете елемента "Допълнителни инструменти" и след това "инструменти за разработчици" (или натиснете клавиша ).

След това натиснете иконата за отзивчив дизайн (или едновременно натиснете на клавиатурата ++[M]):

В средата на екрана ще видите как вашият сайт ще се показва на екраните на мобилни устройства:

SEO тестване на мобилен дизайн

Както знаете, двата световни лидера в търсенето Google и Yandex имат свое нескромно мнение за това как трябва да изглежда сайтът на екраните на мобилни устройства. И ако сайтът бъде разпознат като неудобен за мобилни посетители, той пада в резултатите от търсенето. Така че от гледна точка на SEO, ако не искате да губите мобилни посетители, тогава не само трябва да имате отзивчив дизайн, но и търсачките трябва да го считат за отзивчив, т.е. удобен за мобилни устройства.

За да проверите адаптивността с Google услугаотидете на следния адрес и въведете името на вашия сайт: https://www.google.com/webmasters/tools/mobile-friendly/.

Ето как изглежда резултатът от проверката на моя блог:

С Yandex е малко по-сложно, за да проверите, трябва да се регистрирате в услугата Yandex.Webmaster и да използвате бета версията на интерфейса:

Онлайн услуги за проверка на адаптивността

Основната задача на тези услуги е да представят (покажат) как ще изглежда вашият сайт на мобилно устройство. Има много сайтове с такава функционалност. Ще цитирам само няколко от тях. В повечето случаи те дублират вградената функционалност на FireFox и Chrome.

Преоразмерител на Google

Ще започна отново с Google, който има своя собствена услуга за демонстрация на адаптивност: http://design.google.com/resizer/#

Quirktools screenfly

Втората хубава услуга е http://quirktools.com/screenfly/ . Ще покаже как вашият сайт може да изглежда дори по телевизията!

Symby.ru адаптатор

Е, за да не обидя „местния производител“, ще дам пример за друг сайт: http://symby.ru/adaptest/. На една страница ще видите няколко изгледа с различни разделителни способности на екрана наведнъж.

Скоростта на мобилната версия на сайта

След като сте се уверили, че вашият сайт е responsive и се показва правилно на екраните на повечето устройства, трябва да проверите скоростта на неговата работа. Отново по отношение на мобилните посетители.

PageSpeed ​​​​Insights

Google винаги е пред кривата: https://developers.google.com/speed/pagespeed/insights/ . Тази услуга ще покаже как изглежда сайтът на екрана на телефона и ще даде препоръки как да оптимизирате кода, за да увеличите скоростта на изтегляне на мобилни устройства.

WebPageTest

И в заключение ще дам пример за услуга, която не само ще покаже как изглежда сайтът на мобилно устройство, но и ще покаже скоростта на неговата работа: http://www.webpagetest.org/

заключения

Според мен в ежедневната работа, когато правите промени в дизайна на сайта, е по-лесно да използвате вградените функции Firefox браузърии Chrome. След това, разбира се, трябва да проверите лоялността на търсачките към вашия дизайн. И едва тогава, за да успокоите душата си или да се похвалите, можете да използвате онлайн услуги.

За вашите проекти вероятно сте забелязали отдавна, че броят на мобилните потребители непрекъснато расте. За някои тенденцията е по-малко забележима, а за някои проекти тази цифра се увеличава с 2 пъти или повече всяка година. Според LiveInternet повече от 50% от трафика в руския интернет сега идва от мобилни устройства. Между другото, много читатели на този блог отдавна се оплакват, че няма мобилна версия 🙂, което, разбира се, ще бъде коригирано в близко бъдеще.

Този факт на мобилизация не може да бъде пренебрегнат и от платформите за търсене. Постепенно те дават предимства в мобилното търсене на онези сайтове, които са адаптирани към потребителските устройства.

Първоначално Google даде знак на сайтовете във фрагменти, че ще се показват правилно на мобилни телефони.

Google също създаде инструмент, за да помогне на уеб администраторите да проверят правилното показване на сайта на мобилни устройства:
https://www.google.com/webmasters/tools/mobile-friendly/

На 21 април Google пусна нов алгоритъм, на Запад той беше наречен Mobilegeddon. Сега успешното завършване на теста Mobile Friendly е един от SEO факторите, взети под внимание от Google. Досега няма големи промени в издаването, но можете да се подготвите сега.

Как да направим уебсайт responsive според Google? Тайната е проста - трябва да зададете задача на вашите програмисти / дизайнери на оформление. Е, ако няма време за чакане, тогава ... можете да използвате MobileCheat 🙂

Всъщност това е непроверена технология, не се знае до какво ще доведе в бъдеще, така че я използвайте само на свой собствен риск и риск. Тук могат да се направят поне серия от тестове.

Как да заобиколите Google Test с MobileCheat

Трябва да направите само две неща:

1. Добавете мета тага на прозореца за изглед към кода.

2. Затворете достъпа на робота до CSS файловете или папката, където се намират чрез robots.txt

Ето как например моят блог преминава теста по подразбиране:

При затваряне на CSS картината се променя:

Изглежда, че нищо не се е променило на сайта, но резултатите от теста са напълно различни. Между другото, обичам да изключвам CSS на някои сайтове, за да ги направя по-удобни за гледане и използване 🙂 следователно напълно оправдана схема. Но е представен само за информационни цели.

Какво мислиш за това? Ще счете ли Google това за реципрочен ход на коня или ще го обмисли предварително и веднага ще матира сайта? 🙂

В настоящата статия ще говорим за това как се проверява мобилната версия на сайта, нейното удобство, четливост и правилно показване.

Проверката на вашия сайт за удобство на показване на мобилни устройства може да се провери с помощта на различни уеб услуги. По-специално, тази услугаот Google ви позволява да оцените адекватно грамотността на вашето мобилно оформление.

Наскоро Google обяви, че сайтове, които не отговарят на изискванията за мобилно оформление, ще бъдат песимизирани при търсения, извършвани с мобилни устройства. Този алгоритъм вече работи и някои сайтове, които не се интересуваха от показване на мобилни платформи, наистина бяха пропуснати от резултатите от мобилно търсене.

Ако вашият сайт е три пъти удобен за настолни платформи, трябва да проверите качеството на мобилното оформление, в противен случай ще загубите впечатляваща част от трафика (делът на мобилните платформи в търсенето нараства бързо всяка година), което означава, че вие ще загубите клиентите си. Затова трябва да адаптирате сайтовете си за мобилни устройства и да проверите правилното показване на сайтовете в мобилните браузъри.

Проверка на качеството на мобилното оформление с помощта на Google Chrome

За разработчиците Google има страхотен инструмент за мобилна симулация. Този инструмент е вграден в браузъра Google Chrome. За достъп до него натиснете F12в браузъра (превключете към режим за програмисти) и щракнете върху иконата на смартфона:

Страницата се трансформира в режим на превключване на устройства, където можете да изберете едно от популярните мобилни устройства, тип мрежа (GPRS, 2G, 3G, 4G и т.н.), да зададете строги настройки на дисплея. Това ви позволява да симулирате работата на сайта на конкретни мобилни устройства. Наличните устройства включват различни версии на iPad, айпад мини, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Самсунг Галаксии някои други популярни устройства.

Като изберете конкретно устройство, можете да проверите сайта на мобилно устройство. Например дисплей начална страницасайт "Nubex" на iPad 3:

И на Samsung Galaxy S4:

Тук можете не само да видите дисплея на сайта на определено устройство, но и да работите напълно със сайта, сякаш имате правилната притурка пред вас. Несъмнено този инструмент е просто незаменим при разработването на мобилна версия на сайта, но как вашият сайт ще се показва на реални устройства трябва да се провери на реални устройства. Това е особено важно, ако трябва да проверите показването на сайта в "родни" браузъри (Safari - за iPad / iPhone, IE - за Windows телефони т.н.).

Ето какво е, Google скоро (според слуховете - от 21 април 2015 г.) ще започне да класира много лошо сайтове, които не са тествани от Google Webmasters за лесно гледане на мобилни устройства.

Не е ясно точно, сайтът ще има проблеми само ако се показва на мобилни потребители или дори на тези, които са влезли от компютър, т.е. отделен проблем ли ще има?

Това почти не променя същността за сайтове, които имат половината или значителна част от мобилния трафик. Ето защо е по-добре да преминете теста възможно най-скоро.

Ще ви кажа как да направите това:

Преди	След

• Първи чип, което помогна за разрешаването на проблема без допълнителни жестове.

В robots.txt напишете реда:
Разрешаване: /wp-content/themes/TemplateName/style.css

(Ако файлът със стилове се намира на различен адрес, тогава го записваме. Ако има няколко файла със стилове, тогава залепваме редове за всеки файл.)

• втори момент, ако видим съобщението "Интерактивните елементи са твърде близо един до друг." Показва се на google.com/webmasters/tools/mobile-friendly.
  Просто в стиловете на желания клас предписва повече отстъпи за връзки и бутони. Заема марж или подложка от 5px.

  Понякога блокирането на Adsense може да създаде този проблем. Може би трябва да вмъкнете по-голям блок или с по-голям шрифт.

P.S. Първоначално очаквам първичната да е направена от вас.