Мобильная адаптация сайта

адаптивный сайт

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

Мобильная адаптация является незаменимым инструментом SEO.

Если вас беспокоит эффективность своего проекта, то желательно знать основные причины в необходимости адаптировать сайт:

  1. Адаптация выступает фактором ранжирования, что рассматривалось 2015 году в феврале на официальном блоге Google.
    польза для продвижения от мобильной адаптации сайта
    Из представленных данных видно, что изменились позиция портала auto-offer.ru в Google как после той самой адаптации.
  2. Наблюдается уменьшение показателя отказов. После процедуры адаптации, показатель отказов на сайте уменьшился на 4,4%.
    уменьшение кол-ва отказов на мобильных устройствах
  3. Происходит увеличение конверсии. Она выросла на 1% с мобильного трафика.рост конверсии

 

Инструменты для нахождения ошибок мобильной адаптации сайта

Search Console

Search Console

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

Mobile-Friendly Test

Mobile-Friendly Test

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

Responsive.is

Responsive.is

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

Google Chrome

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

Google Chrome

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

Популярные ошибки неадаптированных сайтов

популярные ошибки адаптивного сайта

Область просмотра не настроена

Она возникает в случае невозможности настроить страницу сайта под размер окна в мобильном браузере. Из-за чего можно увидеть обрезанный текст, картинки или блок сайта. Решение проблемы: странички должны включать в контейнере именующемся head мета тег viewport, который сообщает, как надо осуществлять контроль масштаба и размера странички. В блоке «Руководство» есть рекомендации Google о настройках области просмотра.

Маленький размер шрифта

В результате чего невозможно прочитать тексты без масштабирования. Еще одна проблема – трудности перехода по ссылке в само меню. Все это затрудняет навигацию сайта. Лучше всего ставить 16 пикселей как базовый размер шрифта. Присутствуют рекомендации о способах настройки шрифтов.

Интерактивные элементы расположены очень близко

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

Использование Flash

Многие мобильные браузеры не могут поддерживать воспроизведения Flash-контента. Вариантом заменителя выступает HTML-5.

Виды сайтов

виды адаптивных сайтов

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

Google советует использовать данный вариант. Плюс в том, что вход на сайт адаптивного дизайна, абсолютно, с любого устройства (ПК либо смартфон) пользователь получает от сервера единственный ответ, такой же HTML-код, а вот элементы сайта видоизменяются при помощи стилей CSS. Все это помогает обойти стороной ошибки в индексировании именно сайта при его продвижении. В свою очередь, неизмененный URL дает шанс более удобно делиться контентом.

Динамический показ

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

Отдельный домен с мобильной версией

Применяя этот способ, создается отдельный сайт специально для версии мобильного устройства: m.site.ru, mobile.site.ru и т. д. Тут необходимо быть предельно осторожным, ведь поддомен имеет такую структуру, как контент (чаще всего, упрощенный), так что по умолчанию создаются страничкы с таким же содержимым, т. е. копии, которые отрицательно влияют на поисковом продвижении. Важно правильно расставлять теги rel=»canonical», а также rel=»alternate» на главном и мобильном домене, для того, чтобы Google правильно определял, где находится оригинал странички, а где копия.

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

Реализовать сайт возможно и другими вариантами. Можно в подпапке сайта site.ru/m/ или отдельно для каждого устройства создать индивидуальный дизайн. Таким образом удобно производить контроль конверсии сайта в целевом сегменте: создав индивидуальный дизайн для каждой индивидуально версии сайта, проще подстроиться под публику.

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

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

Мобильная адаптация сайта
Мобильная адаптация сайта согласно требованиям Google к адаптивным сайтам. Адаптация сайта в Челябинске.
Brand: d`Sant
Manufacturer: d`Sant
Model: mobile frendly
4.1 based on 14 reviews
$195.00 New