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

Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters , то возможно у него появилась пометка «Сайт не оптимизирован для мобильных устройств». Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.

Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights .

Указываем адрес сайта и жмем кнопку «Анализировать». Видно, что для этого примера степень удобства для мобильных пользователей оценивается в 69 процентов, и кроме того, есть сообщение «Возможно, страница не пройдет проверку удобства просмотра на мобильных устройствах».

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

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

Нажимаем ссылку «Как исправить» и видим следующий текст о необходимости указания тега viewport.

По ссылке «Настройте область просмотра» приведена , разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:

< meta name = viewport content = "width=device-width, initial-scale=1" >

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

Видим рост с 69 до 80%.

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

Далее смотрим проблему в красной зоне «Адаптируйте размер контента для области просмотра». Проблема заключается в том, что гугл делает проверку для устройства шириной в 375 пикселов, а размер некоторых элементов сайта превышает этот показатель.

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

#wrapper { width: 1000px; }

#wrapper { width : 1000px ;

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

Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:

#wrapper { max-width: 1000px; width: 100%; }

#wrapper { max - width : 1000px ; width : 100 % ;

Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).

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

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

Viewport

Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.

meta viewport выглядит примерно так:

Meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;">

initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,

maximum-scale указывает максимальное значение увеличения страницы сайта.

Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.

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

Встроить Media Queries можно прямо в шаблон страницы:

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

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

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

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

Владельцы продукции компании Apple – IPhone или IPad могут добавлять иконки сайтов на главный экран. Добавить иконку сайта для продукции Apple не составит труда.

Реализовать отображение иконки с помощью следующего кода:

Данный код необходимо вставить в раздел head. При этом необходимо добавить изображение иконки в корень сайта. Название файла должно начинаться с фразы apple-touch-icon-.

Экран заставки

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

Добавить заставку можно путем вставки следующего кода в шапку сайта:

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

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

Трафик мобильных устройств в Рунете на 2017г. по данным Digital Report составляет 75%, а в 2018г. повысится до 79%.

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

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

• Как узнать, нужно ли заказывать мобильную оптимизацию сайта прямо сейчас?
• Как самостоятельно проверить mobile-friendly свойства и показатели веб-проекта?
• Насколько готов ваш сайт/магазин к приему mobile-трафика?

Мобильная оптимизация сайта: 5 бесплатных тестов

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

1. Нужна ли вам mobile-оптимизация прямо сейчас.
2. Насколько удобно вашим mobile-клиентам.
3. Какие ошибки скрывает ваш сайт.

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

Мы одновременно работаем с десктопной и mobile (адаптивной) версией, чтобы по максимуму раскрутить сайт или интернет-магазин в ТОП-10, привести к вам покупателей.

Степень оптимизации мобильного сайта отображается в 2-х параметрах:

• Mobile Friendless (дружественность, юзабилити - 96/100)
• Mobile Speed (скорость - 53/100)

В примере выше протестированный сайт 100% нуждается в мобильной оптимизации скорости. Зато с адаптивностью (удобством) все хорошо. На скриншоте видно, что проекту также требуется ускорение десктопной версии (Desktop Speed - 66/100).

Если тест покажет «красные» или «желтые» цифры в отчете, срочно исправьте ошибки.

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

Посмотреть текущий процент mobile-трафика можно в статистике Яндекс.Метрики :

Отчеты -> Стандартные отчеты -> Технологии -> Устройства

В этом примере квартального отчета 64,9% общего трафика приходится на ПК (десктопные персональные компьютеры), а остальные 35,1% - это мобильные переходы:

• смартфоны - 31,6%
• планшеты - 3,5%

Если mobile-трафик более 10%, то мобильная оптимизация сайта в результате повысит продажи. Но полное отсутствие мобильных визитов - проблема...

Нулевой mobile-трафик свидетельствует о серьезных ошибках. Вероятно ваш web-проект:

• не прошел мобильную оптимизацию
• теряет mobile-клиентов и прибыль
• имеет низкую конкурентоспособность в мобильной выдаче поиска Яндекс и Гугл

Чтобы оценить тенденции роста mobile-визитов с течением времени и на перспективу, нужно слегка перестроить отчет Яндекс.Метрики.

Выберите на той же странице отчета период - «ГОД» и отображение - «Линии» или «Области»:

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

Учтите, что конкуренты не спят!

Если конкурентные сайты лучше подготовлены к мобильным визитам, заточены под mobile-трафик, удобны и быстры в эксплуатации, вы теряете клиентов и деньги. Даже 10% мобильного трафика - существенная коммерческая величина, которой нельзя пренебрегать.

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

