SEO для мобильных устройств: руководство по веб-оптимизации на 360º

1. Почему мобильное SEO важно
2. Как узнать степень оптимизации вашего сайта
3. Альтернативы для создания оптимизированного сайта для мобильных устройств
4. 1. Адаптируемый или отзывчивый дизайн
5. Преимущества и недостатки адаптивного или адаптивного дизайна
6. Технические вопросы адаптивного или адаптивного дизайна
7. Отдельные таблицы стилей
8. Meta Viewport
9. JavaScript
10. 2. Динамическая публикация
11. Преимущества и недостатки динамической публикации
12. Технические вопросы динамического издания
13. Обнаружение пользовательских агентов
14. 3. Независимые URL
15. Преимущества и недостатки использования независимых URL
16. Независимые технические проблемы URL
17. Rel = "Канонический"
18. Sitemaps
19. Автоматические перенаправления
20. Как реализовать мобильную версию в контент-менеджерах или CMS
21. Остерегайтесь автоматической реализации мобильных сайтов
22. Лучшие практики мобильного SEO

А ты думаешь о мобильном доступе? Это уже не «волна будущего», это происходит сейчас.

Это то, что Google утверждал в своей книге 2011 года ZMOT: победа в нулевой момент истины и это более верно сегодня, чем когда-либо.

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

Проблема в том, как ты это делаешь? Какие у вас есть альтернативы? С чего начать?

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

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

Почему мобильное SEO важно

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

• Опыт мобильных пользователей является фактором ранжирования - с июня 2013 года Google рассматривает конфигурацию для смартфонов в результатах поиска и в апреле 2015 года обновил свои алгоритмы для избранные сайты, оптимизированные для этих устройств , Пока вы не предлагаете мобильную версию в условиях, вы теряете импульс в рейтинге. Вы можете узнать больше об этом здесь ,
• Мобильные сайты помечены в поисковой выдаче - с ноября 2014 года Google показывает тег "для мобильных устройств" в результатах поиска на смартфонах. Отсутствие оптимизированного сайта может означать значительную потерю кликов .
• Google отправляет уведомления на плохо оптимизированные мобильные сайты - с января 2015 года поисковая система отправляет уведомления веб-мастерам с сайтов, которые предлагают плохой мобильный опыт. Хотя в настоящее время это не наказание, никто не знает, какое влияние окажут эти предупреждения в будущем.
• Более половины поискового трафика является мобильным - с 2015 года процессы Google больше запросов на смартфонах, чем на десктопах , Мобильный поиск уже доминирует в этой области, и Google сделает все возможное, чтобы страницы их списков оптимизировали работу со смартфонами.

Как узнать степень оптимизации вашего сайта

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

Чтобы сделать проверку, выполните Тест Google для мобильной оптимизации , Этот инструмент анализирует ваш сайт и перечисляет проблемы с точки зрения юзабилити и оптимизации.

Тест может дать два результата:

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

Другие полезные инструменты для проверки подготовки вашего мобильного сайта:

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

По сути, у вас есть три варианта:

1. Адаптируемый или отзывчивый дизайн
2. Динамическая публикация
3. Независимые URL

Ниже я подробно объясню каждый вариант.

1. Адаптируемый или отзывчивый дизайн

Как следует из названия, сайт реагирует на устройство, с которого он осуществляется, адаптируя представление страницы к размеру экрана. Сайты этого типа изменяют расположение элементов страницы в зависимости от размера окна навигации. Это конфигурация, которая Google рекомендует ,

Характеристики адаптивного или адаптивного дизайна:

• Один и тот же URL для мобильных и настольных компьютеров
• Один и тот же HTML-код для всех устройств
• В основном одинаковый контент на всех устройствах
• Страница автоматически адаптируется к настройкам экрана

Преимущества и недостатки адаптивного или адаптивного дизайна

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

преимущества:

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

недостатки:

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

Технические вопросы адаптивного или адаптивного дизайна

Медиа-запросы

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

Это аспект половины запроса для экрана размером 767 пикселей или меньше:

@media только экран и (максимальная ширина: 767 пикселей) {
.site-title {
размер шрифта: 24 пикселя;
размер шрифта: 2,4 мм;
}
[другие стили]
}

