1. Как узнать, что ваш сайт подвержен ошибкам с мобильных устройств?
2. 1. Имейте кликабельные элементы слишком близко друг к другу
3. 2. Дайте плохие указания на размер ваших страниц и их настройку для браузеров
4. 3. Ссылка без видимой причины для мобильных и настольных версий
5. 4. Заблокируйте ключевые файлы типа JavaScript или CSS
6. 5. Слишком долгое время загрузки ваших страниц
7. 6. Используйте нестандартный контент, такой как Flash
8. 7. Используйте навязчивую промежуточную рекламу
9. Родная реклама:
10. Откровение:
11. Баннер:
12. Что запомнить из этой статьи?

2019 год объявляет особенно богатый год для SEO. За 20 лет работы Google представила план атаки для пользователей на мобильных устройствах. Кроме того, поисковая система четко показала свои намерения с развертыванием индексации «первым делом». Таким образом, если ваш сайт не предлагает лучший мобильный опыт, чем у ваших конкурентов, есть большая вероятность того, что эти же сайты превосходят вас в результатах поиска (на мобильных устройствах и на настольных компьютерах) ...

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

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

Если вы используете CMS, например WordPress, с отзывчивой темой и аккуратным пользовательским интерфейсом, не думайте, что вы будете избавлены от этих ошибок. Я даже посоветую вам быть бдительными, если вы используете плагины. Следуй за этим SEO руководство по WordPress чтобы начать оптимизацию вашего сайта на WordPress.

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

Если Консоль поиска Google остается основным инструментом для выявления этих ошибок в мобильном маркетинге, несколько бесплатных инструментов позволят вам оценить потенциал SEO для мобильной версии вашего сайта.

• Google Mobile Test : Этот тест расскажет вам больше о том, как робот Googlebot видит ваш мобильный сайт и какие его элементы считаются штрафными;
• PageSpeed ​​Insights : Этот инструмент Google анализирует содержание вашей страницы, чтобы дать вам рекомендации, чтобы сделать эту страницу быстрее;
• маяк Опять же, это инструмент Google, который доступен только в Google Chrome и Chromium (доступен с помощью инструментов для веб-разработчиков или в качестве расширения Chrome). Lighthouse позволит вам, помимо прочего, проверять эффективность и доступность ваших страниц;
• GTmetrix : Другой анализатор производительности, независимый от Google на этот раз, который также позволяет сравнивать несколько страниц (включая страницы ваших конкурентов ...) между ними;
• Консоль поиска : Если вы заинтересованы в оптимизации своего сайта, Google Search Console позволит вам идентифицировать страницы с ошибками на мобильных устройствах. Остальная часть этой статьи будет посвящена главным образом этим ошибкам и способам их устранения.

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

1. Имейте кликабельные элементы слишком близко друг к другу

Нужно увеличить масштаб до 300% на своем мобильном телефоне, чтобы нацелить кнопку или ссылку: мы все были там! И сказать, что опыт не очень приятный (особенно когда вы в конечном итоге нажимаете не на тот элемент!).

Так что же делать?

Положить себя на место своих пользователей и самостоятельно протестировать мобильную версию - это, безусловно, начало.

По данным Google, оптимальный размер элементов, на которые можно нажимать, на мобильной странице должен соответствовать кончику вашего пальца, или 9 мм (48 пикселей), по данным Google. Это не означает, однако, что каждая кнопка, ссылка или элемент навигации должны быть не менее 9 мм, но поверхность, на которую можно кликать, должна быть ближе к этому числу.

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

2. Дайте плохие указания на размер ваших страниц и их настройку для браузеров

Мы склонны считать, что есть только 3 адаптивных формата: рабочий стол, планшет и смартфон. Тем не менее, есть много вариантов между каждым форматом. Возьмем, к примеру, разрешение экрана Pixel 2 (411 x 731) и iPhone 6 (375 x 667).

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

Так что, если вы столкнетесь с этой ошибкой?

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

