×
Россия +7 (495) 139-20-33

Google рассказал, как сделать старый статичный сайт mobile-friendly

Россия +7 (495) 139-20-33
Шрифт:
0 12953

Даже старый статичный сайт на HTML можно подготовить к грядущему обновлению алгоритма Google. Подробную инструкцию, как это сделать, опубликовала Зинеб Аит Бахаджи (Zineb Ait Bahajji), аналитик Google, на форуме для вебмастеров.

Даже если сайт нельзя перевести на CMS, остаются способы сделать его mobile-friendly:

  • Используйте режим эмуляции в браузере Chrome, чтобы протестировать отображение сайта на разных экранах и разрешениях.
  • Настройте область просмотра.
  • Используйте CSS вместо и других встроенных HTML-элементов.
  • Если вы видите, что страница слишком большая по ширине, возможно, это вызвано каким-то HTML-элементом. Следует использовать HTML-элементы с CSS, которые самостоятельно будут подстраиваться под необходимые размеры. Узнать больше об оптимизации CSS можно здесь.
  • Уберите все элементы с фиксированной шириной (например, ) и замените их элементами с относительной шириной (например,
    ), максимальной шириной (
    ) или адаптивной шириной в соответствии с медиазапросом.
  • Добавьте img { max-width:100% } в таблицу стилей. Это достаточно простой способ работы с широкими изображениями, позволяющий «подгонять» их под ширину экрана устройства, с которого просматривается сайт.
  • Избегайте использования
  • в макете страницы. Используйте
    только для таблиц. Если у вас уже есть
    в макете, прежде всего, конвертируйте его в div + CSS floats/inline блоки для правильного отображения на десктопе. После этого добавьте медиазапросы, чтобы элемент стал адаптивным. Больше узнать об основах адаптивного дизайна можно здесь.
  • Избегайте широких таблиц (с 3-4 столбцами и более), т.к. они могут некорректно отображаться на мобильных устройствах. Если у вас уже есть подобные элементы, рекомендуется модифицировать их или преобразовать код в стиль без таблицы (
    ).
  • Избавьтесь от тегов
    , т.к. они зачастую делают страницу шире. Как именно это сделать, зависит от наполнения этих тегов: 
        
    • для форматированного текста используйте внешние отступы и поля в CSS,
    • для таблиц используйте
  • .
  • для шрифтов фиксированной ширины используйте CSS font-family:monospace
  • для всего остального, что действительно требует сохранения пространства вокруг (например, компьютерный код), допускается использование
    , но следует добавлять style="overflow:auto;", чтобы был возможен горизонтальный скроллинг внутри данного элемента. 
  • Добавьте объявление DOCTYPE для пользователей, использующих старые десктопные браузеры, такие как Internet Explorer 8. Без правильно оформленного тега DOCTYPE в верхней части HTML кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. Использование объявления DOCTYPE призывает их следовать стандарту, уменьшая шансы, что старые браузеры будут неверно показывать верстку страницы.
  • Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах. 

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Случилось что-то важное? Поделитесь новостью с редакцией.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
Рост ботных переходов на сайт: как интерпретировать и что делать
Mike
5
комментариев
0
читателей
Полный профиль
Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
Рустам
1
комментарий
0
читателей
Полный профиль
Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
Как влияют отзывы на показатель отказов/выходов с сайта. Эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Жаль что гугл стал меньше ценить пользовательский контент. Но отзывы все еще важны, в любом слае_)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!