Оптимизация сайта под мобильные устройства. 10 самых важных моментов

Оптимизация сайта под мобильные устройства – неотъемлемая часть SEO-продвижения. Ежегодно объем мобильного трафика вырастает порядка на 50–60%. Помимо этого, оптимизация под мобильные устройства влияет на ранжирование в поисковых системах. Приоритет при выдаче в Яндекс или Гугл отдается мобильным версиям сайта, это влияет на попадание в ТОП. Поэтому сегодня мы будем искать ответ на вопрос, как оптимизировать сайт под мобильные устройства, давайте приступим.

Основным методом мобильной оптимизации сайтов является создание адаптивного дизайна, а также наличие копии сайта на отдельном шаблоне или поддомене. Ниже рассмотрим подробнее.

Как оптимизировать сайт под мобильные устройства: создание адаптивной верстки

Ярко выраженным плюсом адаптивной верстки является то, что нет необходимости оптимизировать сразу обе версии сайта: десктопную и мобильную. При входе с телефона или компьютера запросы поступают на один и тот же сервер, который отправляет пользователю один и тот же HTML-код. Отображаемая на сайте информация подстраивается под разрешение экрана с помощью CSS. Сейчас существуют шаблоны, которые сами выполняют всю сложную работу и сразу оптимизируют мобильную версию сайта, одним из таких шаблонов является Root. Такой шаблон решит большинство всех вопросов по оптимизации вашего сайта под мобильные устройства.

Такая функциональность создается с помощью технологии CSS3 Media Queries или CSS-фреймворков. Это своеобразный свод правил CSS, помогающих в управлении стилями элементов на сайте в зависимости от устройства входа. Это обеспечивает одинаковый дизайн и функциональность сайта при входе с любого устройства. Изменения претерпят только расположение, размер, немного будет различаться внешний вид значков на странице по вертикали.

Beget лучший хостинг по мнению экспертов сайта

Преимущества адаптивной верстки

• Один URL для всех версий сайта.
• На странице нет ничего лишнего.
• Правильное отображение страниц на всех устройствах.

Недостатки адаптивной верстки

• Долгая загрузка страниц, если имеются: видео, анимации и т. д.
• Сокращенная информация при отображении страниц на смартфонах.

Способы оптимизации адаптивной верстки

Создание интернет магазинов или веб-сайтов с множеством страниц с адаптивной версткой – стандартная процедура. Адаптивный сайт должен иметь дизайн, который «подстроится» под любой браузер и экран любого смартфона.

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

Для качественного адаптивного дизайна потребуется:

• Изменить масштаб видео- и фото- контента через свойства CSS под размер экрана. В качестве изображения на сайте лучше всего применять картинки в формате SVG, поскольку векторная графика не меняет качество на худшее при изменении масштаба.
• Сделать более простой функциональность сайта. Для этого придется снизить число применяемых скриптов и масштабных изображений, перенести калькуляторы и расчет стоимости в корзину.
• Создать отдельные элементы на странице и размещать информацию в них: например, скрыть комментарии под отдельной кнопкой или добавить к товарам на сайте скрываемое описание.
• Пересмотреть и отредактировать меню сайта. Для больших веб-сайтов желательно скрыть пункты меню или реализовать Hamburger-меню. Важно! Желательно, чтобы на смартфонах с небольшой диагональю экрана не появлялась горизонтальная полоса прокрутки. С ней использовать сайт крайне неудобно.
• Особенно важно оптимизировать шрифты и рекламные блоки для корректного отображения элементов на любых диагоналях. Для этого может понадобиться размещение дополнительного скрипта на изменение числа отображаемых блоков на странице исходя из размера экрана гаджета. 

Как оптимизировать сайт под мобильные устройства: мобильная версия

