Мобильное seo продвижение? пошаговое руководство. Неверное использование JavaScript. Какой вариант выбрать

Let"s make sure your site shows up in search results. Here you can learn how to configure your site for multiple devices and help search engines understand your site.

Choose your mobile configuration

3 ways to implement your mobile website

There are three main techniques for implementing a website that can handle view screens of all types and sizes. Here’s a chart comparing the three methods:

Configuration	Does my URL stay the same?	Does my HTML stay the same?
Responsive Web Design
Dynamic Serving
Separate URLs

1. For more information on selecting a mobile site configuration (and weighing the pros and cons of each option), please see “Building Websites for the Multi-Screen Consumer ”.

   The key points for going mobile

   As we discuss later, there are different configurations you can choose to make your site mobile-friendly. However, there are key points that you should take note of regardless of which configuration you choose to set up.

   1. Signal to Google when a page is formatted for mobile (or has an equivalent page that’s formatted for mobile). This helps Google accurately serve mobile searchers your content in search results.
   2. Keep resources crawlable . Do not use robots.txt to block search engines from accessing critical files on your site that help render the page (including ads). If Googlebot doesn’t have access to a page’s resources, such as CSS, JavaScript, or images, we may not detect that it’s built to display and work well on a mobile browser. In other words, we may not detect that the page is "mobile-friendly," and therefore not properly serve it to mobile searchers.
   3. Avoid that frustrate mobile visitors , such as featuring unplayable videos (e.g., Flash video as the page’s significant content). Mobile pages that provide a poor searcher experience can be demoted in rankings or displayed with a warning in mobile search results. More information in Common mistakes section.

   Understand the difference between devices

   Mobile : In this document, "mobile" or mobile devices refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.

   Tablets : We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.

   Multimedia phones : These are phones with browsers that are able to render pages coded to meet XHTML standards, support HTML5 Markup, JavaScript/ECMAscript but might not support some of the extension APIs in the HTML5 standard. This generally describes the browser in most 3G-ready phones that are not smartphones.

   Feature phones : On these phones, browsers lack the capability to render normal desktop webpages coded using standard HTML. This includes browsers that render only cHTML (iMode), WML, XHTML-MP, etc.

   Note: Our recommendations are geared toward smartphones, but we encourage multimedia and feature phones site owners to follow the same advice where they feel appropriate.

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

Адаптивный дизайн . Приоритетен в разработке для SEO. Используется единый HTML-код и URL для всех устройств. Сама страница - подстраивается под разрешение и размер экрана устройства.

Динамический показ . Используется единый URL для всех устройств, но вёрстка (код) зависит от разрешения и размера экрана.

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

AMP и Турбо-страницы . Отдельные страницы, которые хранятся на сервере поисковой системы (AMP или Accelerated Mobile Pages - Google. Турбо - Яндекс).