Отдельные таблицы стилей

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

<link href = "mobile.css" type = "text / css" media = "screen и (max-device-width: 767px)" rel = "stylesheet" />

Meta Viewport

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

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

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Этот ярлык означает следующее:

• width = device-width - страница будет адаптирована к экрану устройства.
• начальный масштаб = 1,0 - начальный масштаб будет равен размеру экрана (т. е. ни масштаб, ни масштаб).

JavaScript

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

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

Наиболее популярные настройки JS:

• Адаптивный JavaScript - код JS ведет себя по-разному в зависимости от устройства, на котором он выполняется. Это конфигурация, которую рекомендует Google ,
• Комбинированное обнаружение - Различный код JS отправляется на каждый тип устройства.
• Динамический JavaScript - аналогичен предыдущему, только обнаружение устройства и отправка кода осуществляется через динамический URL-адрес.

На этой странице у вас есть Различные инструменты JavaScript для адаптивных сайтов ,

2. Динамическая публикация

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

Характеристики динамической публикации:

• Один и тот же URL для всех устройств
• Отличный HTML-код для мобильных телефонов, чем для настольных компьютеров
• Содержание и макет страницы в зависимости от устройства

Преимущества и недостатки динамической публикации

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

преимущества:

• Это позволяет обеспечить персонализированный опыт для мобильных пользователей
• Облегчить Google задачу консолидации авторитета страницы в одном URL
• Это обычно предлагает лучшее время загрузки, чем отзывчивый или отзывчивый дизайн

недостатки:

• Обнаружение агента пользователя может завершиться неудачно, что приведет к загрузке неверной версии страницы и ухудшению качества работы пользователя.
• Google может понять маскировку или действие маскировки, если обнаружение пользовательского агента не удается с помощью поисковых роботов
• Сети распространения контента или CDN могут принять решение не показывать кэшированную версию страницы, что делает CDN бесполезным.
• Требуется хранить два сайта отдельно

Технические вопросы динамического издания

Различный заголовок: User-Agent

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

Полезно знать, что заголовок Vary не является метатегом и что он также не найден в HTML-коде страницы. Это значение, включенное в заголовок, возвращаемый сервером:

GET / page-1 HTTP / 1.1
Хост: www.example.com
(... запрошены остальные HTTP-заголовки ...)

HTTP / 1.1 200 OK
Тип контента: текст / HTML
Варь: Пользователь-агент
Контент-длина: 5710
(... остальные HTTP-заголовки ответили ...)

Чтобы добавить заголовок Vary: User Agent с помощью .htaccess, вы можете использовать следующий код:

Заголовок приложения Vary User-Agent

В WordPress вы можете сделать это, используя функцию из файла functions.php :

function add_vary_header ($ headers) {
$ headers ['Vary'] = 'User-Agent';
вернуть заголовки $;
}
add_filter ('wp_headers', 'add_vary_header');

Если вы хотите добавить заголовок только на определенных страницах, вы можете использовать PHP:

<? php
заголовок («Vary: User-Agent, Accept»);
?>

В Nginx используйте модуль ngx_headers_more :

more_set_headers -s 200 "Vary:" "Accept-Encoding, User-Agent";

После реализации имейте в виду, что ответом Vary всегда должен быть «User-Agent», в отличие от «Accept-Encoding», который отображает нединамическая страница. Вы можете проверить различные заголовки HTTP с помощью инструмента Исследуйте как Google в WMT, а также с этот другой инструмент SEOBook ,

Обнаружение пользовательских агентов

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

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

в это руководство Google У вас есть больше информации о том, как реализовать динамическую публикацию на вашем сайте.

3. Независимые URL

Обычно для каждой страницы сайта создаются две версии, размещая мобильную версию в поддомене или подкаталоге. Конечно, вы видели эту реализацию на сайтах, которые перенаправляют смартфон на поддомен m.example.com или в подкаталог example.com/m/ .

Независимые функции URL:

• Различные URL-адреса для мобильных устройств, чем для настольных компьютеров
• Отличный HTML-код для мобильных телефонов, чем для настольных компьютеров
• Содержание и макет страницы в зависимости от устройства