Незаменимым вариантом оптимизации по праву считается создание мобильной версии. Это может быть запуск копии сайта на поддомене или создание нового шаблона. Сложностью оптимизации является настройка корректной связи между одинаковыми страницами полной и мобильной версий так, чтобы десктопная и мобильная версии не конкурировали между собой. С этой целью обе версии связываются в вебмастерах Google и Yandex. Можно прописать атрибуты rel=”alternate” и rel=”canonical”. С помощью этого роботы не смогут индексировать страницы обеих версий как повторяющиеся. Это предотвратит снижение позиций в поисковой выдаче.

Вариант с отдельным поддоменом

Наиболее сложный вариант. При заходе со смартфона сервер выполняет переадресацию пользователя на другой поддомен с мобильной версией сайта. Следовательно, на десктоп и мобильные гаджеты будут транслироваться отличающиеся HTML-код и создаваться новые URL-адреса для каждой страницы сайта. Это довольно устаревший метод, поэтому уже применяется не так часто, хотя имеет место быть.

Огромным (и, пожалуй, единственным) плюсом мобильной оптимизации сайта посредством создания версии на поддомене служит быстрая загрузка. Огромным недостатком будет являться изменение URL-адресов и необходимость дальнейшей настройки взаимосвязи версий.

Версия на отдельном шаблоне

Одним из способов оптимизации дизайна страниц под мобильные устройства является копия сайта на отдельном шаблоне. В этой ситуации URL-адрес остается одинаковым при входе с любого гаджета, но изменения претерпевает HTML-код. При заходе пользователя на сайт сервер определяет, с какого устройства был осуществлен вход и отправляет соответствующую версию страницы.

Если вы хотите купить себе новый сайт или продать свой сайт, то вам однозначно сюда:
Telderi.ru (продажа и покупка сайтов)

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

Главные требования поисковых систем к мобильным страницам:

• Нет тяжеловесных элементов. Многие плагины снижают скорость загрузки загрузку страницы и могут неправильно отображаться на различных смартфонах. Помимо этого, необходимо отключить неиспользуемые скрипты. Особенно важно, чтобы страницы загружались на мобильных устройства не более 3х секунд.
• При адаптации сайтов под маленькую диагональ экрана помните о том, что шрифт и фотоконтент должны соответствовать размеру смартфонов, не забудьте уделить внимание полосе прокрутки. Все ссылки в мобильной версии должны оставаться кликабельными.
• Уделите время рекламным блокам. Убедитесь, что реклама не закрывает информацию на странице. Уменьшите число рекламных блоков, уберите всплывающие окна, баннеры.
• При создании сайтов с оптимизацией под мобильные устройства часто приходится снижать функциональность, упрощать интерфейс или дизайн страниц. Тогда предоставьте пользователям возможность использования полной версии сайта.

Как оптимизировать сайт под мобильные устройства

Раньше до появления адаптивных шаблонов, таких как Root, сайт размещали на отдельном поддомене m.site.ru.

• При создании мобильной версии не забудьте связать страница сайта с десктопными особыми атрибутами. Понадобится на мобильных страницах настроить тег <link> с элементом rel=”canonical”, направляющим на страницу для ПК А на десктопных страницах — с элементом rel=”alternate”, указывающим на мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel=”alternate” можно также с помощью разработанных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

• Настройка переадресации. Не забудьте настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать время при загрузке страницы. Скрипт работает таким образом: если минимальная ширина экрана устройства равна конкретному числу в пикселях, то нужно перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом перенаправит пользователя на подходящую версию.

Создание адаптивной версии сайтов

URL и HTML-код страниц одинаковые на мобильной и полной версии сайтов, изменения претерпевает только CSS. Это размеры и расположение элементов на странице в зависимости от размера экрана гаджета.

• Подтвердите разрешение на сканирование Googlebot CSS, JS, изображения на страницах.
• При реализации адаптивной версии нужно обязательно настроить тег meta name=”viewport”.

Метатег транслирует браузеру информацию о величине экранасмартфона. В соответствии с этими данными браузер строит модель CSSOM. 

AMP (как оптимизировать сайт под мобильные устройства)

