Як оптимізувати сайт під мобільний видачу?

  1. Протестуйте свій сайт
  2. Зробіть резервну копію сайту
  3. Оновлення ПО
  4. Оптимізуйте використовувану тему оформлення для мобільних пристроїв
  5. Обговоріть деталі з розробником
  6. Налаштуйте конфігурацію сайту для пристроїв різних видів
  7. повідомте пошуковику
  8. Розберіться з проблемою дублювання контенту

Редактор-перекладач SEOnews

У квітні 2015 року Google запустив алгоритм mobile-friendly, а в лютому 2016 року Яндекс викотив алгоритм «Владивосток», який розставив всі крапки над i в питанні адаптації користувальницьких сайтів під різні гаджети.

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

Протестуйте свій сайт

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

Зробіть резервну копію сайту

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

Оновлення ПО

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

Оптимізуйте використовувану тему оформлення для мобільних пристроїв

Тему необхідно знайти в панелі управління вашої CMS і потім подивитися, чи є в її описі такі поняття, як mobile (мобільний) або responsive (адаптивний). Якщо в темі доступна демонстративна сторінка, її потрібно на зручність перегляду з мобільних пристроїв. Швидкодія використовуваного шаблону можна перевірити за допомогою інструменту.

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

Обговоріть деталі з розробником

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

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

Налаштуйте конфігурацію сайту для пристроїв різних видів

Є три способи адаптації сайту для мобільних пристроїв:

  • Адаптивний дизайн. У цьому випадку сервер відправляє один і той же код HTML всіх пристроїв, але код відображається по-різному. Пошуковики рекомендують використовувати цей варіант.
  • Динамічний показ. Тут для різних пристроїв використовується один URL, але різні варіанти коду HTML. Система буде керуватися доступною інформацією про браузері користувача при виборі потрібного варіанта.
  • Різні URL. Для різних пристроїв використовуються різні варіанти коду і різні URL. Система визначає тип пристрою, а потім перенаправляє на потрібну сторінку за допомогою переадресації HTTP і HTTP-заголовка Vary.

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

повідомте пошуковику

Перше, що радить зробити Google - це зробити адаптивний дизайн сайту. Другий спосіб - це різні сайти для десктопів і мобільних пристроїв. В цьому випадку слід обов'язково прописати атрибут rel = "alternate", який буде відсилати до мобільної версії сайту. Так Google зрозуміє, що є дві версії одного і того ж сайту - мобільна і звичайна. Для мобільної версії сайту слід прописати атрибут rel = "canonical", який буде відсилати на звичайну версію сайту.

Яндекс ж рекомендує для початку перевірити сайт на дружність до мобільних пристроїв в новому. Перевірка ресурсу може послужити для Яндекса підказкою, що у сайту є мобільна версія. Як саме вона повинна виглядати, можна дізнатися. Також необхідно використовувати мета-тег meta name = "viewport" content = "width = device-width, initial-scale = 1", щоб вказати область перегляду контенту.

Розберіться з проблемою дублювання контенту

Це питання мучить більшість власників сайтів, замислених про мобільної версії ресурсу. Щоб допомогти роботу правильно визначити мобільну версію сайту, Яндекс, наприклад, рекомендує вказувати на сторінках URL мобільної версії. Наприклад, за допомогою елемента link:

link rel = "alternate" media = "only screen and (max-width: 640px)" href = "http://m.example.com/page.html"

Артур Смирнов, Head of Mobile,: Артур Смирнов, Head of Mobile,:

Минуло більше року з того моменту, коли Google в безапеляційного формі заявив всім гравцям ринку digital про перехід на новий алгоритм ранжирування. З цього моменту фактор оптімізірованності сайту під мобільні пристрої став грати одну з першорядних ролей в успішності онлайн-ресурсу. За даними Google, тільки за 2015 рік кількість користувачів, що віддають перевагу заходити в інтернет через свої смартфони, склало 61%. І, як ми можемо впевнено припускати, цей показник продовжує стрімко зростати.

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

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

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

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

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