Вид источника: https: //votresite.com

затем найдите строку кода в своем заголовке, начинающуюся с <meta name = "viewport" .

Если вы еще не настроили тег окна просмотра для своего сайта, начните с него.

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

<meta name = "viewport" content = "width = 600">

Рецепт для оптимизированного тега области просмотра:

• ширина = ширина устройства должна быть включена, чтобы соответствовать ширине используемого устройства;
• Первоначальный масштаб = 1 должен быть включен, чтобы установить соотношение 1: 1 между пикселями CSS и независимыми от устройства пикселями.

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

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

3. Ссылка без видимой причины для мобильных и настольных версий

Это относится только к сайтам с мобильной версией с отдельным URL-адресом ( example.com для настольной версии и m.example.com для мобильной версии).

Когда ваши пользователи посещают мобильную версию вашего сайта (например , .com ) с URL-адреса рабочего стола ( example.com/about ), перенаправьте их на соответствующую мобильную страницу ( например ,.com). / о )

В случае, когда мобильная версия страницы не существует (например, com / about ), распространенной ошибкой является перенаправление пользователя на мобильную домашнюю страницу ( example.com/about-). > m.example.com ).

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

В итоге:

Если URL-адрес m.example.com/about не существует, перенаправление на example.com/about всегда будет лучше восприниматься, чем перенаправление на m.example.com.

4. Заблокируйте ключевые файлы типа JavaScript или CSS

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

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

Кроме того, блокировка ключевых файлов типа JavaScript или CSS не позволяет Googlebot выполнять это распознавание, что, скорее всего, повлияет на ранжирование страниц, участвующих в результатах поиска.

Так что, если вы столкнетесь с этой ошибкой?

Проверьте файл robots.txt в корне вашего сайта. В общем, это доступно через URL yoursite.com/robots.txt . Убедитесь, что ни один ключевой файл не заблокирован.

Один из способов обеспечить Google доступ ко всем вашим пользовательским интерфейсам - это ввести вашу страницу в инструменте. Получить и визуализировать Консоль поиска Google.

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

5. Слишком долгое время загрузки ваших страниц

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

Но что подразумевается под слишком большой скоростью загрузки? Что следует считать оптимальным временем загрузки?

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

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

Так что, если ваш сайт слишком длинный?

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

Вот пример:

Как определить свой FMP?

Наиболее эффективным способом является использование Chrome Web Developer Tools. Проанализируйте свою страницу с помощью команды Inspect в этом расширении и выберите вкладку Сеть, прежде чем обновлять страницу.

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

Есть много способов оптимизировать ваш FMP. Помимо уменьшения веса файлов на своей странице, вы также можете:

• Запустите сканирование файлов JavaScript ботами;
• Последовательность вашего исходного кода по-разному
• Расставьте приоритеты пунктов выше ватерлинии ...

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

6. Используйте нестандартный контент, такой как Flash

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

Например, Flash является собственностью Adobe и не является открытым стандартным веб-форматом, что делает его несовместимым на большинстве мобильных устройств. То же самое касается других читателей контента.

Что делать, если ваш сайт использует Flash или контент, несовместимый с мобильными версиями?

Я рекомендую вам выбрать стандартные альтернативы, такие как теги HTML5 для чтения вашего анимационного контента. Google Web Designer - это отличный инструмент для разработки HTML5, который позволяет создавать интерактивный контент HTML5.

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

7. Используйте навязчивую промежуточную рекламу

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

Что делать, если у вас есть навязчивые модули?

Рекомендуется оптимизировать этот дисплей или даже удалить его на мобильном телефоне.

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

Родная реклама:

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

Откровение:

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

Баннер:

Простой ненавязчивый баннер, не превышающий length длины экрана.

Что запомнить из этой статьи?

Вопрос успешного взаимодействия с пользователем находится в центре внимания Google и других поисковых систем.

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

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

Похожие

Комментарии