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

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.Как сделать мобильную версию сайта
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

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

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

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

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

Эффективность и удобство плагинов мобильной версии сайта:wp_plugins_mobile_adoptetion

Как оказалось различные плагины не только по разному выглядят, но и по разному влияют на скорость, самым быстрым оказался Wp mobil edition на главной скорость на главной странице 69, в записях 77 (лучший результат).

Вот ссылки на бесплатные плагины:
1. WiziApp
2. WpTouch
3. WP mobile edition

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

  • Тяжело разместить каждый эллемент красиво для разных экранов.
  • Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

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


2. Отдельная мобильная версия сайта

Отдельная мобильная версия сайтаСамый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

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

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.seosko.ru) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

(голосов: 2, в среднем: 3,00 из 5)

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

  • Март 12, 2015 в 3:23 пп
    Ссылка

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

    Ответ
  • Март 19, 2015 в 3:08 пп
    Ссылка

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

    Ответ
  • Март 23, 2015 в 7:03 пп
    Ссылка

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

    Ответ
  • Март 18, 2016 в 7:53 пп
    Ссылка

    Один из моих сайтов имеет посещаемость более 3000 уников. Была естественно проблема — в 2 раза превышена допустимая нагрузка. Хостинг провайдер настаивал на выделенном сервере. Вышел из положения плагином W3 Total Cashe. Нагрузка упала более чем в 10 раз! Так жил полтора года, пока не столкнулся с проблемой «мобилизации» сайта. Поставил плагин WPTouch, всё настроил. Теперь ясное дело 2 темы — родная для обычных посетителей и мобильная для мобильных.
    Вот здесь и проблема — обычные посетители видят кэшированный сайт и создают незначительную нагрузку, в то время, как мобильные работают с мобильной некэшированной темой, что опять стало создавать очень приличную нагрузку!
    Вот здесь и возникает потребность в создании еще одного сайта или второй темы. Есть плагин переключения между двумя темами с распознаванием мобильных пользователей. Или создание второго сайта на поддомене с ручным переключением. Пользователь сам кликает по ссылке мобильная версия и переходит на соответствующий сайт.

    Ответ
    • Март 21, 2016 в 9:15 дп
      Ссылка

      Тоже использую w3 TC, на счет мобильной версии, то лучше создавать адаптивный дизайн сайта.

      Ответ
  • Апрель 15, 2016 в 6:21 пп
    Ссылка

    Спасибо огромное за статью! На все сайты старенькие установила плагин WpTouch, все работает отлично! Пробовала сначала ставить WP mobile edition, но на нем все картинки от текста отъехали, не подошел.

    Ответ
  • Январь 23, 2017 в 10:44 пп
    Ссылка

    Добрый день! Благодарю за статью! :) У самого руки кривые настроить адаптив под мобильную версию, выкрутился плагином, который вы представили. На первое время более чем достаточно!

    Ответ
  • Январь 27, 2018 в 9:22 пп
    Ссылка

    1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.

    ты прикалываешься? а на одной бд сложно сделать?

    Ответ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *