谷歌在 2018 年推出了移动优先主题。 В данной статье мы расскажем вам, как оптимизировать мобильную версию своего лендинга в связи со скорыми изменениями。
Мобильный аудит
Прежде чем приступить к оптимизации мобильной версии сайта, следует убедиться в отсутствии каких-либо нюансов, способных навредить процессу。
Спомощью сервиса Google Search Console 和 программы WebSite Auditor вы сможете провести аудит 和 выявить возможные проблемы。不久前，Googlebot 与 Googlebot 进行了合作。 Вы должны проверить каждую на дружелюбность к мобильным устройствам。
Итак, вот, что вы должны сделать:
1. Используйте Google 搜索控制台
Добавьте мобильную версию вашего лендинга в Google Search Console。
2. Протестируйте страницы на предмет удобства для мобильных устройств
Откройте 网站审核员和 создайте новый проект для своего сайта, либо откройте существующий。 В разделе «Анализ Контента»（内容分析）выберите «Аудит Страницы»（页面审核）。 Добавьте страницу, которую вы хотите проанализировать, и ведите ваши целевые ключевые слова. Когда проверка будет выполнена, переключитесь на «Технические факторы» (技术因素) и прокрутите страницу до раздела «Юзабилити страницы (Мобильная версия)»（页面可用性（移动）），чтобы узнать，обнаружены ли какие-либо проблемы：
3. Проведите глубокий аудит мобильной версии сайта
В своем проекте WebSite Auditor перейдите в раздел «Настройки»> «Настройки робота»（首选项 > 爬网程序设置）和 убедитесь, что напротив поля «Следовать инструкциям robots.txt» установлен флажок。 В выпадающем меню рядом с ним выберите Googlebot-Mobile。 Ниже отметьте поле «Сканировать под определенным юзер-агентом»。 В раскрывающемся меню справа выберите второго юзер-агента:
Это юзер-агент, которого Google использует при сборе информации с мобильных версий страниц. Нажмите «OK» 和 далее нажмите «Переделать проект»（重建项目）。 Через мгновение инструмент проведет полный аудит мобильной версии вашего сайта。
4. Все ресурсы сайта должны быть видимыми для поисковых роботов
Убедитесь, что мобильная версия вашего сайта не блокирует CSS, JavaScript, изображения, видео и т. д.
5. Избегайте использования Flash-технологий
Flash не поддерживается большинством мобильных браузеров。 Чтобы Google (и посетители) могли получать доступ ко всему контенту на вашем сайте, избегайте использования Flash в мобильной версии。
Пользователи четко осознают、какой уровень качества они могут получить при работе в интернете с мобильных устройств。 Они хотят достичь своих целей как можно быстрее: без проблем при масштабировании, запутанной навигации, расположенных слишком близко друг к другу сенсорных элементов, и что самое важное — они не желают ждать！ Неоправданные ожидания пользователей приводят к высокому показателю отказов（跳出率）。
1. Респонсивный дизайн
В условиях отсутствия мобильной версии респонсивный дизайн (响应式设计) позволяет вашему сайту адаптироваться под используемое устройство。 И речь идет не столько о подгонке под размер экрана, сколько об общей функциональности.
В идеале, респонсивный дизайн должен обеспечивать безупречный пользовательский опыт вне зависимости от используемого устройства:
- Быстрое время загрузки（加载时间）；
- Подвижная сетка с пропорциональными размерами;
- Гибкие тексты и изображения;
- Безупречное удобство использования;
- Оптимизированные контрольные точки (断点) для изменений дизайна.
Очень важно сделать сайт респонсивным 和 еще важнее сделать это продуманно。 Чем меньше размер устройства, тем меньше контента видно пользователю при первом посещении. Если на лендинге неудобная навигация или он долго грузится, ваши конверсии будут падать. Аназойливое всплывающее окно（弹出窗口）способно и вовсе убить намерение пользователя。
2. Время загрузки
Google объявил о так называемом Speed Update: начиная с июля 2018 года скорость загрузки страницы станет фактором ранжирования в мобильном поиске。 Они пообещали, что это обновление повлияет только на небольшой процент запросов. Подчеркивается, что цель поискового запроса по-прежнему остается очень сильным фактором ранжирования。 Это означает, что даже самые медленные страницы могут занимать высокую позицию в результатах поиска, при условии，что они предоставляют хороший，релевантный контент。
Самый простой способ улучшить мобильный UX 和 скорость загрузки страницы — это сжатие изображений。网站审核员是一名网站审核员，由他负责。 В вашем проекте перейдите в раздел «Анализ контента»（内容分析）和 выберите страницу、которую необходимо проанализировать。 Перейдите к «Аудит страницы»>«Технические параметры»（页面审核 > 技术因素）, прокрутите до раздела «Скорость страницы (Десктопная) версия)»（页面速度（桌面））、кликните на «Несжатые изображения»（未压缩图像）和 получите ссылку на скачивание ваших сжатых изображений в разделе «Как исправить»（如何修复）。
После этого оцените производительность страницы。 На данный момент трудно сказать, какие инструменты помогут вам определить, повлияет ли на ваш сайт новое обновление скорости。 Однако сам Google рекомендует следующие инструменты: Chrome 用户体验报告、Lighthouse 和 PageSpeed Insights。
3. Ускоренные мобильные страницы
Ускоренные мобильные страницы (加速移动页面，AMP) — это проект с открытым исходным кодом, позволяющий практически мгновенно отображать контент в мобильной версии сайта (благодаря более простой и легкой версии HTML, поставляемой из кэшированной версии)。
2015 年，我们在 2015 年推出了一款新产品。 Помимо мгновенного рендеринга мобильных страниц, они получили отличные позиции в результатах поиска, благодаря тому, что новостные статьи были включены в карусель «Главные новости».
Благодаря внедрению AMP вы сможете обеспечить отличный пользовательский опыт, способный привести к положительным показателям взаимодействия。 Недавний опрос доказал это: 60% участников заявили, что отдают предпочтение AMP-результатам из-за более быстрого опыта，который они обеспечивают。
Так、конверсии сайтов электронной коммерциии、использовавших AMP-страницы、увеличились на 20%。
Решившись на внедрение AMP-страниц, помните о том, что недостаточно просто установить плагин и на этом успокоиться。 AMP-страниц должна быть практически идентична вашим обычным респонсивным или мобильным страницам。 Это очень важное требование, так как 16 ноября 2017 года Google объявил, что станет исключать страницы из AMP-карусели в том случае, если контент на них будет значительно отличаться.
Кроме того, действительно полезным будем отслеживать производительность ваших AMP-страниц。我们使用 Google Analytics（分析）和 WebSite Auditor（网站审核器）。
Откройте ваш проект 网站审核员，перейдите в раздел «Структура сайта»>«Страницы»（站点结构 > 页面），кликните на кнопку «+» в верхнем правом углу, чтобы создать новую рабочую область。 Добавьте условие фильтра, чтобы включить только страницы, содержащие AMP в своих URL:
Раздел «Структура сайта»>«Страницы»
Далее добавьте в рабочую область необходимые колонки (канонический URL, код состояния, инструкции robots.txt, неработающие ссылки и т. д.) для глубокого анализа ваших AMP-страниц.
4. Прогрессивные веб-приложения
2017 年的 2017 年，2018 年的 2018 年，2017 年的 2018 年Web 应用程序、PWA）。 По сути，прогрессивные веб-приложения — это веб-сайты，которые выглядят как нативные приложения。 Они стали популярными благодаря сочетанию скорости загрузки мобильных страниц с функциональностью нативного приложения。 Это вполне жизнеспособный вариант в том случае, если вам нужно приложение, но вы не уверены, что сможете покрыть все расходы на него。
Прогрессивные веб-приложения могут быть установлены на телефон。 У них будет значок приложения, полноэкранный режим без адресной строки, оперативная и автономная работа и推-уведомления。 Кроме того, они требуют гораздо меньше сил на обслуживание, оптимизацию 和 продвижение.
Google здесь служит примером。您可以使用 PWA、交通、体育、餐厅、天气、Google Contribute 和 Maps-Go。
Слева-направо: результаты поиска прогноза погоды, результаты Google Now, иконка установки прогрессивного приложения, иконка прогрессивного приложения рядом с иконкой стандартного приложения
Если вы думаете, что прогрессивные веб-приложения больше имеют отношение к Android 和 Chrome, то вам следует знать, что Safari в我们的服务人员是 Service Worker，PWA 的工作人员是 PWA。
5. Мобильный дизайн
Попытка вместить и расположить контент в мобильной версии сайта наиболее удобным для пользователей образом напоминает своего рода игру в тетрис。 Однако, если вы осознаете, что чаще всего вызывает сложности при серфинге в интернете с мобильных устройств, и можете поставить себя на место ваших пользователей, то у вас не должно не возникнуть никаких проблем.
- Изображения, шрифты, заголовки
Протестируйте респонсивную или мобильную версию вашего сайта на различных устройствах。 Важно убедиться, что все визуальные элементы адаптируются к используемому устройству. Имеется в виду то, что все ваши изображения должны быть масштабируемыми (а в том случае, если они занимают весь) экран, вы можете и вовсе отказаться от использования некоторых из них), шрифты — читаемыми, а заголовки не должны泽尼玛塔большую часть экрана。
- Четкая навигация
Навигация не должна быть первым и единственным, что видит пользователь. Она не должна бросаться в глаза и кричать о себе. Скорее она должна напоминать скромного, верного друга, появляющегося в те моменты, когда пользователю это нужно。 И、конечно же、ему должно быть понятно、как вызвать меню。 Одним из вариантов является использование так называемого гамбургер-меню (汉堡菜单) — кнопки с трем горизонтальными полосками, обычно расположенной в верхнем левом углу.
- 站内搜索
Если у вас достаточно большой сайт, стоит подумать о функции поиска. Важно разместить окно поиска в том месте, которое хорошо видно вашим пользователям。
Google Analytics（分析）、Google Analytics（分析）、Google Analytics（分析）、Google Analytics（分析）、Google Analytics（分析）、Google Analytics（分析）、Google Analytics（分析） Если вы обнаружите, что ваши пользователи ищут информацию, которой у вас нет или ее трудно найти в меню навигациии, подумайте о том, как восполнить данный пробел.
- 反馈
При серфинге средний пользователь может сталкиваться с сотнями различных проблем。 Без получения обратной связи от аудитории вы так никогда и не узнаете, что мешает вашему юзабилити. Благодаря отзывам вы сможете поддерживать лояльность пользователей。 Онлайн-чат на странице — отличный инструмент, также как и тикетная система на базе электронной почты.
Помимо этого，вы можете создать страницу с ответами на часто задаваемые вопросы。
- Кнопки призыва к действию（号召性用语）
Включая в свою мобильную версию сенсорные элементы, позаботьтесь о том, чтобы они были достаточно большими для帕鲁谢夫。 Если рядом расположены еще несколько кнопок, они не должны находиться слишком близко друг к другу.
Еще одна вещь，которая поможет вам понять намерения ваших пользователей，— это тепловые карты（热图）， визуализирующие поведение пользователей на сайте: прокрутку, перетаскивание, нажатие и т. д. Попробуйте, например, инструмент Hotjar, который также позволяет создавать воронки конверсии (转换漏斗), опросы, и онлайн-формы。
- 弹出式视窗
请参阅 Google 的 неодобрением относится к всплывающим объявлениям（插页式页面）、но、по-видимому、есть исключения。 В любом случае, если вы используете их по тем или иным причинам, делайте это осторожно и уважайте своих посетителей。 Никто не любит натыкаться на рекламу, занимающую весь экран с едва заметной кнопкой «x»:
Примеры окон, который затрудняют доступ к контенту
内容
Какие бы ограничения ни накладывал Google, ваш сайт все еще может занимать высокие позиции при условии наличия у вас качественного контента。 Вэпоху семантического поиска такое положение вещей будет длиться еще довольно долго。 В конце концов, конвертирует контент。
Однако при оптимизации для мобильных устройств помните о том, что людям нравится пользоваться функцией голосового поиска.
MindMeld 于 2015 年在 2015 年 12 月 0 日 50 000 000 000 запросов в месяц 发布。 SEO-компания HighVisibility опросила 2000 пользователей мобильных телефонов 和 обнаружила, что 27% респондентов ежедневно其中，27% 是在 27% 的情况下进行的。
1. Исследование ключевых слов
Любопытно，что люди ведут себя по-разному при голосовом 和 обычном поиске。 Набирая запрос в поисковике, мы, как правило, вводим несколько ключевых слов (关键词), которые кратко выражают то, что нам нужно найти。
При использовании голосового помощника мы склонны произносить предложения целиком, как если бы разговаривали с другим человеком。 Такое поведение требует нового типа анализа ключевых слов。 Если кратко，вы должны выстроить контент вокруг этих потенциальных вопросов ваших пользователей。
- Идеи для вопросов с Rank Tracker: В вашем проекте перейдите в раздел «Поиск ключевых слов» (关键词研究), кликните на кнопку «Рекомендуемые ключевые слова»（建议关键词）和 выберите метод исследования «Частотные вопросы»（常见问题）。 Введите ключевые слова 和 нажмите «Далее»（下一页）。 Когда исследование будут завершено, в вашем личном кабинете появятся идеи для вопросов.
- Идеи для вопросов с полем «Вместе с … часто ищут» — это просто бесконечное количество смежных вопросов。 Как только вы нажимаете на один из них, вы получаете еще несколько。 Вскоре эти вопросы могут начать повторяться, но в целом, это отличное место для поиска новых тем。
2. Оптимизация для расширенного сниппета
Расширенный сниппет (精选片段) представляет собой окно с ответом на запрос пользователя и ссылкой, которое располагается над всеми остальными результатами。 Это то, что вам нужно для еще более высокого ранжирования в мобильном поиске. Расширенный сниппет занимает большую часть мобильного экрана, и такой ответ будет единственным при использовании голосового поиска.
Как же попасть в расширенный сниппет？
1. Используйте принцип перевернутой пирамиды при расположении контента:
- начните с самой важной информациии по данному вопросу
- перейдите к более подробному ответу 和 добавьте визуальную поддержку
- завершите примерами или тематическими исследованиями（案例研究）
Сверху-вниз: наиболее важная информация (кто?что?когда?где?почему?как?), важные детали, другая общая新闻
2. Оптимизируйте код。 HTML-структуры вы можете направить Google именно в те места, где он найдет ответ на вопрос для сниппета. Оформите ваш лендинг под расширенный сниппет:
- 程序: Подумайте о кратком резюме, которое бы отвечало на вопрос, около 40-50 слов, чтобы оно поместилось в окошко。 HTML 格式的说明和 поместите его сразу под заголовком вопроса。
- Таблицы: Там, где это имеет смысл, добавьте табличные данные или переформатируйте параграфы в таблицы. Отметьте таблицу на своей странице с помощью тега 。
- 影片名称： Дайте вашему списку название (H1 和 H2), которое соответствует целевому ключевому слову, и оформите ваши «шаги» как подзаголовки.请注意，Google 已将其删除。 Таким образом, вы можете расставить подзаголовки там, где это логично, а Google сам расположит их в хронологическом порядке。
3. Запросите повторную индексацию。 После того, как вы внесли изменения на страницу и она стала готовы к сниппету, используйте Google Search Console для повторного сканирования ваших страниц。 Данный запрос почти мгновенно обновляет статус страницы в индексе Google。 Это означает, что ваша страница может попасть в расширенный сниппет в тот же день, когда вы провели повторную индексацию。
3. Использование структурированных данных
Структурированные данные (结构化数据) помогают Google понять, что происходит, не полагаясь особо на сканирование и анализ всего контента，что представляется весьма утомительной работой。 Кроме того, когда вы используете микроразметку Schema, ваши сниппеты выглядят гораздо привлекательнее。
- Выберите подходящий тип микроразметки。
- 答案: вы можете сделать это как вручную, так и с помощью «Мастера разметки структурированных данных» 谷歌
- 来自 Google 的 Протестируйте разметку с помощью «Инструмента проверки структурированных данных» о 来自 Google。
4. Различные формы контента
注意力集中时间（注意力集中时间）。 Они бегло просматривают информацию, а более подробное ознакомление при желании оставляют на потом. Чтобы увлечь их, вы можете использовать различные формы контента: изображения, видео, GIF, инфографика, опросы и т。 д.
___
来源： lpgenerator.ru
