Техніки мобільної адаптації сайту

У попередніх статтях ми говорили про принципи зручності мобільних сайтів, особливості нового алгоритму Google mobile-friendly і про способи перевірки готовності сайту прийняти користувачів смартфонів. Переходимо до практичної частини та розбору методів адаптації сайту для смартфонів, планшетів та інших аналогічних пристроїв. У довідковій документації Google використовується наступна термінологія для даних технік: «різні URL», «динамічний показ» і «адаптивний дизайн».

Спосіб 1. Різні URL

Особливість: для різних типів пристроїв (мобільних і десктопних) використовуються різні URL і різні варіанти HTML-коду.

На практиці це означає, що на додаток до основного сайту створюється ще один самостійний ресурс (зазвичай на піддомені m.site.ru або в доменній зоні .mobi), найчастіше більш обмежений, що виключає другорядний контент і функціонал. Як приклад наведемо сайт магазину Тріал-спорт. У мобільній версії розробники відмовилися від малозначущих розділів (медіа, вакансії, контакти), залишивши тільки те, що необхідно для швидкого вивчення, вибору товару і здійснення покупки (каталог, адреси магазинів, інформація про акції).

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

Як це зробити?

На сторінках десктопной версії в HTML-коді або у файлі Sitemap.xml до тегу link додається атрибут rel = "alternate" і два його значення: media (роздільна здатність екрану - то умова, при виконанні якого повинен використовуватися альтернативний URL) і href (сама посилання на мобільну версію сторінки). У свою чергу, на сторінках мобільної версії до тегу link додається атрибут rel = "canonical" з посиланням на аналогічну сторінку десктопного сайту. Більш детально ця техніка описана в довідковій статті Google. Там же наведені приклади коду, а також способи налаштування автоматичної переадресації за допомогою HTTP або JavaScript.

Спосіб 2. Адаптивний дизайн

Особливість: для різних типів пристроїв (мобільних і десктопних) використовується один URL і один і той же HTML-код.

Техніка адаптивного дизайну передбачає створення універсальної архітектури сайту, яка автоматично підлаштовується під будь-які пристрої користувача. Досягається це за допомогою CSS: в залежності від ширини екрану коригуються розміри елементів дизайну сторінки (шрифти збільшуються, картинки оптимізуються і змінюють своє розташування). Отже, один і той же сайт з одним і тим же контентом стає однаково зручним для перегляду на будь-якому вигляді пристрою: планшеті, смартфоні, стаціонарному комп'ютері, проекторі, а в перспективі і на нових типах гаджетів ринку мобільних пристроїв.

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

Фахівці Google називають дану техніку найбільш перспективною і приводять в довідкових матеріалах для вебмайстрів ряд рекомендацій щодо її реалізації:

  • включіть в мета-дані сторінок тег meta name = "viewport", щоб повідомити браузеру і Google-боту, що сторінка адаптується до будь пристроям;
  • використовуйте для мобільного адаптації сайтів, створених на популярних CMS, готові рішення;
  • ознайомтеся з практичним прикладом (покрокова інструкція) створення цільової сторінки, яка відкривається однаково добре на пристроях з різною шириною і різним дозволом екрану.

Спосіб 3. Динамічний показ

Особливість: для різних типів пристроїв (мобільних і десктопних) використовується один URL, але різні варіанти HTML-коду.

Як і в попередньому випадку, тут робота ведеться тільки з одним сайтом, але для нього створюється кілька шаблонів верстки під різні типи пристроїв. Це дозволяє використовувати всі переваги CSS і JavaScript для звичайної версії сайту і в той же самий час пропонувати мобільним користувачам «полегшений» варіант (без обтяжливих його завантаження скриптів і стилів). Прикладом використання такої техніки може служити сайт магазину Decathlon.

Коротко процес динамічного показу можна описати так: при відкритті сторінки сайту на смартфоні / планшеті / ноутбуці і т.д. браузер відправляє серверної частини сайту свій User-agent, що містить інформацію про тип пристрою користувача. Визначивши тип пристрою, сервер у відповідь відправляє потрібний варіант коду HTML і CSS. Фактично дана техніка об'єднує в собі особливості окремої версії мобільного сайту і адаптивного дизайну.

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

Що вибрати?

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

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

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

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

Висновки

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