Преимущества и недостатки использования независимых URL

преимущества:

• Проще реализовать, чем динамическая публикация
• Он может предложить контент и совершенно другой пользовательский интерфейс для мобильных пользователей
• Это позволяет более сегментированное отслеживание, когда каждая версия имеет свою собственную учетную запись Analytics и Search Console (также недостаток)

недостатки:

• Существует риск дублирования контента, если реализация не выполнена правильно
• Требуется перенаправление, что замедляет загрузку
• Может быть, поисковая система делит авторитет сайта между двумя версиями
• Данные отслеживания хранятся в отдельных учетных записях Google Analytics и Search Console (также преимущество)
• Требуется хранить два сайта отдельно

Независимые технические проблемы URL

Rel = "Альтернатива"

HTML-тег rel = "alternate" используется для указания поисковой системе, где находится мобильная или альтернативная версия страницы.

Например, для страницы рабочего стола http://www.example.com/version-for-desktop.html альтернативный тег будет включен в заголовок HTML-кода следующим образом:

<link rel = "alternate" media = "only screen and (max-width: 767px)"
href = "http://m.example.com/version-para-movil.html">

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

Rel = "Канонический"

HTML-тег rel = "canonical" он используется для указания поисковой системе, где находится настольная версия страницы.

Например, для мобильной страницы http://m.example.com/version-para-movil.html канонический тег будет включен в заголовок HTML-кода следующим образом:

<link rel = "canonical" href = "http://www.example.com/version-para-escritorio.html">

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

Sitemaps

Альтернативный метод альтернативной метки состоит в том, чтобы включить мобильную версию каждой страницы в карта сайта ,

Принятые обозначения следующие:

<? xml version = "1.0" encoding = "UTF-8"?>
<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns: xhtml = "http://www.w3.org/1999/xhtml">
<URL>
<loc> http://www.example.com/version-de-escritorio.html </ loc>
<xhtml: ссылка
rel = "alternate"
media = "only screen and (max-width: 767px)"
href = "http://m.example.com/version-de-moviles.html" />
</ url>
</ urlset>

Имейте в виду, что хотя в картах сайтов нет необходимости включать альтернативную метку, каноническая метка все еще необходима для избегать дублирования контента мобильной версии.

Автоматические перенаправления

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

Google поддерживает Два типа перенаправлений:

• HTTP перенаправления - выполняется от пользовательского агента, который появляется в заголовках HTTP-запроса. Это может быть реализовано с помощью .htaccess (рекомендуется) или с помощью PHP. Вопреки тому, что рекомендуется для вообще перенаправляет (это 301) в этом случае рекомендуется использовать 302. С Мобильный Pure Oxigen Labs перенаправляет зрителя Вы можете проверить разные коды ответа сервера для нескольких устройств.
• JavaScript перенаправляет - они медленнее, чем HTTP, потому что необходимо загрузить страницу перед выполнением кода JS. Поэтому их следует использовать только в том случае, если вы не можете использовать перенаправления HTTP.

Важно, чтобы перенаправления соответствовали альтернативным и каноническим меткам. При доступе с мобильного телефона к настольной версии сайт должен перенаправить на URL-адрес, указанный в значении rel = "alternate" , а при доступе с настольного компьютера к мобильной версии сайт должен перенаправить на URL-адрес, указанный = "Канонический" .

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

Как реализовать мобильную версию в контент-менеджерах или CMS

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

Вот несколько альтернатив для основной CMS:

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

Наконец, если ваша CMS не входит в число тех, что я прокомментировал, перейдите на этот Руководство Google по настройке программного обеспечения вашего Интернета , Более того, вы до сих пор не можете найти разъяснения для своей CMS, я призываю вас отправить сообщение в поисковик добавить его в следующую ревизию.

Остерегайтесь автоматической реализации мобильных сайтов

Автоматическая реализация является альтернативой для владельцев сайтов с небольшим количеством ресурсов. Он состоит из онлайн-сервисов, которые после ввода URL-адреса сайта мгновенно и полностью автоматизируют создание мобильной версии.

