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

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

Даже старый статичный сайт на 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
    Кейс: как продвинуть сайт производителя мебели на заказ в Москве
    Art Moderator
    2
    комментария
    0
    читателей
    Полный профиль
    Art Moderator -
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
    «Баден-Баден»: как выйти из-под фильтра
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Здравствуйте! У меня совсем новый сайт (около месяца). Как только добавила страницы - были на 64, 45 и т.д. местах в выдаче яндекса по нч и сч запросам, но через несколько дней улетели за пределы 200. Что это баден - баден или песочница? Текст вроде не спамный, но мне трудно судить. Сайт portretnazakaz.ru
    Второе дыхание ссылочного продвижения
    Rookee.ru
    24
    комментария
    0
    читателей
    Полный профиль
    Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
    32 инструмента в помощь SEO-специалисту
    Cynthia Morgans Funding
    1
    комментарий
    0
    читателей
    Полный профиль
    Cynthia Morgans Funding - Мы предоставили более 1 миллиарда долларов бизнес-кредитов более чем 15 000 владельцев бизнеса, как и вы. Мы используем нашу собственную технологию определения рисков, чтобы предоставить вам подходящий бизнес-кредит, чтобы вы могли развивать свой бизнес. Наши услуги быстрые и надежные, кредиты утверждены в течение 72 часов после успешного применения. Мы предлагаем кредиты от минимального диапазона от 10 000 долларов США до 500 миллионов долларов США. Мы предоставляем вам кредит с низкой процентной ставкой 2% и продолжительностью кредита от 1 до 30 лет, чтобы погасить кредит (безопасный и необеспеченный). Не держите свои финансовые проблемы в себе, чтобы вы не были владельцем долга или финансовым стрессом, поэтому вы должны быстро связаться с нами для решения ваших финансовых проблем. Это будет большой радостью для нас, когда вы будете финансово стабильны. E-mail: onlinefunding01@gmail.com
    Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
    Анатолий Шевчик
    1
    комментарий
    0
    читателей
    Полный профиль
    Анатолий Шевчик - +1097988
    Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
    Сергей Дембицкий «Sima-Land.ru»
    22
    комментария
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Максим Мирошник
    2
    комментария
    0
    читателей
    Полный профиль
    Максим Мирошник -
    Все, что нужно SEO-специалисту. Обзор инструментов
    Администратор Сайта
    1
    комментарий
    1
    читатель
    Полный профиль
    Администратор Сайта - Шаришь в seo! Сервис реально хороший
    «Прямая линия» с Артуром Латыповым: отвечаем на вопросы
    God Koss
    1
    комментарий
    0
    читателей
    Полный профиль
    God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    321
    Комментариев
    262
    Комментариев
    234
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    86
    Комментариев
    80
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54
    Комментариев
    53

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