Accelerated Mobile Pages система Google для скоростной работы мобильных версий сайта. Желательно применение AMP для информационных и новостных сайтов, для блогов. Стандартная AMP загружается меньше чем за секунду, поэтому UX быстрых страниц значительнее, чем на обычных. Для этого подразумевается полный отказ от JS пользователя. Не читаются конкретные HTML-теги, страницы транслируются по одному шаблону, не показаны виджеты. Для автонастройки AMPлучше применять специально разработанные плагины для часто используемых CMS.

На AMP-страницах отсутствует вариант реализации необходимых функциональныхъ элементов: гнавигация, внутренний поиск, блоки перелинковки, виджеты социальных сетей, дополнительная перелинковка в футере.

«Яндекс» не поддерживает AMP иатрибут rel=”canonical”. По этой причине даже быстые, ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt , применив метатег robots или посредством HTTP-заголовка X-Robots Tag.

Яндекс.Турбо (как оптимизировать сайт под мобильные устройства)

Турбо-страницы разработаны «Яндексом» для создания ускоренных страниц при наличии медленного интернета. Высокая скорость загрузки получается за определенного шаблона создания страниц, JS пользователя при этом вовсе не применяется. Сделать идентичными с полной версией сайта мобильные страницы можно, используя CSS. Включить Турбо нужнго в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно осуществлять внутренний поиск (с переходом на десктопную версию), покупку в один клик и с корзиной.

Основное отличие «Яндекс.Турбо» от AMP состоит в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит применить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Тем не менее, Турбо и AMP не заменят адаптивные и динамические сайты.

Монетизация сайта: зарабатываем на ссылках

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

PWA (как оптимизировать сайт под мобильные устройства)

Если вы уже обладаете оптимизированной мобильной версией сайта, то используйте еще одну дополнительную опцию. С помощью нее можно угодить пользователю.

PWA — разработка Google, которая транслирует сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.

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

PWA реализуется в рамках TLS — безопасного протокола соединения, поэтому по умолчанию любое прогрессивное веб-приложение является безопасным.

Преимущества: возможность отправки push-уведомлений пользователю, установившему сайт-приложение.

Продвигаем сайт в соц. сетях. Как оптимизировать сайт под социальные сети

Как проверить оптимизацию сайта под мобильные устройства

Проверить, оптимизирован ли сайт для мобильный устройств, можно посредством инструментов Google и Яндекс.

1. PageSpeed Insights

PageSpeed Insights — опция, разработанная Google для проверки скорости загрузки страницы. Что касается оптимизации, увеличение скорости загрузки сайта и его версий –одна из основных задач. В PageSpeed можно узнать информацию об визуальном контенте, который нуждается в оптимизации, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

2. Google Mobile Friendly Test

Это инструмент, направленный на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не спешите покидать ресурс. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

Там будет информация о страницах, которые Googlebot не смог загрузить. Обратите внимание на стили и скрипты, которые заблокированы для робота Google, по возможности откройте их для сканирования.

3. Яндекс.Вебмастер. Проверка мобильных страниц

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

Вывод о том как оптмизировать сайт под мобильные устройства

• Адаптивный дизайн — идеальное на сегодняшний день решение, не вызывающее необходимость настроек переадресации клиентов между десктоп и мобильной версиями, а также не требующее изменения исходного кода. При разработке сайта с нуля лучше выбрать вариант с адаптивным дизайном.
• Мобильная оптимизация сайта на отдельном поддомене — запуск оптимизированной версии на отдельном поддомене целесообразен для крупных проектов с большой аудиторией. Например, для социальных сетей, интернет-магазинов или сайтов-агрегаторов. Отдельная версия позволит сохранить традиционный дизайн сайта или сохранить его функциональность в десктоп-версии.
• Разработка на отдельном шаблоне — подобное решение позволяет избежать изменения URL-адресов сайта. Данный вариант оптимально подходит для крупных многостраничных сайтов, которым разработка нового адаптивного дизайна может быть нецелесообразна.