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

23 октября 2014 года состоялась очередная очередная видеовстреча в прямом эфире со специалистами команды качества поиска +Andrey Lipattsev и +Mariya Moeva, посвящённая созданию оптимизированных для смартфонов сайтов и их взаимодействию с поисковой системой.


Команды плеера Youtube
Подкаст "Cоздание сайтов, адаптированных для мобильных устройств.mp3"


Содержание видеовстречи

Укороченная адаптация выступления - Aldous.

Вопрос:
Если делать отдельную страницу для смартфонов, что в таком случае делать с текстами в десктопной версии?

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

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

Принципиальных подходов здесь три:
  • можно создавать отдельный мобильный сайт на отдельной структуре (домене)
  • можно подавать динамически в зависимости от агента пользователя (user agent) другой контент на том же сайте
  • можно вообще создать один контент на одной странице, на одном сайте, который просто видоизменяется в зависимости от того, с какого размера экрана устройства пришёл пользователь (адаптивные макеты страниц)

Учитывая, что вопрос о текстах относится ко всему (смотри вопрос выше), будь то отдельный совершенно сайт или будь то модифицируемая версия (зависит от размера экрана) - если эти тексты оправданы для десктопной версии, то скорее всего они оправданы для мобильной (газета - самый хороший пример, там бывают развёрнутые статьи). Я не видел примеров на сайтах СМИ, что бы статьи сокращали для того, чтобы поместить их на мобильный сайт. Я в этом не вижу и смысла особенного. Всё, что нужно сделать - текст читаемым, чтобы он размещался на экране таким образом, не доставляя лишних неудобств (не приходилось пальцами скроллить по ширине, раскрывать, увеличивать), легко читался и можно было скроллить либо вверх, либо вниз.

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

Мария: Прежде чем делать мобильный сайт, нужно посмотреть, в чём разница запросов и задач, которые пользователи решают на вашем мобильном и десктопном сайте, потому что они могут друг от друга очень отличаться. И если вы увидите, что на вашем мобильном сайте пользователи сразу что-то покупают, а на вашем десктопном сайте они долго читают какие-то описания и "перетаскивают" продукты, то тогда может быть стоит переделать мобильную версию, чтобы она немного отличалась от декстопной, но зато была удобней для пользователей телефонов. Декстопная версия не обязательно на 100% должна соответствовать мобильной.

Вопрос:
Тестирование и отображение ярлыка*, наличие мобильной версии в поиске, по каким критериям?.
*видимо, имеется в виду пиктограмма телефона в мобильной  выдаче

Ответ:
Андрей: Существует сервис PageSpeed Insights, причём уже давно. В начале своего существования он позволял протестировать скорость загрузки сайта на декстопном устройстве, потом появилась возможность тестировать тоже самое на мобильных устрйоствах, недавно так же  появилась возможность тестировать удобство для пользователя мобильной версии сайта. И если посмотреть внимательно те рекомендации, которые там предоставляются для той или иной страницы (любой), то список невыполненных рекомендаций или частично выполненных или полностью выполненных рекомендаций весь там есть. И, фактически, эти критерии с описаниями, с конкретными примерами - они же и применяются для оценки (мы сейчас тестируем возможность уведомить пользователя поисковой системы Google, что некоторые сайты или часть сайтов из результатов поиска оптимизированы для просмотра с мобильного устройства; если появляется значок телефона, это не значит, что мобильная версия не просто есть, а ещё и удобна), определения удобства мобильной версии сайта.

Мария: Если у вас есть две разные версии сайта (декстопная и мобильная находятся на разных URL) - очень важно использовать alternate/canonical в тегах, чтобы показать, как они между собой связаны:


Вопрос:
Отличаются результаты мобильного поиска от поиска на десктопе?