5. Аудит мобильной оптимизации сайта

Самый простой способ проверить ваш веб-ресурс на готовность к mobile-визитам - заказать аудит в нашей компании «ОПТИМИЗАТОР». В этом случае вы:

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

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

Из чего состоит мобильная оптимизация сайта

1. Работа с ключевыми словами

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

2. Оформление

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

• шрифты и стили
• блоки и модули
• цвета и фоны
• структура и навигация
• меню и виджеты
• поля и отступы

3. Ускорение

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

4. ГЕО-параметры

Поисковые системы в mobile-выдаче для платформ Android и iOS учитывают ГЕО-локацию, показывают пользователям ближайшие предложения по их региону. Мобильная оптимизация сайта невозможна без настройки GEO-параметров.

Как минимум, нужно добавить проект в популярные ГЕО-сервисы, справочные службы Яндекса и местные карты типа 2GIS.

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

6. Mobile-юзабилити

Нужно определить, насколько удобен ваш бизнес-проект при открытии с мобильных устройств. Для приема и обслуживания mobile-клиентов есть только 2 решения:

− Адаптивная верстка (дизайн автоматически подстраивается под разные экраны гаджетов) или...

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

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

Ведь это не очень дорого, а все расходы окупятся в ближайшие 2-3 месяца. Жмите кнопку и вперед - к высоким продажам!

Всем-всем привет!

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

Объясняется данный факт тем, что именно два года назад (на момент написания статьи — 2017 год) поисковая система Google начала учитывать адаптивность сайтов под моб. устройства. Если же веб-ресурс некорректно отображается на смартфоне, то он понижается в выдаче. А терять в среднем 17% трафика мало кому хочется. Позже к этому подключился и Яндекс.

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

Для чего нужна оптимизация сайта для мобильных устройств?

Многие рекламодатели и владельцы сайтов задаются вопросом — зачем мне оптимизировать сайт под мобильные устройства? Как я уже сказал, с 2015 года поисковые системы начали обращать на данный момент особое внимание. И если игнорировать его, то можно с легкостью получить пессимизацию со стороны ПС, в результате чего теряется часть трафика. Особенно так любит делать Google.

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

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

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

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

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

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

В противном случае:

Как сделать мобильную версию сайта?

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

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

1. С использованием специальных плагинов;
2. Работа с кодом сайта.

Каждый имеет свои плюсы и минусы, о которым мы поговорим прямо сейчас.

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

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

Умные люди, разработчики решили максимально упростить процесс создания мобильной версии сайта для незнающих путем создания специальных плагинов — дополнений к «движку». Одним из таких является плагин WpTouch, который позволяет создать «мобильный» сайт за день (грубо говоря), при этом с кодом Вам дело иметь не придется.

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

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

Самым оптимальным вариантом будет использование уже готовых адаптивных решений из базы шаблонов (тем) WordPress. Поступив таким образом, Вы не только облегчите себе жизнь, но и сэкономите на услугах программистов-верстальщиков.

Адаптивная верстка сайта посредством работы с кодом

Работа с кодом сайта — это дело сложное, а создание адаптивной версии веб-ресурса еще сложнее. В своей практике пытался создать два мобильных сайта, но полностью реализовать их не получилось. В первом случае была попытка создать мобильный сайт на поддомене типа m.site.ru : у меня получилось сделать более-менее нормальную верстку, расставить все блоки по нужным местам, сделать текст читабельным. Короче говоря, мобильный сайт я создал, но проблема крылась в другом.

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

Во втором случае, я создавал сайт для интереса (мне очень интересно писать код), который я пытался сделать адаптивным при помощи каскадных стилей CSS. У меня получилось, но дальше разработки сайт дело не ушло.

Хочу отметить, что создание адаптивной верстки при помощи CSS является отличным вариантом, ведь: не нужно создавать отдельный сайт и заливать его на отдельный поддомен и не нужно возиться с редиректами. Достаточно просто использовать директивы @media. Их еще называют Media Queries:

@media screen and (max-width: 1025px) { Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана меньше 1025px } @media screen and (max-width: 760px) { Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана меньше 760px }

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

Вот пример из моих стилей для конкретных элементов:

