Хочешь повысить отдачу от Директа?
Включи «Автопилот»

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

Россия+7 (495) 960-65-87
Шрифт:
0 10399

Даже старый статичный сайт на 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 или другие плагины, которые обычно не поддерживаются на мобильных устройствах. 

Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    SEOnews и Serpstat запускают конкурс для интернет-маркетологов
    Marina Lagutina
    1
    комментарий
    0
    читателей
    Полный профиль
    Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
    Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
    NiK Malefictum
    3
    комментария
    0
    читателей
    Полный профиль
    NiK Malefictum - Стакивался лишь с тем, что выдачу немного лихорадит первые 2-3 недели, и если у сайта была низкая скорость загрузки - ее нужно поправить. Региональным сайтам НУЖНО ставить HTTPS немного внутряк поправить / микроразметку и прочее прописать мета и пересмотреть контент зарегать компанию в каталогах предприятий и картографии и уже делать просто сделать статейные ссылки бесплатные. и все
    Мир глазами поисковых систем
    Александр Рунов
    18
    комментариев
    0
    читателей
    Полный профиль
    Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
    Инфографика: самые распространенные SEO-ошибки Рунета
    Dmitro Grunt
    2
    комментария
    0
    читателей
    Полный профиль
    Dmitro Grunt - Кстати, у проектов которые продвигает Нетпик все тайтлы не более 65 символов? Или вы надеетесь что кто то послушает советов и отдаст вам часть трафика? :-)
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    День рождения SEOnews: 12 лет в эфире!
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Ура )
    7 причин не работать на биржах копирайтинга
    Dasha Shkaruba
    6
    комментариев
    0
    читателей
    Полный профиль
    Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
    Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
    Оля
    1
    комментарий
    0
    читателей
    Полный профиль
    Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
    SEMrush: факторы ранжирования в Google в 2017 году
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
    Сердитый маркетолог: как вы сами хороните свой сайт, или 16 принципов, которые нужно усвоить заказчикам SEO
    Руслан Латыпов
    2
    комментария
    0
    читателей
    Полный профиль
    Руслан Латыпов - Можно совершенно бесплатно заказать SEO-аудит своего сайта и получить все рекомендации по его продвижению a-erp.com/
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    310
    Комментариев
    262
    Комментариев
    227
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    53
    Комментариев
    52
    Комментариев
    48

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