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

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

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

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


    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Отправить отзыв
      ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
      SEOnews и Serpstat запускают конкурс для интернет-маркетологов
      Marina Lagutina
      1
      комментарий
      0
      читателей
      Полный профиль
      Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
      «Я оптимизировал сайт, а он не в ТОП! Что делать?»
      Павел Горбунов
      8
      комментариев
      0
      читателей
      Полный профиль
      Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
      Монетизация сайта. Как, когда, сколько?
      Гость2
      1
      комментарий
      0
      читателей
      Полный профиль
      Гость2 - Руслан! Спасибо за ваш сервис и за данную статью в частности! С апреля являюсь вашим пользователем - очень доволен как сервисом, так и уровнем заработка! Еще раз спасибо, удачи вашему проекту!
      Мир глазами поисковых систем
      Александр Рунов
      7
      комментариев
      0
      читателей
      Полный профиль
      Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
      Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
      Екатерина Иванова
      1
      комментарий
      0
      читателей
      Полный профиль
      Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
      7 причин не работать на биржах копирайтинга
      Dasha Shkaruba
      6
      комментариев
      0
      читателей
      Полный профиль
      Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
      Google.ru внесли в реестр запрещенных сайтов
      Гость
      1
      комментарий
      0
      читателей
      Полный профиль
      Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
      День рождения SEOnews: 12 лет в эфире!
      Анна Макарова
      308
      комментариев
      0
      читателей
      Полный профиль
      Анна Макарова - Ура )
      Инфографика: самые распространенные SEO-ошибки Рунета
      Alex Wise
      3
      комментария
      0
      читателей
      Полный профиль
      Alex Wise - Спасибо, Женя, за рекомендацию! :) Андрей, чтобы понять, какой программой пользоваться, нужно сделать несколько вещей: 1. Попробовать обе: у нас в Netpeak Spider бесплатный триал на 14 дней с полным функционало; у SFSS до 500 URL всегда бесплатно, но с ограниченным функционалом. 2. Понять свой стиль работы – если вы любите полный контроль и из-за этого более высокую скорость пробивки, тогда выбирайте Netpeak Spider. Если для вас не так важна скорость и количество пробитых URL, то можно остановиться на SFSS. 3. Определиться с нужными функциями: их в обоих программах очень много и как в Netpeak Spider есть уникальные, так и в SFSS есть свои уникальные. Мы всегда ориентируемся на то, чтобы быстро и чётко показать ошибки – для этого у нас вся таблица красится в соответствующие цвета. Думайте!) И, если что, обращайтесь с вопросами – мы будем рады помочь!)
      Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
      Оля
      1
      комментарий
      0
      читателей
      Полный профиль
      Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
      ТОП КОММЕНТАТОРОВ
      Комментариев
      910
      Комментариев
      834
      Комментариев
      554
      Комментариев
      540
      Комментариев
      483
      Комментариев
      373
      Комментариев
      308
      Комментариев
      262
      Комментариев
      224
      Комментариев
      171
      Комментариев
      156
      Комментариев
      137
      Комментариев
      121
      Комментариев
      97
      Комментариев
      97
      Комментариев
      95
      Комментариев
      80
      Комментариев
      77
      Комментариев
      67
      Комментариев
      60
      Комментариев
      59
      Комментариев
      55
      Комментариев
      53
      Комментариев
      52
      Комментариев
      46

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