Новый мобильный алгоритм Google (16 советов)

Google с 21 апреля 2015 окончательно и бесповоротно вводит фактор mobile-friendly.

Сайты, оптимизированные под мобильные устройства, окажутся выше в поисковой выдаче.

Как показать поисковику, что ваш сайт оптимизирован?

Как сайту подружиться с мобильником?

  1. Тестируйте сайт на разных разрешениях. Например, с помощью Google Chrome в режиме эмуляции устройств или с помощью Developer Toolbar в Mozilla Firefox
  2. Настройте масштабирование страницы с помощью тега meta viewport . Подробнее о теге meta viewport на Mozilla Developers Network.
  3. Играете со шрифтами? — Используйте файлы CSS вместо <font> и других встроенных элементов HTML.
  4. Сделайте так, чтобы элементы страницы оставались в пределах экрана. Уезжающий за края элемент — это плохо.
  5. Ваш новый друг — Google PageSpeed Insights, инструмент для оптимизации загрузки страниц (в частности — CSS).
  6. Скажите твердое «НЕТ» размерам в пикселях. (а-ля <table width=600>)! Заменяйте их их относительной шириной (например, <table width=«80%»>), максимальной (<table style=«max-width:600px;»>) или установите адаптивный показатель ширины (в em или rem), который зависит от запроса.
  7. Внесите тег img { max-width:100% } в CSS. Широкие изображения будут оставаться в пределах ширины экрана.
  8. Табличная верстка, прощай! Используйте <table> только для «настоящих» таблиц, а там где на таблицах «держится» весь дизайн, их следует поменять на div’ы.
  9. Таблицы на много колонок могут вылезать за мобильные экраны. Старайтесь сократить их.
  10. Часто маркированный список — лучше любой таблицы.
  11. Избавьтесь от тегов <pre>, где это возможно, потому что они часто делают страницы шире.
  12. Для шрифтов фиксированной ширины используйте CSS font-family:monospace.
  13. Если вы показываете на сайте текст, в котором важны правильные переносы строк (например, компьютерный код), используйте <pre>, с «overflow:auto;» чтобы разрешить горизонтальную прокрутку.
  14. Добавьте объявление DOCTYPE для пользователей, использующих старые браузеры, такие как Internet Explorer 8. Без правильно оформленного тега DOCTYPE в верхней части HTML кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. Использование объявления DOCTYPE призывает их следовать стандарту, так что у вас меньше шансов, что старые браузеры будут неверно показывать верстку страницы.
  15. Не используйте Flash — он не может не поддерживаться на мобильных устройствах.
  16. То же касается и других плагинов: нужна 100% уверенность в том, что они будут работать.

Эти простые рекомендации должны благотворно сказаться на позициях вашего сайта.

Будем рады, если вы поделитесь опытом их внедрения.

Бая-я-янНе пригодитсяУже слышал об этомПолезноОчень полезно ← Оцените пост