Как сделать сайт Mobile Friendly для Google за 1 минуту
Пошаговая инструкция простейшей адаптации сайтов для мобильных устройств с учётом рекомендаций Google и автоматизации всего процесса.
21 апреля 2015 года в Google стартовал алгоритм #ДляМобильных. Делать выводы пока рано, а вот адаптировать сайт под мобильные устройства не помешает. Сергей Кокшаров предложил для этого очень простой и эффективный способ, который я решил развить и автоматизировать.
Напомню, что Google учитывает всего четыре составляющие адаптации сайта под мобильные устройства:
- размер шрифта (рекомендуется 16px),
- размер активных элементов (не менее 48px),
- область просмотра (viewport),
- размер контента (не более 100%).
Увы, но доля мобильного трафика в Рунете не велика. Большая её часть приходится на социальные сети и мобильные приложения. Особо заморачиваться с адаптацией сайта под мобильные устройства пока нет смысла. Тем более что и сам алгоритм всё ещё не вступил в полную силу. Поэтому вот вам моя пошаговая инструкция.
Шаг 1: скачайте архив mobilefriendly.zip по этой ссылке.
Шаг 2: в секции <head>…</head> укажите метатег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Шаг 3: разархивируйте и загрузите на сервер файл mob-style.css.
Примечание: mob-style.css это простейшая таблица стилей, которая учитывает ряд перечисленных выше рекомендаций Google. Она делает ссылки кнопками, таблицы строками, картинки резиновыми, списки строковыми и многое другое. При необходимости, вы всегда можете подправить её так, как вам это нужно.
Шаг 4: перед закрывающим тегом </body> добавьте следующий JavaScript-код:
<script>
function mobilefriendly() {
if ( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) return;
var styles = document.styleSheets;
if ( styles.length > 0 ) for ( i = 0; i < styles.length; i++ ) styles[i].disabled = true;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'mob-style.css';
document.head.appendChild(link)
}
</script>
Скрипт проверяет, является ли браузер мобильным или нет. Если да, он отключит в HTML-документе все таблицы стилей и добавит mob-style.css.
Примечание: для link.href вы должны прописать путь к своему файлу mob-style.css.
Шаг 5: в открывающийся тег <body> добавьте атрибут onload с вызовом JavaScript-функции mobilefriendly(), выглядит это так:
<body onload="mobilefriendly()">
Вот собственно и всё. Теперь идём на страницу Google инструмента проверки удобства просмотра на мобильных устройствах (http://goo.gl/OaXdEs), вводим URL веб-сайта и кликаем кнопку «Анализировать». Наслаждаемся результатом!
Короткая ссылка: http://goo.gl/F9P58a
Пост однозначно в закладки, будем тестировать везде :)
"Шаг 4: перед закрывающим тегом body "
может правильнее "Шаг 4: перед закрывающим тегом head "?
2My way to success нет, именно </body>. JavaScript лучше использовать после загрузки основного контента. Для того мы и используем атрибут onload. В целом лучше бы jQuery ready(), но я беру по минимуму. Вроде всё работает норм.
а точно на онлоад внимание не обратил.
такой вопрос еще появился. решил попробовать на нескольких сайтах для эксперимента. в тесте гугла теперь все ок по этим сайтам в плане мобайл-френдли.
а вот хочу проверить как оно будет смотреться в жизни, но именно сейчас ничего нет из гаджетов для проверки, чтобы увидеть, как все выглядит. начал в инете смотреть сайты, где генерируются скриншоты под разные разрешения, но практически всюду выдает вид со стандартной таблицей стилей. можете подскажете, какой-нибудь ресурс для этого дела?
2My way to success один из недостатоков предложенного способа заключается в том, что он завязан на распознании UserAgent. Используется самый простой вариант, но тем не менее. Так что нужен эмулятор мобильного устройства, например Opera Mobile Classic Emulator - использую его. Также можно использовать расширение для браузера, которое подменяет UserAgent. Например, для Firefox, Google Chrome и т.д. Их я не пробовал. Ну и самый простой способ - временно закомментировать условие в коде javascript функции:
// if ( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) return;
Тогда можно будет посмотреть на десктопе, а при необходимости воспользоваться и Toggle device mode в инструментах разработчика браузера... или самому масштабировать окно браузера.
ок, понял.
спасибо, сейчас буду смотреть.
mob-style.css загружать на WP в папку шаблона?
2cergei kutuzoy куда угодно, просто пропишите его URL в link.href
Мне не помогло. Закачал файл в корень сайта. Пробовал и link.href = 'mob-style.css'; и так link.href = '/mob-style.css';
Подскажите в чем может быть дело?
2Tatyana Krivonos скрипт отключает имеющиеся таблицы стилей и подключает mob-style.css только если вы просматриваете сайт с мобильного устройства, в остальных случаях он этого не делает.
Спасибо Костя. Работает. Гениально. Поделюсь трафиком..
Константин здравствуйте. А нет что либо подобного для блогов блогспот. Я имею ввиду картинки резиновыми, ссылки кнопками...Тэг viewport у меня давно вставлен. В целом блог проходит проверку по оптимизации для мобильных 99/100. Но страницы с фонами, готовыми рамками и.т д результат хуже некуда. На некоторых уменьшила размер изображений, но все равно проверку не проходят. Хоть удаляй страницы, что еще сделать не знаю.
2Olga Protasova У блогов на Blogger имеется возможность подключения мобильной версии шаблона (см. раздел шаблон, где имеется «На мобильных»). Лучше использовать именно этот вариант, т.к. редитер на адрес с параметром m=1 в URL производится для мобильных устройств не зависимо от того, используете вы мобильный шаблон или нет.
Костя, этот варинт я знаю, даже статью написала по оптимизации для мобильных блогов блогспот. Шаблоны подбирала, пока не выбрала более удачный. Выбор шаблона очень влияет на проверку в PageSpeed. Но вот с картинками вопрос не решен. Спасибо за ответ.
2Olga Protasova конечно надо допиливать шаблон или использовать тот что есть, тут простого решения нет. На счёт каринок всё просто. Добавьте в css такое правило:
.post-body img { max-width:100% }
Обычно для содержания статьи используется CSS-класс post-body, если другой надо использовать его. Само же свойство max-width:100% говорит браузеру, что картинка не может быть шире ширины родительского элемента и автоматически подгоняет под него размер картинки.
Константин, строку добавила, но при проверке в программе пока результат нулевой, может надо время. У меня еще такой вопрос: как включить кэш браузера по рекомендации программы. Пишут, что не указано или истекает дата. Пыталась найти информацию в интернете, но нашла только для блогов на WordPress. В blogspot можно что нибудь сделать?
Olga Protasova не путайте отдельное решение с комплексом задач, надо рассматривать конкретную проблему. Я проверил www.ozarabotkevceti.ru там все вроде нормально. Даже не знаю при чём там картинки, но лишним приведённое мной решение не будет.
С кэшированием на сторонних ресурсах вы ничего не сделаете.
Константин, в блоге, что Вы проверили ошибок нет при проверке в программе, и в инструментах для вебмастеров гугл нет ни одной страницы с ошибками. Блог www.bdblogov.ru вот здесь 7 страниц с ошибками, хотя в целом я уже писала проверку блог прошел на отлично.
Здравствуйте уважаемый автор спасибо вам за статью очень полезна для меня оказалась, только вот у меня меню главное везде выскакивает как первая страница сайта очень не красиво, да и неудобно,
1. нельзя ли сделать так чтобы главное меню, и ссылки с сайт бара шли после основного текста (контента)?
2. И чтобы ссылки не были выделены синим цветом?
3. Что мне нужно для этого изменить?
Большое спасибо за внимание!
И да уважаемый автор, мне бы хотелось, чтобы мой сайт на мобильных приложениях выглядел бы вот так (http://dommagii.org/magicheskiy-katalog/212-panelsa.html), сейчас выглядит вот как(http://panelsa.ru/). Для ознакомления показываю. Согласитесь у меня не очень? Мой второй сайт.
И еще часто не могу зайти на ваш сайт, у вас, наверное, техническая проблема? Интернет у меня в порядке, на другие сайты норм заходит.
2Эльза Пан Вариант решения не самый универсальный. О не может учесть всех особенностей вёрстки. Обычно меню делают через UL LI списки и в этом случае всё нормально. Но стоит отметить, что может получиться достаточно большой список, надо будет подключать надстройку для «мобилизации» меню. Но это надо делать уже самому.
Спасибо огромнейшее, единственный нормальный сайт с действительно рабочим вариантом(перелопатил весь инет)