Способы реализации мобильной версии сайта через призму SEO

6 способов реализации мобильной версии сайта и их разбор с точки зрения SEO.

Думаю, не нужно в сотый раз рассказывать, почему все, кто связан с разработкой сайтов озабочены реализацией мобильной версии. Поэтому предлагаю перейти сразу к разбору способов ее реализации и ускорения.

1. Динамический показ (RESS).

• Рекомендации от Google
• Кратко о способе: Пользователям с мобилок и десктопа показывается разный код по одному и тому же url. Тип устройства определяется сервером.
• Плюсы: Можно сделать дизайн специально под мобилку - содержимое контента для мобилки не обязательно соответствует десктопной версии . Тем более, если вы собираете персонализированные данные у пользователей, то можно показывать им разный релевантный контент.
• Минусы: Очень трудоемко. Требует постоянных обновлений. Сервер не всегда правильно определяет устройство. Значительное увеличение нагрузки на сервер, что не делает загрузку страниц быстрее, а нам важна скорость, не так ли?
• Отношение ПС: Google приемлет, сейчас на многих своих проектах он использует именно этот способ. Яндекс говорит динамическом показе максимально схожим по контенту с десктопной версией.
• Примеры: Saiwala, CNN

2. Мобильный сайт на другом домене

• Рекомендации от Google
• Кратко: просто мобильный сайт на отдельном домене
• Плюсы: Легко отслеживать и отделять мобильную конверсию. Можно разнести на разные серверы. Можно сделать полегче и побыстрее, нежели десктопный вариант.
• Минусы: Отдельный сайт на обслуживании. Все изменения придется вносить отдельно (хотя это может быть и плюсом). Перенаправление пользователя занимает определенное время.
• Как относятся ПС: Яндекс относится нормально, но указывает условие, что структура мобильной версии сайта должна полностью соответствовать структуре основного домена. Google относится нормально
• Примеры: wikipedia.org

3. Адаптивный дизайн.

• Инфа от Google
• Кратко: Контент адаптируется под размер экран
• Плюсы: Адаптируется под большинство экранов. Один сайт проще обслуживать. Не нужно верстать дополнительные страницы. Довольно просто внедрить.
• Минусы: Придется отображать все блоки что есть на десктопе (решение: collapse show с загрузкой по клику. С этим свой вопрос, потому как есть жалобы от иностранных сеошников на индексирование скрытого контента) Нет особой гибкости вариации размещения блоков. Сложнее продумывать варианты ускорения (медленнее загрузка страницы). Как относятся ПС: Яндекс нормально. Google рекомендует использовать именно АВД.
• Примеры: Kiwitaxi

4. AMP/Турбо

• Инфа от ПС: Турбо от Яндекс , AMP от Google
• Кратко: AMP - специальные теги кэшируют информацию на странице и при ее загрузке пользователем эта информация подгружается из CDN Гугла, обеспечиваю высокую скорость загрузки. Турбо - загрузка кэшированной версии страницы на стороне Яндекса.
• Плюсы: Оба варианта имеют свои приоритеты и плюшки в ранжировании. Высокая скорость загрузки страницы. Mobile-friendly. Загрузка происходит на стороне Пс, поэтому нет особой нагрузки на сервер.
• Минусы: Увы, подходят не всем, а только новостным сайтам и каталогам (без фильтров). Для интернет-магазинов есть решение только у Яндекс. Есть свои нюансы со сбором аналитики. Очень малая гибкость.
• Примеры: любые новостные сайты с мобильной версии. Вот lenta подробно описывает опыт внедрения этих страниц:

5. Single Page Application (SPA)

• Инфа от ПС:
• Кратко: Фронтенд грузится на js, поэтому для того, чтобы была успешная индексация, нужно отдавать html снимки роботу.
• Плюсы: Загрузка происходит на стороне пользователя, что равно высокой скорости и низкой нагрузке на сервер
• Минусы: нужно верстать html версии страниц и, когда на сайте происходят изменения, вручную править их. Нужно иметь веб-разработчика в штате. Так же есть вариант реализовывать в spa отдельные особо тяжелые блоки на странице (например результаты поиска) и тогда с html версией будет проще. Я спросила у Платонов, как бы Яндекс отнесся к таким блокам и получила ответ: "Если страницы будут доступны роботу, отвечать на запросы кодом 200 ОК и отдавать контент в HTML-формате, то такие блоки не должны повлиять на индексирование страниц. Они смогут индексироваться и участвовать в поиске в обычном режиме."
• Примеры: mydriver

6. PWA-приложения

• Инфа от Google
• Кратко: браузер используется как некая виртуальная машина, хранящая и запускающая в себе PWA приложение.
• Плюсы: Надежно (по умолчанию работает только с защищенным соединением), быстро, нативно, способно работать при слабом сигнале или вообще оффлайн, очень гибкий инструмент. Может уведомлять пользователя на мобилках о новостях (push)
• Минусы: как и в SPA нужно иметь html версии страниц. Нужно иметь в штате разработчика приложений. Говорят, Safari пока не поддерживает эту технологию, но эта теория требует проверки.
• Примеры: pwa.rocks

Итоги: У Google очень много решений для реализации мобильных версий сайта, Яндекс старается не отставать в этом плане и внедряет новые продукты. Лично мне особенно интересна версия pwa, как очень гибкий инструмент, не смотря на то, что придется делать маску из html-версии. Для новостных сайтов лучше использовать AMP для Google и Турбо для Яндекса. Отлично подойдет Турбо и для информационных сайтов, и интернет-магазинов. Ну а пока, большинство крупных конкурентов остаются на адаптивной версии сайта, как самой простой и не требующей особенных временных затрат.