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

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

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

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


Мобильная оптимизации имеет свои особенности и сложности, состоящие в том, что удобство и простота взаимодействия пользователя с сайтом является самым важным показателем качества мобильного сайта. Кроме того, результаты мобильного поиска локализированы, то есть привязаны к местоположению пользователя, поэтому мобильный трафик, зачастую, это региональный трафик. Также несколько усложняет мобильную оптимизацию, тот момент, что частотность запросов в мобильном поиске отличается от частотности в обычном поиске и статистику запросов мобильной выдачи приходится собирать отдельно, таким образом и семантическое ядро мобильной версии сайта будет отличаться. Кстати, проверить частоту запросов в мобильной выдаче можно с помощью Yandex.Wordstat . А проанализировать список запросов в мобильной выдаче поиска, по которым ваш сайт показывается в мобильной выдаче, вы можете с помощью Google Web master 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 .

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

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

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

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

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

1. Тэг meta viewport — ширина страницы в мобильном браузере

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

Ниже хочу привести пример того, как обычно тэг meta viewport добавляется внутрь тэга.

@-viewport { width: device-width; }

Тэг meta viewport – это незаменимый тэг (вместе с Media Queries), если вы собираетесь разработать адаптивный веб-сайт. Однако технически вы можете использовать тэг и в неадаптивных дизайнах.

2. Media Queries

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

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

Вы можете встроить Media Queries либо напрямую в код страницы при помощи ссылки:

1 "screen and (orientation: portrait) and (min-width: 960px), projection" />

Либо использовать нужный код прямо в каскадных таблицах стилей (этот метод наиболее часто используется разработчиками).

3. Modernizr

Modernizr – это javascript-инструмент для определения способностей браузера/устройства. Браузеры отличаются друг от друга, и предлагает не идентичную поддержку свойств. При разработке веб-сайта для мобильных устройства, вы, возможно, захотите воспользоваться современными и удобными свойствами CSS3 и HTML5, которые, к сожалению, поддерживаются далеко не всеми браузерами (сегодня еще не все используют последние версии браузеров).

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

4. Сенсорное управление на сайте.

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

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

5. iOS иконки

Первое, что вы видите при разблокировке вашего iPhone (или iPad), – это иконки . Кроме иконок приложений, в iOS также можно видеть иконки вебсайтов, которые были добавлены на экран “Домой”.

Чтобы создать такую иконку и для вашего веб-сайта, просто добавьте следующую ссылку в раздел head в коде вашего сайта:

1 2 3 "touch-icon-iphone-retina.png" rel ="apple-touch-icon" sizes ="114x114" />

С другой стороны, вы можете просто удалить эти ссылки, только при этом убедитесь, что иконки сохранены в корневом каталоге и имеют приставку apple-touch-icon-* в названии.

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

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

Чтобы добавить такую заставку на ваш сайт, просто вставьте следующие строки в head.

1

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

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

7. Windows 8 иконки

Windows 8 и RT также предлагают возможность добавлять иконки в виде блоков на экране «Домой». В Windows 8 эти блоки называются Pin Icon.

В отличие от iOS, где используется элемента link, Windows 8 использует мета-тэг. Давайте посмотрим на пример.

1

Первый мета-тэг определяет цвет ячейки, второй отвечает за изображение иконки. Существует сайт под названием Build My Pinned Site, который позволяет вам без труда генерировать подобные мета-тэги.

В завершение

Революция мобильных устройств изменила то, как мы, веб-разработчики, создаем сайты. И теперь вам следует учитывать как минимум те компоненты, о которых мы сегодня говорили. Конечно же, если вам хочется, чтобы ваши сайты отлично смотрелись на устройствах, работающих на iOS и Windows 8.

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

После писем от 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.

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

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

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

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

В этой статье мы рассмотрим:

Как влияет адаптивность сайта на ранжирование в ПС

Позиция Google

В ноябре 2016 года в официальном блоге появилась информация о запуске Mobile-first index . Перевод фрагмента заявления в официальном блоге Google:

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

Если кратко – раньше при ранжировании сайта ПС Google использовала десктопную версию, теперь она будет опираться, прежде всего, на содержимое мобильной версии. О точной дате запуска представители Google не сообщили, известно, что сейчас Mobile-first индекс тестируется на ограниченной выборке. Однако уже сейчас рекомендуем проверить готовность сайта к его запуску.

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

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

Если есть отдельный мобильный сайт на поддомене, убедитесь, что весь важный контент и метаданные отображаются одинаково в десктопной и в мобильной версиях. Также важно удостовериться, что в обеих версиях сайта используется одинаковая семантическая разметка. Подробнее о подготовке сайта к Mobile-first index в Google Webmaster Central Blog .

Позиция Яндекса

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

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

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

1. Нет горизонтальной прокрутки. Горизонтальная прокрутка - первый симптом плохой адаптации сайта под мобильные устройства. Весь контент сайта (текст, изображения, кнопки, меню и т. д.) должен адаптироваться под размер экрана.

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

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

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

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

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

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

Динамическая подстановка контента

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

Преимущества : URL остаётся неизменным

Недостатки : сложная разработка и высокая стоимость поддержки. Ошибки при определении вида устройства: сервер может не распознать смартфон пользователя как мобильное устройство и откроет десктопную версию.

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

Сайт, который будет корректно отображаться на всех устройствах. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) или будут отображаться в более компактном виде.

Преимущества : URL остаётся неизменным, относительно лёгкий в разработке.

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

Подробнее о способах адаптации под мобильные устройства мы рассматривали в статье « ».

В феврале 2018 года ПС Google запустила новый формат ускоренных мобильных страниц AMP Stories . С его помощью веб-мастера смогут создавать публикации, состоящие из нескольких экранов с изображениями и видео.

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

Ограничение: нет доступа к коду, так как все страницы на серверах системы.

Вся информация о подключении доступна в панели Я.Вебмастера

Рисунок 7. Скриншот данных Я.Вебмастера

Убедитесь, что тексты и картинки хорошо читаются без увеличения

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

Сделайте большую кнопку

Сделайте возможность комфортно нажимать на кнопку как co смартфона, так и c планшета. Размер кнопки должен быть соответствующим человеческому пальцу.

Пользователь должен иметь возможность легко позвонить с сайта

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

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

Изображения товаров должны масштабироваться

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

Выберите правильный viewport

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

Уберите всплывающие окна

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

Заключение

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

Поэтому, если ваш сайт ещё не адаптирован под мобильные устройства – самое время это исправить!

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

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

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

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

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

Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.

Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу. Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).

Сообщение о том, что Ваш контент шире экрана

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

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

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

  1. Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
  2. Запишем размеры каждого медиафайлы
  3. Сделаем размер каждого медиафайла меньше 600 пикселей

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