Как мы переехали в mobile. История «Фотостраны»

Россия+7 (495) 960-65-87
Шрифт:
0 4187

Для начинающих

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

Всего существует три варианта мобильных версий сайтов:

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

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

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

При работе над интерфейсом мобильного сайта дизайнеры и верстальщики должны учитывать особенности устройств.

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

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

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

Также нельзя забывать о том, что мобильные устройства имеют серьезные ограничения по вычислительным ресурсам. Любые плагины или фреймворки нужно применять аккуратно, иначе телефон будет тормозить и активно тратить батарею. Так, например, мы отказались от использования популярного фреймворка ReactJS. Анализ производительности показал, что React потребляет слишком много оперативной памяти устройства, и мы заменили его на VanillaJS.

В итоге главная страница сайта на мобильном устройстве выглядит так:

Главная mobile 1.png   Главная mobile 2.png

А один из основных разделов сайта — «Знакомства» — в мобильной версии превратился в такой аналог:

Знакомства mobile.png   Знакомства mobile 2.png

Дальше нужно было связать между собой страницы основной и мобильной версии.

На страницах основной версии были установлены такие теги:

код 1.PNG

Соответственно, в мобильной версии:

код 2.PNG

Также, учитывая наличие приложений в Google Play и App Store, мы в обе версии добавили теги, связывающие страницы сайта с официальными приложениями:

код 3.PNG

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

  1. Ввели в название основные ключевые слова: «Фотострана: знакомства и общение».
  2. Включили в поля описания и ключевых слов второстепенные ключевики, как, например, «знакомства онлайн», «знакомства рядом», «чат» и др.
  3. Подобрали иконки, дающие высокую кликабельность при поиске внутри каждого маркета.
  4. Сделали скриншоты, наглядно показывающие потенциальным пользователям, что представляет из себя приложение.

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

Официальное приложение в выдаче Google:

Официальное приложение в выдаче Google.png

Официальное приложение в выдаче Яндекс:

Официальное приложение в выдаче Яндекс.png

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

Трафик.png

Основные причины такого роста:

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

2) Выполнение всех рекомендаций Google и Яндекса по оптимизации страниц мобильной версии.

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

Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Кейс: как продвинуть сайт производителя мебели на заказ в Москве
    Art Moderator
    2
    комментария
    0
    читателей
    Полный профиль
    Art Moderator -
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
    «Баден-Баден»: как выйти из-под фильтра
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Здравствуйте! У меня совсем новый сайт (около месяца). Как только добавила страницы - были на 64, 45 и т.д. местах в выдаче яндекса по нч и сч запросам, но через несколько дней улетели за пределы 200. Что это баден - баден или песочница? Текст вроде не спамный, но мне трудно судить. Сайт portretnazakaz.ru
    32 инструмента в помощь SEO-специалисту
    Chaser
    1
    комментарий
    0
    читателей
    Полный профиль
    Chaser - Рекомендую бесплатную альтернативу Frog и Netpeak - SiteAnalyzer ( site-analyzer.ru/ ) Странно что не включили в обзор
    Второе дыхание ссылочного продвижения
    Rookee.ru
    24
    комментария
    0
    читателей
    Полный профиль
    Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
    Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
    Анатолий Шевчик
    1
    комментарий
    0
    читателей
    Полный профиль
    Анатолий Шевчик - +1097988
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Максим Мирошник
    2
    комментария
    0
    читателей
    Полный профиль
    Максим Мирошник -
    Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
    Сергей Дембицкий «Sima-Land.ru»
    22
    комментария
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
    Все, что нужно SEO-специалисту. Обзор инструментов
    Администратор Сайта
    1
    комментарий
    1
    читатель
    Полный профиль
    Администратор Сайта - Шаришь в seo! Сервис реально хороший
    «Прямая линия» с Артуром Латыповым: отвечаем на вопросы
    God Koss
    1
    комментарий
    0
    читателей
    Полный профиль
    God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    321
    Комментариев
    262
    Комментариев
    234
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    86
    Комментариев
    80
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54
    Комментариев
    53

    Отправьте отзыв!
    Отправьте отзыв!