как сайт оптимизировать под телефон

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

По уровню материал близок к основам, поэтому будет полезен начинающим специалистам.

В статье:

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

В 2020 году мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, а до конца 2020 обещает перевести на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

Мобильная версия

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

Основная и мобильная версии поисковыми роботами воспринимаются и индексируются отдельно. На страницах основного сайта должны быть указаны URL мобильной версии, к примеру, с помощью link:

Мобильная и полная версия на смартфоне

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

Минусы: придется оптимизировать и администрировать версии отдельно, тратить больше ресурсов, настраивать редиректы. Разработка мобильной версии стоит дороже адаптива.

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

Сайт один, интерфейс подстраивается под разрешение экрана гаджета, для всех устройств один URL. Область просмотра контента устанавливают тегом Viewport:

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

Версия без адаптации и с адаптацией для мобильного

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

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

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

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

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

У вашего сайта должен быть реализован удобный просмотр на мобильных. Способ выберите в зависимости от ресурсов и потребностей. Для мобильной версии указывают URL в коде основных страниц, для адаптивного шаблона устанавливают область просмотра тегом Viewport.

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

Проверить коды ответов сервера и найти ошибки можно с помощью проверки внутренних страниц в Анализе сайта.

Проверка внутренних страниц

4. Поддержка всех технологий

Нет Flash-элементов, Java-апплетов и Silverlight-плагинов — эти технологии тормозят загрузку и могут не поддерживаться на мобильных, поэтому рекомендуем отключить их и встраивать контент с помощью HTML5. Тяжелый интерактив нужно облегчить или отказаться от него ради быстрой загрузки.

5. Быстрая загрузка

Пользователи с мобильных устройств могут подождать на пару секунд дольше, чем с десктопа, но чем быстрее загрузится страница, тем меньше вероятность, что ее закроют. Поисковые системы тоже не любят медленные сайты, к примеру, из-за алгоритма Google Speed Update сайты с медленной загрузкой теряют позиции в выдаче.

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

Для ускоренного просмотра можно подключить страницы AMP от Google или Турбо от Яндекса: оптимизаторы спорят о всех за и против, так что можно попробовать на своем сайте и отключить, если результат не понравится.

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.

Иконки сайтов на экране смартфона

7. Только вертикальная прокрутка

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

8. Крупные значки

Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.

Крупные элементы на сайте

9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Текст на странице с рецептами

10. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

Фрагмент работы с инструментом

11. Всплывающие окна не закрывают контент

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

Иконки мессенджеров убраны под панель

12. Упрощенная регистрация

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

Быстрая регистрация

13. Использование геоданных

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

Автозаполнение города

14. Упрощенная связь с компанией

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

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

Экспорт номера телефона в журнал вызовов

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

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

Инструмент от Google, проверяющий оптимизацию сайта для мобильных устройств.

Фрагмент результатов проверки

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Проверка в SERP

Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

Фрагмент результатов проверки

Вебмастер Яндекса тоже предлагает проверку на мобилопригодность и выводит краткий список необходимых параметров.

Фрагмент результатов проверки

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

Источник

Способы адаптации сайта для мобильных устройств

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

Три способа адаптации сайта

Вот сравнительная таблица способов адаптации сайта для экранов разных размеров.

Конфигурация	URL остается неизменным	HTML остается неизменным
Адаптивный дизайн
Динамический показ
Разные URL

Адаптивный дизайн. Сервер отправляет один и тот же HTML-код всем устройствам (компьютерам, планшетам, мобильным телефонам, невизуальным браузерам), но сайт отображается по-разному в зависимости от размера экрана. Google рекомендует использовать адаптивный дизайн, поскольку с ним проще всего работать.

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

Разные URL. Для разных типов устройств используются разные варианты кода и разные URL. Система пытается определить тип устройства пользователя, а затем перенаправляет на нужную страницу при помощи переадресации HTTP и HTTP-заголовка Vary.

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

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

Обязательные действия

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

Особенности разных устройств

Мобильные устройства. В этом документе под мобильными устройствами понимаются смартфоны iPhone, а также работающие на операционных системах Android и Windows. Мобильные браузеры, как и компьютерные браузеры, поддерживают большое количество функций HTML5, но их окна меньше и обычно по умолчанию используется вертикальная ориентация.

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

Мультимедийные телефоны. Браузеры этих устройств могут отображать страницы, соответствующие стандартам XHTML, поддерживают разметку HTML5, JavaScript и ECMAscript, но могут не поддерживать некоторые API расширений в стандарте HTML5. Сюда относятся телефоны, способные принимать сигналы сетей 3G и не являющиеся смартфонами.

Мобильные телефоны среднего класса. Их браузеры не могут показывать обычные веб-страницы со стандартным HTML-кодом. В частности, это браузеры, которые поддерживают только cHTML (iMode), WML, XHTML-MP и т. д.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Источник

Мобильный поиск это не то, что будет актуально в будущем. Это то, что важно уже сейчас. Google работает над разделением стационарного и мобильного индекса. И мобильный будет главным.

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

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

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

Это не просто мобильные устройства, а конкретно смартфоны. Мы любим смартфоны! Они используются чаще, чем компьютеры, ноутбуки и планшеты.

С учетом всего этого, имеет смысл оптимизировать сайт под мобильные устройства. Но как именно это сделать?

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

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

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

1. Использование разметки Accelerated Mobile Pages (AMP)

Теперь в результатах поиска пользователи могут прокручивать блок с моего сайта, чтобы увидеть больше контента веб-страницы.

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

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

Вы уже поняли, почему AMP важен? Этот формат предназначен для того, чтобы отсеять с мобильных страниц ненужную мишуру и сосредоточиться на необходимых компонентах.

Google и другие поисковые системы, таким образом, подталкивают веб-разработчиков к тому, чтобы они создавали более простые проекты с меньшим временем загрузки.

Существует три компонента, которые необходимы для внедрения AMP в структуру сайта:

AMP — не единственный прием, позволяющий оптимизировать отображение мобильного контента. Google также активно использует разметку Schema.org в мобильном поиске.

2. Внедрение разметки Schema.org

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

Но это не единственное преимущество. Посмотрите на результаты поиска по запросу “ food subscription boxes ”.

В то же время средняя цена за клик в этом сегменте PPC составляет почти 6 долларов.

Использование новейших технологий для оптимизации сайта под мобильную выдачу вместо того, чтобы тратить деньги на PPC-рекламу — это всегда выигрышная стратегия.

3. Выбирайте адаптивный веб-дизайн

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

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

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

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

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

Но на мобильных устройствах эта информация должна отображаться вертикально.

4. Сжатие изображений

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

Я добавляю как минимум одно изображение на каждые 100 слов в посте. Фактически, большая часть моих ежемесячных расходов уходит только на изображения. Хотя нам нужны высококачественные изображения, важно, чтобы они имели небольшой вес.

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

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

5. Удалите Flash

В первые годы расцвета интернета технология Adobe Flash был на пике популярности. Анимированные сайты создавались с помощью сложных конструкций. Но, в конце концов, они стали слишком громоздкими.

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

6. Проверьте мобильную версию своего сайта

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

Контент страницы также может быть слишком растянут по вертикали.

Когда наиболее релевантная информация следует за изображением, скорее всего, она будет прочитана. Это идеальное место для CTA-элемента или кнопки « Купить «.

7. Воспользуйтесь бесплатными инструментами Google

Существует много поисковых систем, но Google остается главной. Он удерживает 77,43% рынка поиска. Ежедневно поисковик обрабатывает 6586 013 574 запросов!

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

Вот как выглядит мой сайт.

Это отличная отправная точка для определения того, что вы делаете правильно, а что неправильно.

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

В прошлом году Google Analytics даже был специально обновлен, чтобы включить в него более подробную информацию о мобильных устройствах.

Перейдя в раздел « Мобильные устройства → Устройства «, можно получить более подробную информацию о том, с каких устройств люди заходили на мой сайт.

8. Ускоряйте все и вся

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

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

Это означает, что если хотите высоко ранжироваться, вам нужен более быстрый сайт.

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

Еще один отличный способ увеличить скорость загрузки сайта — это минимизировать код.

Вот еще несколько приемов, которые стоит использовать:

9. Добавление тегов для постов на основе мобильных поисковых запросов

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

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

При оптимизации сайта под мобильные устройства теги можно добавлять в WordPress в разделе « Записи — Теги » или в отдельных записях.

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

Это также удваивает потенциальный охват аудитории! Кроме этого мы закрываем пробелы, которые могли бы использовать конкуренты, чтобы обойти нас.

— еще один аспект, в котором мобильный поиск отличается от стационарного. В мае 2016 года Google увеличил количество символов в тайтлах, отображаемых на страницах поисковой выдачи, до 78 для мобильных устройств ( против 70 для стационарных ). Это дает нам 8 дополнительных символов.

На рисунке, приведенном ниже, видно, как отображается товар с Amazon в результатах поиска на компьютере.

Фактически он обрезается до 60 символов, так как вместе с многоточием в 70 символов вписывается ограниченное количество полных слов. Вот тот же товар в результатах поиска на мобильном телефоне.

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

В этом примере ключевое слово “ Costume ” имеет значение, и тот, кто создавал тайтл, не понимал, что оно будет усечено в десктопной поисковой выдаче.

10. Удалите с мобильного сайта всплывающие окна

Всплывающие окна попали под прицел Google в августе 2016 года. Тогда поисковый гигант объявил о новом алгоритме поиска. Он будет наказывать сайты со всплывающими окнами, которые могут быть слишком навязчивыми для мобильных устройств.

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

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

Заключение

Мобильные устройства использует большее количество людей, и объем времени, которое мы тратим на мобильный поиск, растет стремительными темпами.

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

Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, лайки, отклики!

Источник