подписка
Подписаться
26/03/2015

Google рассказал как сделать "мобильными" статичные страницы

Сотрудница Google Зинеб Аит Бахаджи опубликовала ряд рекомендаций по оптимизации статичных страниц под мобильный поиск.

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

Вносить изменения в сайт понадобилось из-за скорого запуска фильтра mobilefriendly, который будет пессимизировать в мобильной выдаче сайты без мобильной оптимизации страниц.

Что касается рекомендаций, то первым делом Зинеб Аит Бахаджи рекомендует вебмастерам перенести сайт на какую-либо CMS. Таким образом можно избавиться от "ручной" работы и возможных ошибок.

Если такой возможности нет, то необходимо следовать этому набору рекомендаций:

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

– Настройте тег Viewport (Область просмотра). Он позволяет подгонять содержимое страницы под ширину дисплея на котором она просматривается. В противном случае, страница будет открываться на всех устройствах как на десктопных.

– Используйте файлы стилей (CSS) вместо тега "font" или других элементов html в коде страницы.

– Если страница выходит за область одного экрана, то вероятнее всего она содержит элементы с фиксированным размером. Поисковик рекомендует использовать элементы, которые могут адаптироваться под ширину экрана пользователей.

– Избавьтесь от фиксированных размеров элементов. Например, если ширина страницы указана в пикселях (600px), то следует изменить ее на проценты (например, 80%).

– Добавьте в CSS img { max-width:100% }. Это позволит масштабировать изображения под ширину экрана устройства на котором открыта страница.

– Избегайте тега <table> в верстке страницы. Использовать этот тег нужно только при верстке самих таблиц. Если <table> уже используется в верстке страницы, то преобразуйте их в div + CSS floats/inline блоки. Это позволит улучшить вид страницы.

– Избегайте таблиц шириной в 3-4 колонки. Они не умещаются на мобильные экраны. Если они уже на сайте есть, следует их уменьшить.

– Избавьтесь на от тега <pre>. Они могут расширять страницу.

  • Для форматированных текстов используйте границы CSS, отступы и т.д.
  • Для верстки таблиц используйте тег <table>. Верстать их нужно с учетом рекомендаций, указанных выше.
  • Для шрифтов фиксированной ширины используйте CSS font-family:monospace.
  • В других моментах, где нужно сохранить пробелы (например, компьютерный код), следует использовать <pre>, но добавить чтобы разрешить горизонтальную прокрутку.

– Добавьте в код DOCTYPE, чтобы облегчить работу пользователям со старыми браузерами. Например, Internet Explorer 8. Дело в том, что такие браузеры могут входить в "режим совместимости", что приведет к некорректному отображению страницы.

– Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах.

Прокомментировать
Читайте также
downaze
24/02/2016
Как продвигать сервис в соц. сетях? 8
Создавайте заказы на таких сервисах, как Адвего.ру, и набирайте группы по 20-40 чел. за 20-50 центов для ВКОНТАКТЕ. и прочих социалках.
Форум Привлечение клиентов SEO и продающий маркетинг
26/03/2015
Рекламный рынок России-2015: просядет все, кроме Интернета
К концу года расходы на рекламу в мире вырастут на 4,6%, особенно успешное развитие обещают рекламе в Интернете и на мобильных устройствах... Подробнее
24/03/2015
Локальный поиск Google: тематичность рулит
Для продвижения в локальной выдаче Google лучше использовать ссылки с сайтов схожей тематики. К такому выводу пришли 22 эксперта в области локального поиска... Подробнее
19/03/2015
Посильнее "Пингвина" и "Панды"
Изменения в мобильном алгоритме ранжирования Google изменят выдачу сильнее, чем фильтры "Пингвин" и "Панда". Нововведение заставит вебмастеров провести мобильную оптимизацию сайтов... Подробнее
kaavain
16/03/2015
Обвал заказов 27
anstrem:

С таким подходом в мире должно быть ровно три интернет магазина: aliexpress, amazon и e-bay


И, кстати, совсем нет. Я пользуюсь несколькими:

- Али, для дешевой хрени за которой лень идти в магаз.
- Амазон, для качественных вещей типа обуви.
- Е-Бей не пользуюсь вообще.
- а так же с десято местничковых магазинов в Германии (игрушки), Швеции (ну это по работе), Финляндии (тоже игрушки, а так же гаджеты и канцелярия).

И у них у всех своя ниша, если не товаром - то способом доставки, оплаты, бонусами - но они отличаются.

И при этом я еще и в обычных магазинах покупаю, так как в них порой ДЕШЕВЛЕ чем в интернет магазинах, ибо мусора в виде 90% ГС нет, и цены не убиты. Свернуть
anstrem:С таким подходом в мире должно быть ровно три интернет магазина: aliexpress, amazon и e-bay И, кстати, совсем нет. Я пользуюсь несколькими: - Али, для дешевой хрени за которой Еще...
Форум Привлечение клиентов SEO и продающий маркетинг