Тип адаптации и суть метода	URL остается без изменений	Код остается без изменений	Плюсы и минусы для SEO
Адаптивный дизайн. Используется универсальная вёрстка и стили, которые адаптируют отображение страницы под то разрешение экрана, на котором просматривается URL.			Повышенная сложность и размер кода, более сложная стартовая реализация / вёрстка.
Динамический показ. Сначала - определяется какой тип устройства и разрешение экрана у пользователя и в зависимости от параметров - показывается один из вариантов HTML-вёрстки.			Использование одного URL. Необходимость отдельного контроля мобильной и десктопной версии каждой страниц, их сравнение, поисковая и техническая оптимизация. Как правило, приводит к наличию ошибок в технической оптимизации сайта.
Отдельная mobile-версия. Расположение мобильной версии сайта на отдельном поддомене или домене.			Порой, более удобная разработка мобильной версии, если десктопная успешная и уже давно существует. Необходимость отдельного контроля. Большие сложности технической настройки. Сложности для SEO в учёте факторов ранжирования из-за различных URL для мобильных и десктопных пользователей.
AMP и Турбо-страницы. Специально разработанная и упрощенная версия документа, которая размещается на серверах поисковой системы, что позволяет упростить её и загружать быстрей для смартфонов.			Поисковые системы выделяют документы данного типа в результатах выдачи (SERP), что может приводить к росту трафика на них. Пользователь не переходит на сам сайт, так как документ располагается на сервере поисковой системы (типичный вид URL в случае с Турбо-страницей «https://yandex.ru/turbo?text=URL-документа-с-исходного-сайта»). Только пользователи, перешедшие из поисковых систем видят контент, адаптированный для просмотра с переносных устройств. Сложности в учёте факторов ранжирования.

Аудит мобильной версии сайта: чек-лист

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

В случае использования оптимальной для SEO адаптивной версии, добавляется ещё один значимый, особенно в эпоху пункт.

Чек-лист для отдельной мобильной версии

В том случае, если ваш проект использует отдельную мобильную версию на поддомене m.site.ru , требуется проверить реализацию по трём дополнительным пунктам чек-листа.

Продвижение сайта в мобильной выдаче

Поисковые системы учитываю адаптированность сайта при ранжировании в мобильной выдаче. В Яндексе с 2016 года действует алгоритм Владивосток , Google начал учёт ещё ранее - с 2015 года.

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

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

Проверить проект на соответствие требованиям по чек-листу выше.

Провести аналитику позиций в десктопной и mobile-выдаче и сравнить показатели.

На основании полученной аналитики - сделать выводы о необходимости проведения дополнительных работ по росту сайта в мобильной выдаче.

Хорошей практикой является регулярный контроль показатели сайта в выдаче для устройств двух типов и оценка основных метрик - CTR × WS, % ТОП-10, количество запросов в ТОП.

Сравнительная динамика KPI ресурса в «Пиксель Тулс».

Что делать, если позиции проекта в мобильной выдаче существенно ниже, чем в обычной?

Если SEO KPI ресурса в мобильной выдаче ниже, чем в обычной, то требуется:

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

AMP и Турбо-страницы как решение проблемы

Разработка AMP и Турбо-страниц часто позволяет устранить проблемы низких позиций для mobile. Поисковые системы дополнительно помечают данные результаты и, при прочих равных, показывают в выдаче именно их, а не канонические URL.

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

Частые ошибки и их решение

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

Ошибка или недочёт	Критичность	Описание и устранение
Отсутствие / несовпадение оптимизации в title и meta-тегах на мобильной версии.		Требуется проверить, какие заголовки окна браузера и meta-теги у URL mobile-версии. Теги должны совпадать с основной версией сайта.
Наличие блоков с прокруткой (горизонтальной или вертикальной, внутри контейнеров на документе).		Следует минимально использовать контейнеры с прокруткой (вертикальной или горизонтальной). Продумайте отдельно вид адаптации сложных блоков и таблиц на URL, иногда, это требует более креативного подхода.
Всплывающие блоки, виджеты и объявления, мешающие просмотру.		Блок, который занимает на десктопе 5% экрана может закрывать значимую часть всего функционала на переносном устройстве. Часто, к данным блокам относится реклама мобильного приложения, которое есть у проекта. Следует продумать момент отображения данных всплывающих и рекламных блоков и ограничить их объем 5-15% экрана.
Неправильная настройка переадресации.	от 5 до 10/10	Проблема актуальная при наличии отдельной версии. Либо настроен редирект по User-agent со всех страниц на главную страницу, а не на тот же документ на мобильной версии, либо редирект не с 302 кодом ответа.
Скрытие от индексации картинок, JS и CSS-файлов.		Запрет на индексацию JS и CSS-файлов считается ошибкой для всех типов сайтов. Критичной проблема считается в Google, который использует более продвинутый рендеринг при сканировании и выполняет JS. Если от индексации скрыты лишь некоторые скрипты (для нужд SEO), то проблема не является критической.
Наличие невоспроизводимого контента.	от 3 до 8/10	Требуется визуальная проверка содержимого основных URL сайта и исправление найденных ошибок. Следует использовать для анимации технологии HTML5. Критичность определяется количеством страниц на проекте, на которых фиксируется проблема.
		Фактически, задача касается не только мобильной версии и актуальная для всех проектов. Медленная загрузка может стать критическим фактором, если интернет пользователя так же медленный, что характерно для смартфонов без использования Wi-Fi. Исследования показывают, как связаны скорость загрузки и конверсия . Следи за тем, чтобы время загрузки исходного кода было ниже 700 мс, а размер самого кода - до 120-140 КБ.
Неверная настройка meta-тега viewport и область просмотра.		Без корректной настройки meta-тега viewport ресурс не пройдёт проверку на мобилопригодность, что будет приводить к снижению объемов привлекаемого трафика. Часто встречается, что указана фиксированная ширина и страница неправильно отображается на многих устройства и минимальная область просмотра слишком широка и у пользователей появляется горизонтальная прокрутка. Следует устроить эти ошибки.
Наличие мелких элементов, функциональных блоков. Нечитабельный текст.		Проверьте, комфортно ли будет пользователю выполнять типовые действия на сайте: прочитать текст, открыть и закрыть меню, заполнить форму заявки, позвонить? Если элементы слишком мелкие, то увеличьте расстояние между ними и размер шрифта текста (кегль), он не должен быть менее 12 пикселей.
Неоптимизированные формы заказа и конверсионные элементы.		Те формы, которые можно легко заполнить с десктопа, порой, невозможно отправить со смартфона. Убирайте все лишние поля, оставляйте только самое необходимое, скажем, одно обязательное поле - номер телефона или e-mail. Уделить отдельное внимание процессу оформления товара через корзину и оплате со смартфона.
Функциональные элементы, которые работают только при наведении курсора.		Помните, у переносных устройств нет курсора в привычном понимании слова (при касании экрана происходит событие «клик»). Если в дизайне обычной версии используются события, которые срабатывают при наведении курсора (подсказки, увеличение фото, выпадающее меню), то требуется отдельно продумать их поведение на адаптивной версии.
Невозможность осуществить звонок в один клик.		Следите за тем, чтобы пользователи со смартфонов могли осуществить звонок по нажатию на номер телефона в шапке сайта. Для этого: указывайте номер телефона целиком, с кодом страны и города, используйте протокол «tel», который задаст нужное свойство ссылке. +7 495 989-53-11

Данное полное руководство и чек-лист по мобильной адаптации позволят увеличить значения трафика с переносных устройств и поднять его конверсию. Удачи в самостоятельном продвижении сайта и избегайте ошибок!

Особенности мобильного SEO

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

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

Мобильная оптимизация сайта

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

1. Адаптивный
Используя его, посетителям будет предоставляться идентичная версия страницы HTML, с изменением CSS стилей, с целью корректного отображения всех элементов. Этот способ весьма простой и является одним из лучших.
Особенности адаптивного дизайна:

• Его можно применять под любые размеры;
• Простота настройки;
• Отсутствие проблем с дублями страниц;
• Снижение скорости работы площадки.

2. Динамический
При использовании данного способа, помимо CSS файлов, заменяются так же и HTML, но, ни смотря на это, адрес страницы остаётся без изменений. После определения устройства, с которого был выполнен переход, с помощью специальных скриптов, предоставляется подходящие форматы.

Особенности динамического дизайна:

• Возможность изменять содержимое страниц для различных видов трафика;
• Снижение скорости работы площадки;
• Необходимость дополнительных затрат времени, для добавления каждой публикации в 2 видах;
• Нет проблем с дублями страниц.

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

Особенности создания отдельного сайта под мобильный трафик:

• Наличие риска получения проблем с дублями страниц;
• Великолепно подойдёт для больших и сложных сайтов;
• Появляется необходимость делать перелинковку между двумя площадками;
• Возможность представления различного контента на разных страницах.

Вам решать, какой из представленных способов использовать.

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

Вывод: Необходимо тщательно следить за размером каждой страницы, не нагружая лишним материалом.

• • • Если вы решили использовать способ, заключающийся в создании отдельного сайта для мобильного трафика, не забудьте о применении тегов rel canonical и alternative. С их помощью, поисковая система Google, будет легко отличать, какая из площадок является основной, а какая – мобильная версия;
    • Для того чтобы поисковые системы могли благополучно сканировать все мобильные страницы проекта, появляется необходимость в создании карты сайта для мобильных сайтов;
    • Лучший способ повышения удобства использования ресурса – создание различных мобильных приложений. Разработка – занятие не из лёгких. Но, если вам под силу сделать это – приступайте как можно скорее. Вы не ошибётесь;
    • Не допускайте ошибку, которая уже вошла в привычку большого количества вебмастеров (при использовании мобильной версии они направляют пользователя на главную страницу, а не по релевантной ссылке). Ставьте правильные редиректы с каждой страницы, на те же страницы мобильной версии;
    • Различные видео, так же как и изображения, могут не поддерживаться с мобильных устройств. А без этих материалов, пользователи могут хуже воспринимать информацию сайта. Во избежание этого, необходимо изменить формат видеороликов с Flash на HTML5. После этого, информация станет доступна пользователям с мобильных устройств;
    • Какие-то страницы вашей основной площадки, могут не иметь аналогов. В подобных случаях, нужно настраивать страницу с ошибкой 404 на мобильной версии площадки;
    • Многие забывают о том, что интерфейс является одним из самых важных факторов мобильных сайтов. Размер дизайна становится на порядок меньше, и, чтобы он был удобным, нужно грамотно всё разместить (меню, форму поиска, контактные данные…..). Тщательно продумайте, как правильно разместить всё самое важное на не очень большой странице;
    • Использование интеграции с социальными сетями, обеспечит вам и пользователям дополнительные удобства. Ведь практически все, привязывают свой профиль от Вконтакте или Facebook. Так же, будет хорошо, если на мобильной версии помещена кнопка, позволяющая поделиться страницей через свой профиль;
    • После того, как вы создали сайт под мобильный трафик, привяжите его к определённому региону. Это необходимо, так как, исходя из статистических данных, пользователи мобильных устройств, пользуются региональной выдачей;
    • Важнейший элемент каждого ресурса – оформление контента. Вам необходимо позаботиться о том, чтобы информация на вашей площадке, красиво, качественно и корректно отображалась в мобильных устройствах.
      По аналитическим прогнозам, в будущем, интернет будут посещать ещё чаще с помощью мобильных устройств. В этом нет сомнений, из-за безумного роста продаж смартфонов. Поэтому, владельцам сайтов нужно заблаговременно побеспокоиться об этом, и грамотно настроить свою площадку.

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

Мобильный, не обязательно означает «на ходу». Исследования показали, что люди часто берут ближайшее устройство, чтобы что-то быстро найти в интернете, и чаще всего это их смартфон. Они используют его, чтобы узнавать о продуктах и услугах, прежде чем принимать решение о покупке чего-либо, в любое время и в любом месте. Согласно исследованиям Google: пользователи смартфонов имеют более высокий покупательский настрой, чем пользователи настольных компьютеров. Они сосредоточены и готовы покупать. Вы должны поработать чтобы быть там прежде них, когда они ищут ваши товары или услуги.

Мобильный SEO в сравнении с обычным SEO

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

1. производительность сайта
2. пользовательский интерес

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

Мобильный индекс Google

Мобильное seo и его важность еще более ясна благодаря недавнему объявлению Google. В какой-то момент Google переключится на мобильный приоритет. Что это значит? Впервые Google будет определять рейтинги сайтов на основе качества мобильной версии сайта вместо версии для ПК! Новый будет сканировать ваш мобильный сайт и определять, насколько он соответствует производительности, мобильности контента и удобства пользовательского интерфейса. Если у вас все ОК, вы получите лучший рейтинг. Если у вас есть недостаток, другие сайты будут ранжироваться выше, и вы можете проиграть. Даже если вы не фокусируетесь на мобильном телефоне, вас все равно будут судить по вашему мобильному сайту, поэтому пришло время принять меры.

Скоро: что делать что бы улучшить свой мобильный SEO

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

(Прим. пер.: От «только компьютерные фанаты будут пользоваться Интернетом» до «каждый пялится в свой смартфон весь день напролет» через 20 лет. Неплохо, команда .)

Телефон стал продаваться примерно с 1878 года, но потребовался 71 год, прежде чем он появился в каждом доме в США. Это позволило типичному владельцу бизнеса в 1907 году размышлять на протяжении 50 лет, нужен ли ему телефон в магазине или нет.

Для сравнения, у владельца среднего бизнеса в 2007 году было всего 50 месяцев, чтобы подготовиться к неожиданному восхождению смартфонов. Для кого-то это может показаться продолжительным сроком; однако всего лишь у 6 процентов компаний, относящихся к малому бизнесу, есть сайты, адаптированные под мобильные устройства, а у 45 процентов вообще нет сайтов.

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

Почему мобильные устройства стали сейчас жизненно важными

Современные тенденции и подходы в веб-разработке

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

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

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

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

Отзывчивый дизайн – это «гибкая» сетка, которая автоматически «отзывается» (т.е. масштабируется) на изменение размеров экрана.

Мобильная версия – это мобильная копия сайта, доступная по отдельному URL адресу. Вместо www.example.com посетители с мобильных устройств будут перенаправлены на m.example.com.

Динамический показ – это конфигурация, при которой сохраняется URL адрес, но сервер, в зависимости от устройства, отправляет разные варианты веб-страницы.

С точки зрения веб-разработки, каждый из методов имеет свои достоинства и недостатки. Для получения более подробной информации прочтите , от SEO PowerSuite.

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

Если у вас уже есть работающий сайт на WordPress, проверьте его с помощью тестовой страницы Google. Если тест на адаптацию под мобильные устройства не будет пройден, тогда у вас будет два варианта:

Много современных тем для WordPress являются адаптивными. Подумайте о замене своей старой темы.

Если смена темы вас не устраивает, то существует масса бесплатных и платных плагинов, которые вам помогут.

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

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

4. Сделайте так, чтобы сайт не загружался медленно

Уменьшение количества HTTP запросов и оптимизация изображений помогут вашему сайту загружаться быстрее. Инструмент от Google под названием PageSpeed Insight точно скажет, какие проблемы существуют у вашего сайта и как их решить. Далее я перечислил наиболее распространенные.

Уменьшение числа HTTP запросов

Каждое изображение, CSS и JavaScript файл создают отдельный HTTP запрос к серверу. Вот некоторые техники по уменьшению числа запросов:

Убедитесь в том, что у вас всего один внешний CSS файл и внешний JS файл.

Разместите внутренний JavaScript код внизу вашего html документа, перед закрывающим тегом body.

Минифицируйте CSS и JavaScript код.

CSS спрайты помогут объединить многочисленные запросы в всего лишь один.

Используйте data: URI.

Избегайте неправильных HTTP запросов, убирая «битые» ссылки.

Включите браузерное кеширование.

Оптимизация изображений

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