@media screen and (max-width: 991px) { /*Все стили используются для баннера в шапке сайта на страницах статей и заголовка на главной*/ #banner-head { margin-top:80px; } .box-wrapper h1{ margin-top:150px !important; } } @media screen and (max-width: 840px) { #banner-head { margin-left:60px; } } @media screen and (max-width: 801px) { #banner-head { margin-left:40px; } } @media screen and (max-width: 786px) { #banner-head { margin-left:20px; } } @media screen and (max-width: 765px) { #banner-head { margin-left:5px; } } @media screen and (max-width: 757px) { .box-wrapper h1{ font-size:32px !important; } } @media screen and (max-width: 750px) { #banner-head { display:none; } } @media screen and (max-width: 539px) { .box-wrapper h1{ font-size:28px !important; } } @media screen and (max-width: 480px) { #banner-head { visibility: hidden; display:none; } } @media screen and (max-width: 471px) { .box-wrapper h1{ font-size:24px !important; } } @media screen and (max-width: 407px) { .box-wrapper h1{ font-size:22px !important; } } @media screen and (max-width: 375px) { #banner img{ width: 100% !important; } } @media screen and (max-width: 370px) { .box-wrapper { width: 380px !important; } .box-wrapper h1{ margin-left:-15px !important; } } @media screen and (max-width: 357px) { .box-wrapper h1{ font-size:20px !important; } } @media screen and (max-width: 345px) { .box-wrapper h1{ margin-left:-25px !important; } } @media screen and (max-width: 338px) { .box-wrapper{ margin-top:-50px; } .box-wrapper h1{ margin-left:-35px !important; } .sep{ margin-left:-20px !important; } }

Мета-тег Viewport

Если же Вы не хотите создавать отдельную мобильную версию или прописывать директивы @media в CSS-стилях, то есть еще один способ, при котором Ваш сайт будет более менее отображаться на «мобилках» — использование мета-тега Viewport.

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

Устанавливается данный мета-тег в пределах тегов и имеет следующий вид:

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

1. Использование специальных плагинов для Вашей CMS;
2. Использование поддомена типа m.site.ru с мобильной версией сайта;
3. Использование Media Queries в CSS;
4. Использование мета-тега Viewport.

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

Ну а на этом все, дорогие друзья!

До скорых встреч!

Предыдущая статья
Следующая статья

Проверьте себя, все ли вы делаете для высокого ранжирования в мобильной выдаче?

Содержание статьи:
-
-
-
-
-
-
-

1. Специфика мобильной оптимизации

Мобильная оптимизации имеет свои особенности и сложности, состоящие в том, что удобство и простота взаимодействия пользователя с сайтом является самым важным показателем качества мобильного сайта. Кроме того, результаты мобильного поиска локализированы, то есть привязаны к местоположению пользователя, поэтому мобильный трафик, зачастую, это региональный трафик. Также несколько усложняет мобильную оптимизацию, тот момент, что частотность запросов в мобильном поиске отличается от частотности в обычном поиске и статистику запросов мобильной выдачи приходится собирать отдельно, таким образом и семантическое ядро мобильной версии сайта будет отличаться. Кстати, проверить частоту запросов в мобильной выдаче можно с помощью Yandex.Wordstat . А проанализировать список запросов в мобильной выдаче поиска, по которым ваш сайт показывается в мобильной выдаче, вы можете с помощью Google Webmaster Tools и Google Analytics.

Как проверить мобильность сайта?

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

• Основной инструмент - Page Speed Insights – не только проверяет лояльность сайта к пользователям мобильных, но и дает рекомендации по ускорению и оптимизации сайта под мобильные.
• – с помощью это инструмента вы сможете увидеть как мобильный робот поисковой системы Google видит ваш сайт.
• - внутренний сервис поисковой системы, проверяющий насколько ваш сайт соответствует требованиям мобилопригодности.
• TestMySite - внешний сервис, красиво и наглядно проверяет мобайлфрендли, мобильную скорость сайта и скорость загрузки на десктопных устройствах.
• W3 mobile checker - инструмент для веб - разработчиков, которые хотят сделать свои веб - страницы или веб - приложение лучше работающим на мобильных. Пока находится на доработке.
• Resizer - интерактивная программа просмотра, которая помогает дизайнерам тестировать контент сайта на настольных компьютерах, мобильных и планшетах
• Quirktools - сервис для просмотра сайта на разных устройствах: мобильных, планшетах, компьютерах и даже телевизорах.
• Проверка мобильных страниц в Яндекс.Вебмастер – также проверяет лояльность сайта к мобильным пользователям

3. Какие особенности различных способов мобильной оптимизации?

• Мобильная версия - когда и URL, и код изменяются. Сервер определяет тип устройства, а потом перенаправляет на нужную страницу - m.site.com (для смартфонов), t.site.com (для планшетов), phone.site.com – для телефонов попроще. Для разных типов устройств используются разные варианты кода и разные URL страниц.
Плюсы: в альтернативную мобильную версию легко вносить правки, не затрагивая основной сайт; простота и удобство для пользователей, быстрая загрузка.Минусы: отличающийся от основного URL, есть вероятность дублирования контента и 404 ошибки, упрощение функционала ведет к ограничению нужного контента.
• Динамический показ (RESS - Responsive Design + Server Side) - один URL, разный код под разные user-agents. Сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. Какой именно код отправлять, определяется за счет сканирования поисковым роботом, размещенного HTTP-заголовка Vary, который помогает выбирать именно тот контент на сайте, который оптимизирован для мобильных.
Плюсы: ненужные JavaScript можно удалить из HTML; можно настроить для каждого устройства свою верстку и свои приложения. Минусы: сложный в разработке и не отработанно до конца определение типов мобильных устройств.
• Адаптивный дизайн - когда URL и код не изменяются. Сервер отправляет всем устройствам и мобильным, и десктопным одинаковый HTML- код, который адаптируется в зависимости от размеров экрана с помощью CSS. В этом случае, нужно проследить, чтобы были открыты для индексации нужные файлы CSS, JavaScript и изображения.
Плюсы: относительно легкий в разработке и то что URL не изменяется.Минусы: медленная скорость загрузки и безальтернативность.

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

GOOGLE: В инструкциях говорится о том, что система не отдает предпочтения каким-либо типам адаптации, но адаптивный дизайн все-таки выделяет как рекомендованный, хотя на первый взгляд в ТОП5 моб. выдачи 3-и из 5-ти - сайты с мобильной версией, однако это единичное наблюдение просто имеющее место быть и не претендующее.

В ЯНДЕКСе алгоритм ранжирования мобильной выдачи «Владивосток» определяет все виды оптимизации - и адаптивный дизайн, и мобильную версию, и RESS. Как и Google, Яндекс оставляет выбор за веб-мастерами, которые должны выбрать способ оптимизации самостоятельно. Но при этом сообщает, что в Рунете есть постоянная тенденция снижения количества мобильных версий и увеличения сайтов с адаптивным дизайном и RESS. Поэтому для того, чтобы выбрать для себя подходящий метод оптимизации, рекомендуется определить, какие именно задачи должен выполнить пользователь с помощью своего мобильного устройства на вашем сайте. Размышления вместе с Google и обсуждение в Клубе о поиске Яндекса помогут детально сопоставить все плюсы и минусы различных способов реализации мобильных версий сайтов и выбрать именно тот, который больше всего подойдет вашему сайту и бизнесу.

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

<1> Скорость загрузки страницы, для мобильных пользователей важнее, чем для пользователей десктопов. Она не должна превышать 3-и секунды, однако страницы из мобильной выдачи на устройстве пользователя грузятся в среднем целых 22 секунды. Чтобы понять, как вы можете облегчить и сжать свой сайт, воспользуйтесь сервисом Page Speed Insights – в нем вы найдете подробные рекомендации по ускорению своего сайта под мобильные. А именно, сжатию или вынесению в отдельный файл JavaScript и CSS, анализатор дает их детальный список. Не забывайте, что можно использовать асинхронноую загрузку скриптов , чтобы пользователи не теряя времени и не уходя с вашего сайта во время загрузки скриптов в фоновом режиме.

<2> JavaScript, CSS и изображения нельзя блокировать. Проверить блокировку, вы можете в Google Search Console в разделе Индекс Google >> Заблокированные ресурсы. Блокировка JavaScript, CSS и картинок может привести к низким позициям в мобильной выдаче.

<3> Не должно быть «ошибок 404» на страницах, которые показываются мобильным веб-серферам. Бывает такое, что страница может нормально отображаться на десктопах, но выдает "ошибка 404" на смартфонах, например, или на планшетах. Проверить на наличие ошибок вы сможете с помощью программ Xenu, ScreamingFrog или с помощью Google Search Console в разделе Сканирование >> Ошибки сканирования.

<4> Если у вас мобильная версия, то для того, чтобы контент основной и мобильной версии не дублировался, нужно правильно настроить их индексацию. Если мобильная версия на поддомене попадает в обычную выдачу поисковиков, то не нужно создавать отдельный robots.txt и указывать: User-agent: * Disallow: / Лучше прописать на страницах m.site.com/page-1 следующий код - а на страницах основного сайта и поисковая система поймет, какой урл основной.

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

<6> Если на мобильной версии сайта есть анимация в формате Flash или видео с проприетарным проигрывателем, то нужно заменить их на теги HTML5, так как этот способ поддерживается всеми браузерами. Например, создать подобную анимацию можно с помощью Google Web Designer .

Вместо заключения

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

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

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