Подготовьте свой сайт для мобильных устройств
Ваш мобильный сайт готов? Звучит как почти глупый вопрос в 2017 году. Конечно, верно?
Но стоит взглянуть еще раз, чтобы посмотреть, как это выглядит на мобильных устройствах. Не менее важно думать о том, как Google видит вас на мобильных устройствах.
Первая подсказка, которая у меня была, заключается в том, что мой сайт может быть не таким мобильным, как я думал, Инструменты Google для веб-мастеров что некоторые сенсорные элементы были слишком близко. Оттуда пришел полный обзор. Это больше, чем просто технология.
Вот 10 вещей, которые вы должны сделать, чтобы насладиться мобильной революцией.
Когда я говорю «революция», я говорю двумя способами:
Первый, теперь все больше людей выходят в интернет на мобильных устройствах чем рабочий стол и ноутбук. Есть много клиентов, которые рискуют не иметь веб-сайта, готового для мобильных посетителей. Самое главное, что многие люди, которые делают покупки на настольных компьютерах или в розничном магазине, принимают решения о покупке на своих мобильных устройствах.
Statcounter Global Statistics – Доля на мировом рынке компьютеров, мобильных устройств и планшетов – август 2016 – 2017второйGoogle принял «Мобильный сначала» индекс. Это означает, что его основной индекс теперь склонен отображать веб-страницы, оптимизированные для мобильных устройств. Мы еще не видели этого эффекта на настольном индексе, но вы, вероятно, скоро это увидите. Зачем следовать этому сценарию:
- Вы делаете поиск Google что-то на вашем рабочем столе.
- То, что вы думаете, интересно.
- Вы отправляете это другу.
- Друг открывает его на своем мобильном телефоне … и это выглядит ужасно.
Чтобы избежать этого, Google может начать понижать рейтинг немобильных сайтов даже при поиске на рабочем столе. Это почти очевидно, и именно в этом причина того, чтобы сначала иметь движущийся индекс.
СВЯЗАННАЯ ПУБЛИКАЦИЯ – SEO Guide Мое простое руководство по поисковой оптимизации
Быть полностью отзывчивым
Что делает «отзывчивый» сайт Средства? Очень просто: он адаптируется к любому размеру экрана, на котором вы находитесь.
Великий настенный экран? Нет проблем.
Мини планшет? Нет проблем.
Ноутбуки? Нет проблем.
iPhone? Нет проблем.
Вам не нужны все устройства, чтобы убедиться, что ваш сайт полностью адаптивен. На настольном компьютере или ноутбуке возьмите левый или правый край окна браузера и медленно перетащите его на противоположную сторону. Когда окно сужается, обратите внимание на то, как текст корректируется в соответствии с шириной экрана. Обратите внимание, как изображения становятся меньше, когда окно сужается.
Если текст и изображения не отвечают на изменение размера, сайт не будет отвечать. Получить новую тему или нанять разработчика. Это был отличный подход для меня около года назад. Это одно из трех внесенных мной изменений, которое значительно увеличило число клиентов записи, которые я получаю.
Ускоренные мобильные страницы
Google настроил протокол под названиемУскоренные мобильные страницы (AMP)Эти страницы являются страницами-призраками, которые вы создаете, каждая из которых затеняет обычную страницу. Они ускоряются двумя способами. Во-первых, они удаляются для более быстрой загрузки, но не все элементы будут отображаться. Во-вторых, они кэшируются Google, поэтому они могут быстрее доставляться пользователям в поиске непосредственно с сервера Google.
Некоторые люди добавили быстрые мобильные страницы на свои сайты. Другие предпочитают быть полностью восприимчивыми. Выполнение того и другого может быть излишним, поскольку Google не будет отправлять кого-либо на ваши полностью адаптивные страницы, если для этого URL-адреса кэширована страница AMP.
у меня есть нет планов по внедрению AMP, Если Google начнет давать страницы AMP более высокий рейтинг, это может изменить их мнение. Но у меня гораздо больше контроля над адаптивными страницами. Я не хочу, чтобы мои страницы выглядели раздетыми.
Если вы решили AMPify своего сайта, есть инструменты, которые могут вам помочь. Например, вот Список плагинов WordPress AMP,
Оптимизировать изображения
Скорость имеет значение при определении, готовы ли вы к мобильному сайту. Ускоряет отличную мотивацию за AMP. Простой способ увеличить скорость ваших мобильных страниц уменьшает размер ваших изображений.
Во-первых, убедитесь, что изображения не больше, чем нужно. Если ширина вашего изображения составляет всего 600 пикселей, не отображайте изображение шириной 3000 пикселей. Если люди хотят видеть большие детали при нажатии, используйте два разных изображения: изображение шириной 600 пикселей на странице и изображение шириной 3000 пикселей при нажатии.
Во-вторых, оптимизировать изображения, я обычно Opimizilla, Это бесплатный онлайн инструмент. Просто перетащите изображение, которое вы хотите уменьшить, и Optimizilla автоматически оптимизирует его. Просто сохраните на жесткий диск и используйте оптимизированное изображение вместо оригинального.
Больше субтитров
Люди не читают в Интернете. Они сканируют. Это не совсем правда. Мы сканируем, пока не видим то, что бросается в глаза. Частые титры важны для привлечения внимания людей.
Люди не просто сканируют мобильные устройства, они перемещаются во время сканирования. Субтитры еще важнее на мобильных устройствах, чем на настольных компьютерах.
Прекратите сканирование. Хватит прокручивать Чтение начинается.
Незначительные абзацы
Важнее, чем субтитры длина абзаца, Вы, наверное, уже знаете, что большие блоки текста кажутся пугающими. Чем длиннее абзац, тем больше работы он прочтет.
Если на настольном компьютере абзац кажется большим, представьте, как он выглядит на мобильном устройстве. На телефоне вы можете заполнить экран. Даже половина или треть экрана выглядит большой и легко провести.
Информация о размере прикуса
Это не просто огромные абзацы. Даже небольшие блоки текста легко пропустить.
Одним из решений является использование списков. Я пытаюсь создать маркированные списки, когда фраза содержит список по крайней мере из трех элементов. Это может превратить очень длинное и сложное предложение в три легко читаемых ярлыка.
Скрыть менее важный контент
Я также реструктурировал некоторую информацию, чтобы она не отображалась при загрузке страницы. Вы увидите это на страницах сервиса, как в моя страница автора блога, Посмотрите, что происходит, когда вы нажимаете «Нажмите или Нажмите, чтобы узнать больше причин нанять профессионального блоггера». Это позволяет нам включать полезный контент в длинной форме, не перегружая мобильного пользователя. Помните, что текст переносится по телефону. То, что появляется на трех или четырех экранах на рабочем столе, может занимать 12 или 15 страниц в телефоне.
Тот, кто хочет, может открыть детали. В моем случае это основная информация для людей, которые любят читать больше и понять, что это влечет за собой.
Держите свой CTA видимым
Я думал, что это было действительно круто. Он имел форму запроса боковой панели, плавающую в правой части экрана. Независимо от того, как низко прокручивается страница, форма плавает. Идея состоит в том, что всякий раз, когда кто-то думает о найме нас, путь есть. Там нет работы, чтобы найти его. Это почти очевидно, чтобы завершить это. Теперь, когда я думаю об этом, я стал действительно крутым. Но это не так хорошо на мобильных устройствах.
Проблема в том, что сама форма размером с экран телефона. Очевидно, что он не может плавать в боковой панели на мобильных устройствах.
Поэтому вместо этого я поместил кнопку, которая плавает на странице телефона. На рабочем столе кнопка заменяет форму только при прокрутке под формой.
Вот так выглядит форма на рабочем столе.
Это то, что происходит, когда форма утверждается.
И вот как это выглядит на вашем телефоне (быстро используя этот трюк, чтобы уменьшить ваш браузер).
Теперь наш сайт готов для мобильных устройствТеперь я снова очень крут 😉
Убедитесь, что ваш сайт готов для мобильных устройств
Не забудьте убедиться, что ваш сайт готов для мобильных устройств. Я сказал, что вам не нужны все устройства, чтобы увидеть, полностью ли оптимизирован ваш сайт. Уменьшение экрана может быстро подсказать вам, если это не так.
Но как только работа будет завершена, вам нужно будет проверить ее на разных устройствах. Вы можете найти больше улучшений, чтобы сделать.
Также стоит проверить Инструменты Google для веб-мастеров. В конце концов, если есть что-то, что Google еще не любит, это по крайней мере стоит проверить.
