Mobile-friendly - оптимізувати сайт для мобільних пристроїв

1. Мобільна версія сайту терміново!
2. 2 способи зробити мобільну версію WordPress сайту.
3. Перевірка на mobile-friendly.
4. Які поради ще дає Google по цій темі?

Написав Олена Молгачева в

Мобільна версія сайту терміново!

Просунуті блогери вже давно створили мобільні версії для своїх сайтів.

Гугл також настійливо радить всім оптимізувати сайт для мобільних пристроїв і зробити його mobile-friendly.

Але, якщо раніше це було бажано, але необов'язково, то тепер настав той самий момент, коли мобільна версія сайту потрібна терміново.

Як то кажуть, поки смажений півень НЕ клюне ...

Так ось цей історичний момент вже настав. Клювати, правда, буде не смажений півень, а черговий пінгвін Гугла (алгоритм Google Penguin).

Ще в кінці лютого 2015 року Google розіслав всім попереджувальні листи про те, щоб блогери перевірили, наскільки дружній їх сайт до різних мобільних пристроїв (mobile-friendly).

Такий лист отримала і я, але чомусь його не помітила, не відчинила і не прочитала. А даремно.

При перевірці доходів від реклами в Google AdSense я теж виявила новий пункт оцінки сайту - «Багато пристроїв». Але так як там у мене стояло 4 бали з 5, то я теж особливо не стривожилася.

І ось, нарешті, мені на очі потрапила стаття , Що термін вже закінчується, і 21 квітня 2015 року настає той самий дедлайн (граничний термін), коли буде оновлений пошуковий алгоритм Google. І всі, хто не подбав про мобільної версії для свого сайту, можуть виявитися на задвірках пошукової видачі, і позиції їх сайтів можуть постраждати. А відвідуваність, як наслідок цього процесу, впасти.

Зізнатися, я вже пробувала створювати мобільну версію для свого сайту на WordPress.
І вивчила вже цілих 2 способи того, як це зробити.

2 способи зробити мобільну версію WordPress сайту.

Спочатку я спробувала зробити мобільний сайт за допомогою сервісу DudaMobile .

До речі, мені дуже сподобався цей варіант, тому що він дозволяє «мобілізувати» не тільки вміст сайту, але і його бічні колонки (сайдбарі).

Конструктор мобільної версії, який там надають, до певних розмірів сайту можна використовувати безкоштовно. Мій сайт в ці розміри вписався.

Чому ж цей варіант не прижився у мене?

Справа в тому, що у випадку з DudaMobile, мобільна версія сайту буде знаходитися не на Вашому домені (сервері, де розташований Ваш сайт), а на домені (сервері) DudaMobile. Для цього встановлюється спеціальний плагін, який здійснює переадресацію. І сервіс додатково надає статистику по відвідувань Вашого сайту з мобільних пристроїв (надсилає на пошту щотижня).

Тому, коли я виявила, що після установки DudaMobile, у мене почала падати відвідуваність сайту, яка фіксується розташованими на ньому лічильниками, то я цей плагін у себе деактивувала.
До речі, довідку за встановленими на моєму сайті плагинам, можна подивитися тут (Таблиця в самому низу сторінки).

Підсумувати кожен раз вручну відвідуваність зі стаціонарних і мобільних пристроїв мені здалося незручним.

Хоча DudaMobile надає багато чудових можливостей, особливо для комерційних сайтів, включаючи те, що можна відразу ж зателефонувати і зробити замовлення.

Другий безкоштовний варіант оптимізувати сайт для мобільних пристроїв, який я знайшла, - це установка плагіна WPtouch.

Але цей плагін пропонує безкоштовно тільки одну мобільну тему. Я вирішила випробувати її на своєму запасному блозі. Але там у мене чомусь зробити це відразу не вийшло. Тому свої спроби мобілізації я закинула.

Переглянула на свій сайт з мобіли, переконалася, що шрифт, хоч і невеликий, але його можна збільшити. І відклала вирішення проблеми на невизначений термін. Ще не припече.

Припекло.

Тепер же я швиденько встановила на своєму робочому сайті плагін WPtouch, не змінюючи ніяких налаштувань. Все залишила за замовчуванням. Просто поглянула на неї, як буде виглядати мобільна версія сайту, і натиснула зберегти.

І, о, диво! Плагін встановився і заробив нормально.

Але в запропонованій мобільного темі бічні колонки Вашого сайту зовсім не беруть участь. Їх просто обрізають.

А DudaMobile оптимізує, в тому числі, і сайдбарі. Вони шикуються в одну колонку і показуються в кінці будь-якої відкритої для перегляду сторінки.

А в разі встановлення плагіну WPtouch, інформація, яка розташована в бічних колонках сайту, відвідувачам з мобільних пристроїв не буде видно.

Відразу виникає думка, що головне все-таки зміст.

Хоча самі статті і сторінки сайту відображаються коректно, включаючи вставлені туди ілюстрації та відео.

Рекомедую обов'язково перевірити всі свої сторінки з горизонтального меню сайту.

Мені довелося редагувати деякі з них, щоб вони відповідали вимогам відображення на мобільних пристроях. Для цього я зменшила за розміром кілька зображень, а таблиці переробила з трьох колонок на дві. Інакше пройти перевірку без помилок не вдавалося.

Перевірка на mobile-friendly.

І, найголовніше, Google залишився задоволеним. Перевірка по посиланню

https://www.google.com/webmasters/tools/mobile-friendly/

показала, що все відповідає висунутим вимогам, і сайт переходить в розряд mobile-friendly.

Так що цей варіант я раджу власникам сайтів на Вордпресс, щоб швидко вирішити назрілу проблему створення мобільної версії сайту.

Які поради ще дає Google по цій темі?

Я для себе виділила наступне.

1. Радять оновити версію WordPress і встановлені плагіни (в тому числі і тему) до останніх існуючих версій.

2. Якщо сайт розташований на окремому домені (як в моєму випадку), а не на піддомені WordPress.com, то можна використовувати один з наступних плагінів: Jetpack, WPTouch, WP Mobile Detector. В такому випадку можна не міняти шаблон самого сайту на WordPress, а для мобільних пристроїв за допомогою цих плагінів для Вашого сайту буде побудована простіша спеціальна мобільна версія, яка буде відрізнятися від звичного вигляду (відображення) сайту на стаціонарних пристроях.

3. Для сайту на CMS (движку) WordPress можна підібрати і встановити інший шаблон (тему) WordPress, яка оптимізована для мобільних пристроїв і самостійно легко адаптується до перегляду сайту на будь-якому екрані. Для цього потрібно знайти тему, яка забезпечує responsive layout (адаптивний дизайн). В такому випадку Ваш сайт на будь-якому екрані буде виглядати приблизно однаково.

4. Можна глибоко розібратися самому або найняти фахівця, щоб оптимізувати сайт для мобільних пристроїв з його допомогою, і створити свій неповторний адаптивний дизайн блогу.

Всі ці поради, Ви можете самостійно вивчити тут.

І вибрати один із запропонованих варіантів. Ось тільки зробити це потрібно якомога швидше. Часу залишилося мало.

Бажаю успіхів!

PS До речі, на моєму запасному Вордпресс блозі плагін WPtouch так і не встановився коректно. Б'юся над вирішенням завдання.

Олена і tvoy-internet.ru