Защо сайтът Ви трябва да е mobile-friendly + 3 начина да го направите

С развитието на технологиите и широкото използване на мобилни устройства в ежедневието, мобилният трафик към сайтове драстично увеличава размерите си. Следвайки тази тенденция, от юли 2019 година Google наложи правилото за Mobile First Index за всички нови сайтове. При този подход ботовете на търсачката проверяват първо мобилната им версия. В случай че сайтът вече е бил индексиран преди въвеждането на правилото, Google ще продължи да обхожда неговата desktop версия.

Наскоро обаче Google официално обяви, че преминаването към Mobile First Index за всички сайтове е планирано за март месец 2021 година. 

Защо това е важна промяна, която би засегнала Вашите проекти?

В процеса на индексация мобилният GoogleBot посещава страницата и анализира текстовото ѝ съдържание, както и цялостното ѝ визуално оформление. Спрямо алгоритмите на Google и индексираната информация се определя позицията на сайта в класирането. Ето защо е препоръчително да се уверите, че сайтът Ви е оптимизиран за мобилни устройства.

Ако той не отговаря на основните критерии на Google за mobile-friendly визия, необходимо е максимално бързо да предприемете действия за оптимизацията му.

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

Как да проверим дали сайтът ни е mobile-friendly?

Ако сайтът Ви се вижда еднакво добре, независимо от размерите на екрана на устройството, което се използва от потребителя, то той използва отзивчив (responsive) дизайн. При него CSS кодът указва на браузъра как да се подреди съдържанието на страницата спрямо резолюцията на екрана. Това подобрява преживяването на потребителя при използването на мобилни устройства. В този случай няма да е необходимо да предприемате действия и промени в структурата на сайта.

Ако разполагате с отделна мобилна версия на сайта, уверете се, че информацията е идентична с тази на desktop версията. Необходимо е сайтът да използва еквивалентни структурирани данни за двете версии. Структурираните данни дават информация за страницата Ви и типа на съдържанието, което е добавено в нея. По този начин то ще бъде по-добре представено на потребителите при търсене.

Можете да проверите дали сайтът има структурирани данни чрез инструмента Rich Results Test.

Важно: Директна проверка дали сайтът Ви е mobile-friendly и отговаря на препоръките на Google, можете да извършите чрез инструмента Mobile-Friendly Test.

Резултат от проверката на сайт, който е mobile friendly.
Резултат от проверката на сайт, който е mobile friendly.

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

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

Как да направим WordPress mobile-friendly

WordPress е сред най-масово използваните системи за изграждане на сайтове с най-различна тематика. Дали сайтът Ви, направен с тази система, ще бъде mobile-friendly зависи от темата и плъгините, с които сте избрали да го изградите.

Използване на Responsive тема

При създаването на сайт с WordPress първата и най-важна стъпка е изборът на тема. Уверете се, че избраната от Вас тема е mobile-friendly и използва responsive дизайн. 

Можете да проследите как ще се зарежда сайтът Ви през мобилно устройство с избраната тема, след като тя е инсталирана в WordPress през администрацията » „Външен вид“ » „Настройка“. В долния десен ъгъл на менюто ще откриете варианти за визуализиране на сайта Ви при desktop, tablet и мобилно устройство.

Мобилен изглед на сайта при редакция на темата.
Мобилен изглед на сайта при редакция на темата.

Използвате тема, която не е mobile-friendly?

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

  • Уверете се, че темата Ви е обновена до последна версия. Използването на отзивчив дизайн е сред основните критерии при изграждането на сайт. Възможно е разработчиците на темата да са оптимизирали кода ѝ в следващите версии. Ако пък темата, която използвате, е платена или разработена специално за Вашия сайт, можете да се обърнете към разработчиците ѝ за съдействие.
  • Да използвате допълнителни плъгини, чрез които да преминете към мобилна версия на сайта. В официалната директория с плъгини за WordPress има различни плъгини, които ще Ви помогнат да подобрите изгледа на Вашия сайт за мобилни устройства или изцяло да го модифицирате. 
  • Да промените изцяло визията на сайта, като изберете нова тема, която да разполага с responsive дизайн. 