Ответ:
Андрей: Да, результаты отличается и зачастую довольно значительно. И если вы разрешили Google (Android) отслеживать своё местоположение, это конечно учитывается (даже в мобильном поиске из разных мест результаты будут различаться) при обработке вашего запроса. И будет ли сайт менее релевантным, если у сайта не будет мобильной версии? Если у нас нет другого релевантного контента, мы наверное покажем то, что есть, даже если оно не оптимизировано. При прочих равных условиях (если у нас есть контент приблизительно равной релевантности, при этом один контент расположен на сайте, оптимизированном для мобильных устройств, другой нет (хотя мы так пока ещё не делаем; примечание - октябрь 2014 г.), логично было предположить, что пользователю хотелось бы увидеть не просто релевантный контент, но и в удобной для себя форме. И мы сейчас ищем способы, как сделать это правильно.

Мария: Да, мы работает над тем, чтобы было совершенно отдельное мобильное ранжирование, и когда у нас будут какие-нибудь интересные новости, мы обязательно вам об этом сообщим.
Этот ярлык (упомянутый в вопросе) является первым шагом. Мы хотим показать, что является удобным мобильным сайтом. Мы хотим дать время веб-мастерам, у которых сайты пока ещё нуждаются в оптимизации, и в конце концов дальше мы будем помогать - предоставлять ресурсы и предпринимать какие-то меры в отношении изменения ранжирования. Но пока мы просто показываем ярлык, чтобы пользователи обратили внимание на то, каким должен быть хороший и удобный сайт.


Вопрос:
Хотелось бы узнать, какие прогнозы есть у Google? Как можно будет скоро не учитывать разрешение в 320px при адаптации?
Уточнение: Складывается мнение, что всё идёт к тому, что большинство смартфонов недалёкого будущего будут иметь разрешение экрана Full HD.

Ответ:
Мария: Здесь сложно сказать на самом деле, потому что существует много разных регионов в мире, где телефоны - это не последний "шестой ++ айфон" и "нексус 115", и есть рынки, например, в Индии и Африке, где люди используют более дешёвые телефоны с совершенно другим качеством изображения. Это надо иметь в виду.

Андрей: Иногда стоит сделать шаг назад от технического вопроса и просто, что называется, сесть на место пользователя.

Вопрос:
В каких случаях по мнению Google лучше разработать приложение под смартфон, а не мобильную версию сайта и наоборот?

Ответ:
Андрей: Эта тема внутри компании вызывает живейшие дискуссии о том, куда всё движется, за чем будущее, открытый web, закрытые приложения...

Мария: И у того и у другого есть свои преимущества. Это зависит от того, что нужно вашим пользователям, и как вы хотите предлагать свои услуги или свой контент. В приложении есть много преимуществ. Во-первых, там можно сохранить гораздо больше информации о пользователе (например, о кредитной карточке, местоположение, где он находится, дату рождения, список предыдущих покупок, рейтинги, контакты  и всё, что угодно; данную информацию могут запрашивать приложения Android при установке в телефон). Всё это позволяет подстраивать контент и генерировать страницы (если их можно назвать страницами), которые нужны конкретно этому пользователю.

С другой стороны эти приложения почти никак (за исключением индексации приложений, которую мы запустили  для всех на Google IO) не доступны другими способами. Т.е. пользователю нужно зайти, скажем, в Apple Store или Google Play Store и скачать это приложение. Оказывается, что (статистика) пользователи почти 60% установленных приложений не пользуются.

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

Андрей: Приложения разрабатывать для множества платформ. По крайней мере очень популярные две. А веб-сайт не зависит от платформы.

Мария: Наверное, если вы собираете новых клиентов, предложите им зайти на веб-сайт. Там они смогут ознакомится с вашей компанией, с вашими сервисами, создать аккаунт, решить будут что-либо покупать или нет. Наверное вы замечали, что на некоторых сайтах сразу при входе выскакивает большое окно "скачайте наше приложение". Это действительно раздражает всех пользователей. У нас есть данные, что процент отказов в таких случаях очень высок, потому что люди, которые даже не знают, что перед ними за сайт, конечно же не станут сразу устанавливать с него приложение. Следите за тем, на каком уровне находятся ваши отношения с пользователями и предлагайте им соответственно варианты для продолжения этих отношений.
Пример:
На сайте пользователю понравилось, он зарегистрировался, потом ему можно прислать какое-то предложение "для вашей следующей покупки будет 10%-ная скидка, если вы установите наше приложение (там будут ещё какие-то преимущества).
И потом уже у вас этот человек становится лояльным клиентом, который может прямо с приложения что-то скачать и не будет дальше искать информацию.
Вы продаёте зонтики, у вас есть приложение для зонтиков. Когда ему нужен будет зонтик, он сразу же зайдёт в ваше приложение и не будет искать в поисковике.
Надо это иметь в виду и тщательно проанализировать до того, как создавать приложение или сайт.

Андрей: Исследования (проводились в Америке), которые мы часто используем в последнее время для подготовки своих данных, говорят о том, что огромный процент людей, имеющих приложение в телефоне, всё равно начинают процесс поиска и подготовки к покупке с помощью поиска в интернете. Даже если у них есть приложение из вашего магазина с зонтиками, а им нужен новый зонтик, шансы, что они пойдут смотреть и искать не в приложение, а в поиск и найдут сначала ваш сайт, всё равно высоки. На этом этапе я бы не ставил вопрос "или-или", я бы пока думал "и-и".

Вопрос:
Если при оптимизации под смартфоны сокращать содержание страниц, не снизит ли в таком случае алгоритм поиска релевантность запроса?

Андрей: Выше был пример взаимодействия пользователя со страницей на смартфоне. На десктопе может быть большое описание, на смартфоне спрятано, не показано, и есть только картинки, где можно покупать что-то. Как поисковая система сможет понять, что это не просто картинка, а конкретный утюг с определёнными критериями? Или зонтик. Или вообще, что это утюг, а не зонтик, если там нет описания.

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

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

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

Ответ:
Андрей и Мария: Что касается исследований, которые мы проводим, есть замечательный сайт, который называется google.com/think (Думай с Google), там целая масса постоянных свежих исследований. Многие из них в последнее время связаны именно с мобильными устройствами. Что касается исследования о максимальных размерах текста (если имеется размер текста в словах)  или о максимальных размерах изображений — у нас нет каких-то рекомендаций, что бы размер шрифта был 18 пунктов или что-то такое.  Надо действительно пробовать, менять дизайн, смотреть, проводить исследования с людьми, которые будут пользоваться сайтом.

Андрей: Со стороны поисковой системы не может быть претензий к размеру контента. Контент есть конентент. Если он хороший, то на любом устройстве хорош.

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

Ответ:
Мария:Если у вас есть малозначимые иллюстрации на странице, то тогда их вообще лучше удалить на мобильной и десктопной версиях. Но что касается оптимизации контента на мобильной версии, можно использовать CSS Media Queries, чтобы оптимизировать отображение картинок на странице (Примечание редактора: видимо, Мария имела ввиду flexible, dynamically resizing images with CSS ). На сайте Page Speed Insights есть рекомендации, как оптимизировать картинки, чтобы они загружались быстрее.

Вопрос:
Проводились ли Google исследования для определения оптимальной, максимальной общей высоты всего контента для страницы сайта под смартфоны?
Уточнение: Например, сколько экранов пользователи готовы проскроллить, чтобы ознакомиться с содержанием полностью?

Ответ:
Андрей: Всё из той же серии. Очень зависит от самого содержания. Я могу скроллить бесконечно, если читаю длинную интересную обзорную статью, сидя в общественном транспорте и буду читать её, пока не закончится. А где-то сайт мне не понравится сразу, и я вообще скроллить не буду ни разу.

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

Ответ:
Андрей: На выше упомянутом сайте google.com/think есть подобные исследования. Подробности.

Вопрос:
Как Google относится к картинкам, которые написаны на CSS?
Уточнение: Много веб-мастеров начинают экспериментировать, картинки не "рисуют", а пишут на CSS.

Ответ:
Андрей: Есть инструмент в WMT "Посмотреть как Googlebot", позволяющий просмотреть и отобразить содержание страницы. Там можно проверить.
Примеч. редактора — данный раздел будет дополнен.

Вопрос:
Картинка, помещённая на сайт через свойство background, будет участвовать в поиске по картинкам?
Уточнение: свойство background-image.

Ответ:
Андрей: Если у неё есть URL, и она будет доступна роботу для сканирования, то нет никаких причин по которым она бы не участвовала в поиске.

Мария: Стоит упомянуть про элементы, которые закрыты от сканирования. Это очень важно на самом деле. Мы замечаем, что есть много сайтов которые готовы для мобильного поиска, но так как у них в robots.txt стоят директивы Disallow на директории с CSS или Javascript, с нашей стороны невозможно отобразить этот сайт и понять, что он на самом деле удобный для мобильных пользователей.

Откройте, пожалуйста, доступ к этим файлам, чтобы мы отображать эти страницы и знать, как этот сайт на самом деле выглядит для мобильных устрйоств. Это тоже можно увидеть в WMT, там есть такая опция (Андрей уже упомянул) - «посмотреть и отобразить как Googlebot» и там мы показываем список ресурсов к которым нет доступа.

Вопрос:
Стоит ли использовать на сайте клипарты — фотографии, иконки и т.д. Или только собственный уникальный графический контент?

Ответ:
Андрей: Очень философский вопрос. Я двумя руками за собственный  уникальный графический контент, но он не всегда необходим. У уникального контента больше шансов принести в интернет что-то новое, интересное и полезное — это всегда хорошо. Другой вопрос, что в случае изображений продуктов — не нужно за это цепляться.
Всё зависит от того, для чего вы это делаете.

Вопрос:
Если через год или два большинство смартфонов будет иметь разрешение свыше 960px, учитывая, что скорость интернет-соединений в целом всё время увеличивается, может вообще пока ничего не менять на существующих сайтах?
Уточнение: Цитата от А.Лебедева «Самая большая глупость на свете — создание отдельных мобильных версий сайта» Ссылка.
Подробности.

Ответ:
Андрей: Я потом перешёл по ссылке... Артемий приводит в пример Apple, создателя айпадов и айфонов, у них нет никаких отдельных сайтов. Но вы видели сайты Apple? Они изначально предназначены для всех устройств. Вы открываете его на десктопе, там нет миллиарда текста, там чётко, компактно, понятно, и контент органическим образом отображается на любо устройстве. Это то, к чему мы всех призываем.

И в этом смысле Артемий прав. Если изначально начинаете думать о предоставлении контента, держа в голове многочисленные различные устройства, - отлично.  Вопрос не о каком-то отдельном сайте.

Может ничего не стоит менять на существующих сайтах? Смотря какой у вас существует сайт. Если ваш сайт уже сейчас без «лишнего жира», без лишних букв, чётко доносит необходимую информацию, привлекает пользователей, привлекает конверсии, не надо ничего менять. Если он сейчас весь какой-то -  создан по образу и подобию газеты «Правда» 50-ых годов, то может быть стоит задуматься, и сейчас лучший момент, чтобы сделать один хороший сайт, который будет просто работать везде.

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

Ответ:
Андрей: Пока изменений нет (примечание редактора: то есть ничего не блокируется и не понижается), но как мы вначале обсуждали, это очень насущный для нас вопрос.

Надо смотреть WMT. Там чётко разбиваются запросы с мобильных и не мобильных устройств. Я встречаю постоянно на форуме вопросы от веб-мастеров о каких-то тривиально-банальных вещах, которым они уделяют очень много времени при том, что у них 30-40% запросов с мобильных устройств, а адаптированного сайта нет. И они на это внимание не обращают и продолжают заниматься чем-то странным. Проверйте эти данные и проследите за тем, где вас ищут.

Вопрос:
Как повлияет смена структуры вёрстки на индексацию? Если вероятность проседания в поисковой выдаче после смены структуры с учётом того, что контент полностью сохранился?
Уточнение: Делаю полный редизайн сайта и внедряю адаптированную вёрстку.

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


Полезные ссылки:
Google будет помечать мобильные сайты в результатах поиска
Рекомендации по преобразованию сайта для мобильных устройств
Справочный форум для веб-мастеров
Справочный центр
Обновлённые технические рекомендации для веб-мастеров.