замовити дзвінок
+38 057 782-28-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
51
1

За даними ресурсу Statcounter, за останній рік мобільним пошуком користуються на 8-10% більше, ніж десктопним – 55% та 44% (дані за листопад 2021). І оскільки поширення мобільних та їх можливості з часом збільшуються, колись показник буде близьким до 100%.

Адаптація сайту під мобільний

Рис. 1 – Статистика Statcounter

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

Коли Google помітив цей тренд, він почав підштовхувати веб-сайти до адаптації своїх ресурсів під маленькі екрани портативних дзвонилок. І в липні 2019 року перейшов на індексацію із пріоритетом мобільного контенту. Таким чином, місце у пошуковій видачі тепер визначає мобільна версія: її зручність, швидкість завантаження та релевантність вмісту.

Діє це правило як для нових або недавно доданих до індексу ресурсів, так і для сайтів, створених раніше. Якщо вас переводять на такий тип індексації, ви отримаєте повідомлення в Search Console.

Адаптація сайту під мобільний неоптимізовані сторінки

Рис. 2 – Приклади неоптимізованих сторінок

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

Друга причина – зручність. Без прив'язки до ПК будь-хто зможе відвідати сайт та знайти потрібну інформацію через маленький екран мобільного. Де б користувач не знаходився.


1. Вимоги Google до сайтів

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

  • на обох версіях повинні бути одні й ті самі метатеги й robots.txt;
  • не варто впроваджувати відкладене завантаження (завантаження елемента після певної дії);
  • на всіх версіях ресурсу має бути однаковий контент;
  • перевірте структуровані дані (вони мають бути присутніми на обох версіях);
  • слідуйте рекомендаціям про зображення и відео;
  • дозволити доступ до файлів CSS, JavaScript – від них залежить відображення сторінок;
  • не використовуйте Flash-елементи, більшість смартфонів їх не підтримують.

2. Вимоги з боку користувачів

Ви ж оптимізуватимете сайт під мобільні пристрої для людей?
Тому ловіть перелік вимог з боку користувачів, тобто ті нюанси, які допоможуть вам не втратити трафік, а збільшити його:

  • прискоріть завантаження сторінок до 1-3 секунд;
  • забезпечте гарний дизайн, який нагадуватиме за кольорами та оформленням основну версію;
  • ключовий функціонал краще залишити на сайті, навіть якщо це його трохи сповільнить;
  • зробіть інтерфейс зручним для всіх, доступ до головних функцій повинен відбуватися в 1-2 натискання, а не 10;
  • не використовуйте повноекранні поп-апи для мобільних (користувачі часто бачать банер після повного завантаження сайту, але можуть встигнути натиснути на меню – у результаті сайт або взагалі не реагує, або клік зараховується по банеру й відкриває зовсім іншу сторінку – це бісить);
  • оптимізуйте текст для читання: відкрив сторінку й одразу читаєш потрібну інформацію, а не спочатку збільшуєш текст;
  • спростіть усі форми для заповнення: на маленькому екрані не так зручно заповнювати форму замовлення або реєструватися, тому залиште лише необхідні поля.

Краса, зручність та швидкість – ось що вимагають користувачі від мобільного сайту сьогодні.


3. Як адаптувати сайт під мобільні пристрої

Для реалізації мобільної версії сайту можна скористатися одним із 2-х способів:

  1. Створити окрему мобільну версію (на піддомені).
  2. Використовувати адаптивну верстку.

Розберемо кожен пункт докладніше.


3.1 Окрема мобільна версія

Власне – це ще один сайт, оптимізований під показ та взаємодію тільки з мобільними та планшетами. В адресі сайту перед його назвою через точку вказується m чи mobile.

Адаптація сайту під мобільний пошук

Рис. 3 – Мобільні версії сайтів у пошуку

Переваги Недоліки
  • швидкість завантаження сторінок;
  • можливість перейти на повну версію;
  • відсутність перевантаженості елементами;
  • зручність.
  • окрема адреса;
  • урізаний функціонал;
  • вносити зміни потрібно в кожну версію окремо;
  • можливе зменшення ефекту від зовнішніх посилань;
  • вартість розробки.

Оптимізація мобільної версії сайту здійснюється окремо, а за загальним дизайном вона має запозичувати елементи або повністю копіювати зовнішній вигляд материнського ресурсу (для впізнаваності).
Крім зазначених недоліків, обидві версії можуть конфліктувати між собою. Щоб уникнути цього, використовуйте теги canonical та alternate. Вони допоможуть усунути дублі сторінок.

На основному сайті в тезі alternate потрібно вказати посилання на мобільну версію сторінки, таким чином зв’язуються сторінки мобільної та основної версії.
А тег canonical розміщується саме на мобільній версії із зазначенням основної версії сторінки.

Але Google не рекомендує створювати нову версію, а радить користуватися адаптивною версткою. При цьому старим сайтам легше заморочитися зі створенням окремої мобільної версії. Тому що робити адаптивну означає практично створювати сайт з нуля. Хоча, з погляду SEO, перспективніше.


3.2 Адаптивна верстка

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

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

Це означає, що десктопний сайт автоматично утискатиметься під потрібні розміри без серйозної участі розробника. Хоча, якщо сайт створюється вручну, вам доведеться задавати можливість масштабування також вручну.

Адаптація сайту під мобільний адаптивна верстка

Рис. 4 – Адаптивна верстка

Переваги Недоліки
  • url не змінюється;
  • правильно відображається на всіх пристроях;
  • рекомендований Google’ом формат;
  • швидка реалізація.
  • може урізатися доступна інформація;
  • перейти на повну версію неможливо;
  • довго завантажує важкі елементи.

З одного боку, це рішення швидке і зручне, але воно не позбавлене недоліків.
Тому для стабільності та зростання зручності можна скористатися цими порадами:

  • приховати меню та великі описи кнопками;
  • додати горизонтальний скролінг;
  • адаптувати картинки та масштабувати відео за допомогою CSS;
  • приховати фільтри;
  • оптимізувати шрифти та кількість відображуваних на сторінці блоків;
  • зменшити спливаючі вікна.

Якщо сайт пишеться вручну, то доведеться для кожного елемента задавати параметри, які допоможуть елементам змінювати своє розташування та розмір залежно від ширини та висоти дисплея. У результаті результат може не влаштувати вас, тому подумайте, який із двох варіантів вам доцільніше.


3.3 Використання AMP-сторінок

Докладно про те, що таке AMP, які обмеження та переваги цей формат дає, писали у статті Що таке AMP-сторінки.
Тут згадаю, що попри швидкість завантаження та пріоритет у ранжуванні, такий спосіб прискорення сильно б’є за функціональністю. Як приклад, картинки повинні мати заданий розмір, на сайті може бути відсутня функція коментування, неможливо впровадити динамічні елементи тощо.

Якщо вам функціонал дуже важливий, то краще взагалі не вдаватися до AMP.


4. Як створити мобільну версію?

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

А якщо зайнятися цим самостійно, результат можна отримати за допомогою наступних інструментів:

  • конструктори. Це веб-сайти, на яких кожен може зібрати свій власний проект як кубік Рубіка, вибираючи блоки та теми оформлення (або використовуючи готовий шаблон) – Creambee, MoAction, Mobify та ін.. Попри те, що деякі рішення платні, загальні витрати все одно будуть нижчими, ніж при співпраці з розробником;
  • CMS-плагіни. Наприклад, WPtouch, AMP for WP та ін. Плагіни дозволяють швидко створити мобільну версію, просто задавши потрібні налаштування;
  • адаптивні теми. Як і плагіни, вони працюють лише з CMS. З їх допомогою основний сайт набуває адаптивного дизайну, тобто може підлаштовуватися під різні екрани пристроїв.

5. Яким типам ресурсів потрібна мобільна версія??

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

Наприклад, при виборі нерухомості користуватися телефоном буде просто незручно. Щоб розглянути картинки та планування будівлі, знадобиться великий екран. Тому далеко не кожен сайт має робочий аналог для маленьких дисплеїв.

Мобільна версія надасть вам перевагу в таких сферах:

  • торгівля – всі ресурси, завдання яких продавати, а не лише інформувати;
  • сайти-візитки;
  • лендинги для реєстрації на івенти;
  • корпоративним сайтам – наявність мобільної версії підвищить презентабельність компанії в очах клієнтів та звичайних користувачів;
  • порталам новин – народ любить читати новини у громадському транспорті.

Як би не було, про створення адаптованого аналога основного ресурсу треба подумати вже зараз. Навіть якщо вам здається, що мобільна версія вашому бізнесу не потрібна.


6. Як перевірити, чи оптимізовано сторінку під перегляд на мобільних?

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

Адаптація сайту під мобільний Google Search Console

Рис. 5 – Результат перевірки

Якщо стежите за роботою свого веб-сайту через Search Console, то є звіт про зручність користування на мобільних.

Він покаже, на яких сторінках є проблеми:

Адаптація сайту під мобільний

Рис. 6 – Search Console

У Хромі є емулятор, який допоможе перевірити, як сайт виглядатиме на мобільних за допомогою Chrome DevTools.

Або ж сайт Responsinator – ввів адресу й дивишся, як твій сайт виглядає на мобільних. Дуже зручно.

Google Search Console

Рис. 7 – Емулювання малювання мобільної версії ITForce

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

Рекомендація від ITForce: З погляду просування у пошуку краще використовувати адаптивний дизайн, тому що це один сайт. Тобто ви отримуватимете за ним одну статистику.
За мобільною версією потрібен постійний контроль + це подвійна робота (впроваджувати нові опції доведеться відразу на 2 ресурси окремо).

Наша думка – мобільні версії в майбутньому перестануть використовуватися й залишиться лише адаптивний дизайн.


Як підвищити рейтинг сайту за допомогою вхідних посилань: 30 стратегій, що працюють (частина 2)

Як підвищити рейтинг сайту за допомогою вхідних посилань: 30 працюючих стратегій (частина 1)

Питання замовників до SEO-спеціалістів

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.