Важно е подобен тип промени да се извършат на тестова инсталация, тъй като настройки и функционалности, специфични за настоящата Ви тема, няма да бъдат налични след промяната ѝ.

Допълнителни плъгини

Ако избраният от Вас вариант е инсталация на допълнителен плъгин, за да оптимизирате сайта Ви и да преминете към mobile-friendly версия, то сега ще Ви представим най-популярните плъгини:

WP Touch

WP Touch е сред най-използваните плъгини за модификация на теми, които не предлагат responsive дизайн. След инсталацията му автоматично сайтът Ви получава mobile-friendly визия.

Можете да използвате безплатната или платената версия, като едно от предимствата на WP Touch Pro (премиум версията) е възможност да използвате плъгина в комбинация с кеширащи механизми.

Плъгинът създава отделно меню WP Touch в администрацията на WordPress, чрез което лесно можете да управлявате неговите настройки.

Основни настройки на плъгина WP Touch.
Основни настройки на плъгина WP Touch.

Ако искате да модифицирате визуалните настройки на сайта, то това ще можете да извършите чрез менюто „Външен вид“

Важна стъпка при настройката е изборът на меню, което да се визуализира на потребителите, използващи мобилни устройства. За да можете да използвате текущо зададеното меню за desktop версията на сайта и при мобилните устройства, трябва да поставите отметка за него през „Външен вид“ » „Менюта“ » „Настройки на менюто“ » „WPtouch: Header Menu“.

Активиране на меню за мобилната версия на сайта
Активиране на меню за мобилната версия на сайта

Accelerated Mobile Pages (AMP)

За да подобрите потребителското изживяване при използването на мобилни устройства, можете да добавите Accelerated Mobile Pages (AMP) поддръжка в сайта. AMP представлява проект с отворен код, стартиран през 2015 г. Неговата цел е да подобри бързодействието на сайтовете при използването на мобилни устройства.

В WordPress можете да интегрирате тази поддръжка чрез инсталирането на допълнителен плъгин като AMP for WordPress.

Настройка на AMP for WP.
Настройка на AMP for WP.

След инсталацията на плъгина, HTML кодът на сайта Ви ще бъде преобразуван така, че да се използва AMP поддръжката. Имате възможност да изберете няколко нива на работа на този плъгин, в зависимост от това до каква степен искате сайтът да бъде модифициран.

Google продължава да работи в посока подобряване на потребителското изживяване на сайтовете през мобилни устройства. Въвеждането на Web Stories, базирани на AMP, е един от обещаващите проекти на Google.

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

Съвет от support-а: Ако искате да подобрите работата на сайта през мобилни устройства, то е добре да обърнете внимание и на следните настройки:

Абонирайте се за СуперБлога, за да научавате първи най-важното и полезното от света на уеб, касаещо Вашия сайт и дигитално развитие.

Габриела Савова
Габриела Савова
Габи е нашият WordPress експерт с неутолима жажда за познание, чиято СуперСила е несломимата ѝ упоритост да стигне до решението, независимо колко „екзотичен“ е казусът.
5 1 vote
.
Абониране
Уведоми ме при
guest

0 Коментара
Inline Feedbacks
View all comments
3 стъпки за органично бизнес онлайн присъствие

3 стъпки за органично бизнес онлайн присъствие [Аудио]

2
Под „органично присъствие“ имаме предвид всички начини, чрез които потребителите могат да разберат за Вашия бизнес, без да плащате за позициониране (реклама).
Блог статия - популяризация на съдържание

Написах статия: 9 идеи за повече посетители на Вашия блог

0
Написахте блог статия. Поздравления! А сега накъде? Вижте нашите предложения за успешна популяризация на блог статии. Повече в СуперБлога!
6 причини за съобщение Internal Server Error 500

6 причини за съобщение Internal Server Error 500 [Аудио]

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