- Исправить проблемы с мобильностью
- Сенсорные элементы слишком близко
- Маленький размер шрифта
- Окно просмотра не настроено
- Результаты в
Несмотря на то, что веб-мастеров заблаговременно предупреждали, что пренебрежение мобильным трафиком на их веб-сайты может повлиять на их рейтинг, для меня все равно было шоком испытать сокращение вдвое моего трафика. И, следовательно, в два раза меньше доходов от моего сайта. В прошлом у меня были такие большие падения, я их игнорировал, а затем обнаружил, что рейтинг / прибыль вернулись к прежним уровням, когда Google доработал их алгоритм (т.е. исправил то, что они сломали).
На этот раз, однако, я думал, что я посмотрю на то, что Инструменты Google для веб-мастеров должен был сказать по этому вопросу. Я был очень удивлен, обнаружив это сообщение: 
Наивный, как и я, я не думал, что: 1) мой сайт был настолько плох, что его считали бы непригодными для мобильных устройств, 2) даже если бы он был таков, трафик на него был бы настолько тяжелым.
Учитывая, что у меня были проблемы с мобильностью, я обратился к авторитетному источнику информации: Отзывчивый веб-дизайн , Это отличная статья, но она не помогла мне быстро решить проблемы. Вместо этого, если вы находитесь в той же лодке, что и я, просто следуйте Инструкции Google по решению проблем мобильного SEO и прочитайте статью A List Apart на досуге.
Исправить проблемы с мобильностью
Было предпринято несколько действий для исправления проблем с мобильностью:
Сенсорные элементы слишком близко
Как и большинство веб-мастеров, я использую неупорядоченный список для отображения ссылок на меню. Хотя эти ссылки меню просты в использовании на моем настольном компьютере, их мучают пользователи с колбасой, которых я использую на мобильном телефоне. Они просто слишком близко друг к другу. Было легко изменить CSS для добавления отступов к каждому элементу списка, но задача состояла в том, чтобы сделать новый отступ применимым только к мобильным устройствам. Войти медиа-правила , С помощью правил мультимедиа мы можем указать правила CSS, которые применяются только к определенному разрешению экрана. Я использовал это:
@ media screen и (max-width: 480px) {# section-navigation ul li {padding: 40px 0 0; размер шрифта: 2em; высота линии: 1,5 метра; }}
Здесь я увеличил верхний отступ до 40 пикселей, шрифт до 2em, а также высоту строки до 1,5 em, чтобы учесть предыдущие изменения. Это радикальные изменения, но они дают желаемый эффект разнесения ссылок меню - и они применимы только к экранам шириной 480px или уже (то есть мобильное устройство).
Маленький размер шрифта
Используя описанный выше метод для таргетинга на мобильные устройства, я увеличил размер шрифта для контента на моем веб-сайте, а не только для ссылок.
Окно просмотра не настроено
Каждой странице сайта в разделе заголовка требовалось следующее:
<meta name = viewport content = "width = device-width, initial-scale = 1">
Не волнуйся о том, чтобы понять это, просто вставь!
Результаты в
Я могу сообщить, что через неделю мой трафик и доход выросли почти до прежних уровней.
