10 способов мобильной оптимизации сайта

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

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

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

Важность мобильной оптимизации

Мобильная оптимизация необходима всем ресурсам. Если пользователь смартфона, зайдя на сайт, увидит, что веб-ресурс неадаптирован под смартфон («слетают» картинки, неудобно нажимать на клавиши и т.д.), он без колебаний закроет его и откроет другую ссылку в поисковике.Поисковые системы также учитывают этот тренд, поэтому вводятся новые принципы ранжирования. Три года назад мобильный индекс стал приоритетным в ранжировании для всех новых сайтов. Индексирование с приоритетом мобильного контента (mobile-first indexing) страниц зависит главным образом от их мобильной версии. Неадаптированность под смартфон влияет на понижение в выдаче поисковика. Поэтому полноценная SEO-оптимизация не происходит без адаптации ресурса под смартфон. 

Методы оптимизации сайта под смартфоны

Отдельный шаблон или поддомен

Если создать мобильную версию на поддомене, то когда юзер откроет сайт с мобильного устройства, сервер автоматически сделает переадресацию на этот поддомен. Иными словами, на ПК и мобильные устройства будет передаваться разный HTML и будут создаваться URL-адреса под каждую страницу.Достоинством этого способа является быстрая загрузка. Среди недостатков – изменение URL, потребность в настройке взаимосвязи версий и трудозатратность реализации.К тому же создать мобильную версию можно на другом шаблоне. Тогда URL-адрес остается таким же, независимо от того, какое устройство использует пользователь. Изменяется лишь код HTML. Когда юзер попадает на сайт, сервер распознает тип устройства, с которого осуществлен вход, и отправляет соответствующую версию страницы.Важное преимущество такого способа оптимизации – статичность URL. Это, в свою очередь, снимает необходимость работ по оптимизации версий для SEO. Однако можно выделить следующие недостатки:

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

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

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

Динамическое обновление

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

Разметка Accelerated Mobile Pages (AMP)

Оптимизация сайта для мобильных устройств может происходить разными способами. Один из них – внедрение AMP-разметки. Благодаря такой разметке сайт будет отображаться в поисковой выдаче Google выше других. Кроме того, вы можете создать на странице сайта карусель AMP-контента. С помощью разметки AMP появляется дублирующий уровень контента, который оптимизирован под мобильные устройства.

Разметка Schema.org

Оптимизация сайта под телефон также может осуществляться с помощью разметки Schema.org в мобильном поиске. Особенностью Schema.org является то, что она помогает ответить на конкретный пользовательский вопрос уже в результатах поисковой выдачи. В то же время, некоторым владельцам сайтов это помогает не тратиться на PPC-рекламу. Если ваш сайт на WordPress и вы хотите ввести разметку Schema.org, то можете установить плагин – Schema App Structured Data.

Удаление Flash

Когда популярность Интернета набирала обороты, технология Adobe Flash была очень распространена. Однако, вместе с тем, эта технология делала сайты громоздкими. В конце концов, более минималистичные ресурсы стали привлекать пользователей больше. Тем более, Adobe Flash делает сайты неудобными для мобильной выдачи. Поэтому следует удалить Flash.

Сжатие и оптимизация изображений

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

• используйте относительные размеры фотографий;
• применяйте встроенные изображения;
• для устройств с более высоким разрешением используйте атрибут srcset для фотоснимков.

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

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

1. Используйте пользовательский элемент управления с корневым элементом div, элемент video media и дочерний элемент div.
2. Обеспечьте наличие кнопок «Воспроизведение» и «Пауза».
3. Используйте форматы эскизов, которые поддерживает Google.
4. Убедитесь, что видео можно проиндексировать.
5. Используйте карту сайта для видео.
6. Используйте тег HTML, который легко идентифицировать.

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

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

• BrowserStack;
• Google Search Console;
• PageSpeed ​​Insights;
• Web.dev;
• инспектор Firefox/Chrome;
• Google Mobile Friendly Test;
• CrossBrowserTesting.com.

Настройка CMS для мобайл-версии

Одним из способов осуществления адаптивности сайта под мобильное устройство является настройка CMS для мобильной версии. CMS – платформа с простым интерфейсом и инструментами, которые существенно упрощают работу с сайтом. В то же время, самым популярным в мире CMS считается WordPress. Его плагин WPtouch для создания мобильной версии легкий в настройке и подходит для использования даже начинающим.

Скорость загрузки

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

Удаление всплывающих окон

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

Помните о планшетах

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

Выводы и советы

Адаптация сайта к мобильным устройствам играет значительную роль в SEO-оптимизации, так как большинство поисковых запросов выполняется со смартфонов. Поисковые работы используют мобильный индекс при обходе сайтов. Поэтому вы должны убедиться, что робот Googlebot может проводить сканирование страниц вашего сайта.Адаптация сайта для смартфона – процесс нелегкий. Если вы не хотите разбираться во всех нюансах, обращайтесь к специалистам агентства Ланет CLICK. Кроме мобильной адаптации, специалисты могут провести аудит юзабилити сайта, осуществить продвижение сайта на Вордпресс или запустить ASO-продвижение и т.д. С полным перечнем услуг, предоставляемых нашим digital-агентством, можно ознакомиться на сайте.