Самые известные поставщики этой услуги DudaMobile и bMobilized ,

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

• Мобильная версия может быть расположена в домене третьей стороны - возможно, она находится в домене поставщика услуг, и в этом случае услуга вас не интересует. Мобильная версия должна находиться в поддомене или подкаталоге вашей собственности и всегда в домене, где находится версия для ПК.
• Мобильная версия может не реализовывать тег rel = "canonical" - поскольку мобильный сайт работает через отдельные URL-адреса, канонический тег должен присутствовать на мобильных страницах и указывать на соответствующий URL-адрес рабочего стола.
• Вы должны реализовать тег rel = "alternate" самостоятельно - альтернативный тег должен быть включен в страницы версий для настольных компьютеров и указывать на соответствующий мобильный URL-адрес. Почти наверняка вы будете нести ответственность за добавление альтернативных заглушек или карты сайта с альтернативными URL-адресами.

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

Лучшие практики мобильного SEO

Может показаться, что традиционные принципы SEO, такие как доступность, удобство использования и контент, абсолютно одинаковы для мобильных устройств. Однако поскольку смартфоны используются совсем не так, как настольные компьютеры, эти методы неэффективны.

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

Это фундаментальные принципы:

• Разблокировать CSS, JavaScript и изображения - Сегодня Google обрабатывает веб-страницы так же, как браузеры, для чего вам нужен доступ к CSS, JS и изображениям. Если вы заблокируете эти ресурсы в своем файле robots.txt , поисковая система не сможет оценить мобильную версию и, как следствие, Вполне возможно, что ваш рейтинг влияет ,
• Улучшить скорость загрузки - Если пользователь не подключен через WiFi, соединение со смартфонов будет медленнее, чем на настольных компьютерах. Скорость влияет на опыт просмотра и преобразования Вот почему это так важно. В дополнение к снижению веса страниц рекомендуется использовать такие вещи, как использование кэша браузера и включение сжатия, не забывая при этом технологию ускоренных мобильных страниц. AMP , Для измерения скорости загрузки используйте инструменты Google PageSpeed и Мобитест Акамаи ,
• Используйте правильные ключевые слова - Имейте в виду, что мобильные пользователи выглядят иначе, чем пользователи настольных компьютеров. Поскольку печатать на маленьком экране неудобно, они предпочитают короткие сроки и часто принимают предложения поисковых систем. Инструмент KeywordTool.io является отличным союзником в поиске мобильных ключевых слов.
• Адаптировать заголовки и описания - Они должны иметь длину в соответствии с пространством, доступным в списках поиска, более сокращенным, чем на рабочих столах.
• Использовать структурированные данные - Из-за небольшого размера экранов расширенные фрагменты , отображаемые на страницах результатов, становятся более заметными и с большей вероятностью получают клики. Чтобы выбрать их, вы должны описать свои страницы с Schema.org .
• Оптимизировать для локального поиска - Если ваш бизнес работает локально, не забудьте также оптимизировать этот компонент, уделяя особое внимание названию трио, адресу и номеру телефона на всех страницах.

Что касается дизайна, рассмотрим следующее:

• Не использовать вспышку - если телефон не может воспроизводить SWF-файлы, пользователь ничего не увидит. Если важно добавить эффекты, ограничиться HTML5 ,
• Не используйте всплывающие окна или всплывающие окна - они предоставляют отвратительный пользовательский опыт, занимая весь экран и его очень трудно закрыть. Наиболее часто перед всплывающим окном пользователь отскакивает и переходит на другой сайт, который их не использует.
• Дизайн для большого пальца - подумайте, что пользователь будет использовать свой большой палец для навигации по вашему сайту. Он адаптирует размер кнопок, чтобы избежать случайных пульсаций и освобождает способ прокрутки . Кроме того, позаботьтесь о том, чтобы меню отображались одним касанием, и убедитесь, что между опциями достаточно места. Инструменты MobileTest, я и Screenfly показать как будет выглядеть сайт на разных устройствах.

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

Вы уже знаете, как оптимизировать свой мобильный сайт?

Flickr Creative Commons изображение через Карлис Дамбранс