Как оптимизировать сайт для мобильных


Оптимизация сайта для мобильных устройств — SEO на vc.ru

По этой теме написан миллион справочных материалов. Казалось бы, можно остановиться и не писать об этом снова. Но сложно удержаться. Давайте еще раз поговорим о том, как оптимизировать сайт для смартфонов и планшетов. Что проверять, если все уже оптимизировано?

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m.site.ru.

  • Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel="canonical", указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel="alternate", который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel="alternate" можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

  • Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

2. Адаптивная версия

URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.

  • Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.

  • При реализации адаптивной версии важно настроить т

Оптимизация вашего веб-сайта для мобильных устройств

Адаптивный дизайн

Адаптивные веб-сайты предоставляют только ограниченное количество вариантов отображения, но по мере увеличения количества мобильных устройств возрастает спрос на более гибкие типы отображения. Многие операторы веб-сайтов предпочитают адаптивный дизайн, который также основан на медиа-запросах CSS3. Как и в случае с адаптивным дизайном, сервер доставляет один и тот же HTML-код на все устройства. Это означает, что сайт доступен во всех вариантах макета по одному и тому же URL-адресу .Но в отличие от адаптивного дизайна, адаптация к размеру экрана устройства осуществляется плавно без жесткой сетки определенных окон просмотра. Это позволяет мобильному сайту полностью использовать все доступное пространство на экране устройства. Из-за сложности адаптивного дизайна запуск веб-сайта по этому принципу утомительно и дорого. Контент, как и макет, должен быть гибким. Текстовые сегменты, изображения, видео и таблицы должны работать как на смарт-телевизорах, так и на мобильных телефонах.Вместо разработки собственного дизайна многие операторы веб-сайтов предпочитают использовать систем управления контентом, таких как WordPress, Joomla, Drupal и Typo3. Эти проекты с открытым исходным кодом зависят от крупных сообществ пользователей и разработчиков и предлагают широкий спектр готовых шаблонов дизайна с адаптивным дизайном, некоторые из которых можно использовать бесплатно.

Преимущества:

  • В адаптивном дизайне учитывается каждый размер дисплея, включая мобильные устройства, которые появятся на рынке в будущем.
  • Как и в случае с адаптивным дизайном, дальнейшая разработка дизайна мобильного веб-сайта не требуется.
  • Хороший адаптивный дизайн позволяет сравнивать пользовательское восприятие на всех поддерживаемых устройствах.
  • Google предпочитает адаптивный дизайн.

Недостатки:

  • Реализация адаптивного дизайна стоит дорого (особенно когда речь идет о уже существующих проектах).
  • Контент сложных веб-страниц не всегда так просто перенести на маленькие дисплеи.
  • Мобильные устройства загружают тот же объем данных, что и настольные ПК. Таким образом, время загрузки страницы на мобильных устройствах обычно ниже, чем на отдельных мобильных веб-сайтах.
.

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

Автор
Аня Скрба

Обновлено:
12 декабря 2019 г.

Об этом руководстве

В быстро меняющемся цифровом мире, в котором мы живем, постоянное развитие технологий открывает двери для потока мгновенно доступной информации. Это оставляет людей жаждущими дополнительной информации и дополнительных услуг. Им нужен мгновенный доступ к желаемой информации, независимо от того, где они находятся и какой тип устройства они используют для просмотра онлайн-мира.

Предоставление клиентам доступа к информации на ходу стало одним из главных приоритетов почти каждой бизнес-организации в мире. Он предоставляет клиентам гораздо лучший пользовательский интерфейс, что может значительно улучшить их бизнес на многих важных уровнях. Вот почему для каждого владельца бизнеса важно создать удобный для мобильных устройств веб-сайт, чтобы обеспечить пользователям мобильных устройств удобную работу с мобильными устройствами. То же правило применяется, если вы планируете вести блог. Он должен быть мобильным.

Что такое сайт, оптимизированный для мобильных устройств?

Мобильный веб-сайт - это веб-сайт, предназначенный для отображения содержимого веб-сайта на мобильных устройствах, то есть смартфонах и планшетах. Он оптимизирован для мобильных устройств, так как позволяет мобильным пользователям читать желаемый контент и перемещаться по веб-сайту, который они хотят посетить.

67% пользователей указали, что они с большей вероятностью купят продукт или услугу у компании, создавшей веб-сайт, удобный для мобильных устройств

61% пользователей заявили, что покинут веб-сайт, который не был оптимизирован для мобильных устройств

А именно, удобный для мобильных устройств веб-сайт легко подстраивается под размер экрана и разрешение мобильных устройств, которые используют посетители сайта.Это позволяет им находить то, что они ищут, за считанные секунды.

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

Почему важно иметь веб-сайт, удобный для мобильных устройств

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

Это, безусловно, одна из наиболее важных причин, по которой стоит задуматься о том, чтобы сделать свой веб-сайт удобным для мобильных устройств, поскольку большинство ваших клиентов определенно посещают ваш веб-сайт со своих мобильных телефонов и планшетов.

21 апреля 2015 года Google выпустил еще одно из своих многочисленных обновлений алгоритма ранжирования, заявив, что веб-сайтам, оптимизированным для мобильных устройств, будет отдаваться предпочтение в результатах мобильной поисковой системы, и призвал владельцев веб-сайтов улучшить свои веб-сайты и предоставить своим пользователям более удобных пользователей. опыт.

Следовательно, оптимизация вашего сайта для мобильных устройств может существенно повлиять на рейтинг вашего сайта в поисковых системах. Это может улучшить вашу видимость в поисковой сети, повысить узнаваемость вашего бренда и удобство для пользователей. Кроме того, это может помочь вам превратить ваш веб-сайт в машину для привлечения потенциальных клиентов.

Почему вам стоит пользоваться мобильным телефоном прямо сейчас

Ваш бизнес получит ряд преимуществ, если вы оптимизируете свой веб-сайт для мобильных устройств. Давайте рассмотрим самые важные из них, которые помогут вам улучшить свой бизнес в долгосрочной перспективе.

Увеличение посещаемости вашего сайта

Около 60% поискового трафика приходится на мобильные устройства

Среди Top 5 самых интересных возможностей для цифровых маркетологов оптимизация под мобильные устройства занимает первое место, опережая даже вовлечение в социальные сети и таргетинг / персонализацию

43% Мобильная оптимизация

35% Взаимодействие в социальных сетях

35% Таргетинг и персонализация

30% Контент-маркетинг

30% Оптимизация контента

90% ВЕБ-САЙТОВ НЕ ГОТОВЫ К ОПТИМИЗАЦИИ!

Благодаря растущему числу мобильных пользователей, вы можете привлечь довольно большое количество клиентов, предоставив им безупречный мобильный опыт.Это приведет к увеличению посещаемости вашего сайта. Сегодня люди используют свои смартфоны даже во время просмотра телевизора, используя свои настольные или портативные компьютеры. Они продолжают использовать их во время поездок на работу и часто во время работы.

Более того, Google распознает, не оптимизирован ли конкретный веб-сайт для мобильных устройств. Они с меньшей вероятностью будут отображать ваш веб-сайт как допустимый результат поиска, если он не оптимизирован для мобильных устройств. Естественно, это может негативно повлиять на ваш рейтинг на страницах результатов поисковых систем и оставить вас далеко позади своих конкурентов, поскольку вы изо всех сил пытаетесь продвинуться и привлечь больше трафика на свой сайт.

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

Лучший пользовательский опыт

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

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

Лучший пользовательский опыт означает более высокий рейтинг SEO, поскольку Google индексирует пользовательский опыт, чтобы определить рейтинг веб-сайтов в поисковых системах. Следовательно, если вы можете предоставить своим мобильным пользователям лучший пользовательский интерфейс, вы улучшите свой SEO-рейтинг, что поможет вам улучшить видимость в поиске и увеличить посещаемость.

Конечно, это не означает, что вы должны полностью игнорировать своих клиентов и потенциальных клиентов, которые используют настольные или портативные компьютеры, поскольку на них по-прежнему приходится значительный объем трафика, приходящего на ваш сайт, и они по-прежнему являются важной частью вашего клиента. основание.

40% потребителей перейдут на сайт конкурента из-за плохого взаимодействия с мобильными устройствами

97% веб-сайтов терпят неудачу в UX. Веб-сайты, которые терпят неудачу в UX, страдают от разочарованных пользователей и низкого коэффициента конверсии

Повышение конверсии

Чем больше трафика приходит на ваш сайт, тем больше у вас возможностей привлекать целевых клиентов своим контентом и привлекать качественных потенциальных клиентов. В конечном итоге вы превратите этих потенциальных клиентов в клиентов.Все больше и больше людей будут посещать ваш веб-сайт, и, обеспечив им удобство для пользователей, вам удастся значительно повысить коэффициент конверсии.

48% говорят, что, когда сайты плохо работают на их смартфонах, они чувствуют, что компании не заботятся об их бизнесе

Большинство онлайн-покупателей на самом деле являются мобильными пользователями. И все чаще они выходят в Интернет со своих смартфонов и планшетов, когда находятся в пути в поисках товаров или услуг.

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

Таким образом, удовлетворяя потребности целевых клиентов, которые предпочитают просматривать веб-страницы с мобильных устройств, вы можете привлечь гораздо больше клиентов и повысить коэффициент конверсии. С более высоким коэффициентом конверсии получить прибыль будет намного проще, и вы увидите положительные результаты по рентабельности инвестиций.

Чтобы по-настоящему конкурировать сегодня и удерживать людей на вашем сайте, он должен иметь возможность одинаково поддерживать как соединения без Wi-Fi, так и соединения WiFi, и в идеальном мире загружает страницу менее чем за 4 секунды .

Сегодня более половины мобильных пользователей ожидают, что сайт будет загружать такое количество времени, и примерно 80% недовольны скоростью просмотра на своих смартфонах в целом.

Следует помнить о нескольких вещах: во-первых, оптимизировать визуальный контент (уменьшить размер файлов, не влияя на качество изображения) и сохранить общий размер вашего сайта менее 1 МБ

Сниженный показатель отказов

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

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

Веб-сайты, оптимизированные только для настольных компьютеров, плохо отображаются на мобильных устройствах, из-за чего мобильные пользователи, посещающие ваш сайт, мгновенно уходят и никогда не возвращаются.Более того, такие сайты намного дольше загружаются на мобильные устройства. Имейте в виду, что онлайн-покупатели ожидают, что страница загрузится в течение двух секунд. К тому времени, как прошло три секунды, большое количество покупателей направилось в другое место.

Время загрузки страницы - один из важнейших элементов любого успешного веб-сайта, так как оно может существенно повлиять на показатели отказов и конверсии. В частности, задержка в одну секунду во время загрузки страницы может снизить коэффициент конверсии на 7 процентов, а двухсекундная задержка во времени загрузки страницы может увеличить показатель отказов на 87 процентов.

Оптимизируйте скорость своего веб-сайта для лучшего взаимодействия с пользователем, и вы увидите прибыль в виде прибыли вашего бизнеса. Оптимизация вашего веб-сайта для мобильных устройств также поможет вам добиться этого, поскольку ваш веб-сайт будет намного лучше работать на планшетах и ​​смартфонах ваших посетителей, что поможет вам снизить показатель отказов и расширить клиентскую базу.

90% мобильных поисков приводят к действию, более 50% приводят к покупке

Повышение лояльности клиентов

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

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

Выбор подхода к созданию мобильного сайта

Существует два подхода к созданию веб-сайта, удобного для мобильных устройств; Какой подход вы выберете, полностью зависит от приоритетов вашего бизнеса. А именно, вы можете создать совершенно новый и мобильный веб-сайт или разработать собственный веб-сайт, который автоматически адаптируется к различным мобильным устройствам, что называется адаптивным дизайном веб-сайтов.

Создание мобильного сайта

ТОП 5 СМАРТФОНОВ 2019

Samsung 21.4%

Яблоко 18,7%

Huawei 8.1%

Леново 5,1%

Xiaomi 4.6%

Все остальные поставщики телефонов покрывают 42,1% рынка мобильных телефонов

Создание отдельного мобильного веб-сайта означает размещение мобильной версии вашего веб-сайта на отдельных URL-адресах, которые могут быть мобильным субдоменом (m.example.com), вложенной папкой на вашем веб-сайте (example.com/mobile) или полностью отдельным мобильный домен (пример.моби).

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

Создание отдельного мобильного сайта определенно имеет свои плюсы и минусы. Мобильный веб-сайт - это дополнение к вашему основному веб-сайту, которое оптимизировано для использования в дороге. Он может очень помочь вам в увеличении видимости в поисковой сети, поскольку он с большей вероятностью будет отображаться при поиске с мобильных устройств, чем в обычном домене. Он также использует минимальную пропускную способность, поэтому намного быстрее, чем другие веб-сайты.

С точки зрения мобильных пользователей, отдельный мобильный веб-сайт определенно предпочтительнее, поскольку такой веб-сайт может обеспечить отличное удобство использования. Мобильные пользователи, посещающие ваш сайт, автоматически перенаправляются на ваш URL-адрес для мобильных устройств, но пользователи планшетов отображаются на стороне компьютера, поэтому ваш контент не согласован на всех устройствах.

4-дюймовые телефоны являются самыми популярными в большинстве стран, включая Великобританию, Францию, Германию, Италию, Австралию, Японию и США.Это вызвано огромной популярностью iPhone 5 и 5S

.

Однако с точки зрения вашего бизнеса, создав отдельный мобильный веб-сайт, вам придется обслуживать два веб-сайта, что может занять у вас много времени, не говоря уже о деньгах. И вам придется заниматься поисковой оптимизацией для вашего нового сайта с нуля. Еще одна очень важная вещь: у вас будет дублированный контент, за что Google может вас наказать. Однако вы можете обойти эту проблему, используя правильную двунаправленную аннотацию.Таким образом, ваш веб-сайт не будет отображаться как имеющий дублированный контент, а вместо этого два ваших URL-адреса будут рассматриваться как имеющие эквивалентный контент.

С точки зрения разрешения экрана наиболее популярными являются 640 × 1136, 750 × 1334, 1080 × 1920 и 720 × 1280

20,2% жителей Северной Америки регулярно пользуются мобильными платежами - этот процент соответствует 55 миллионам человек, число, по прогнозам компании, вырастет на 39,2% в течение следующего года.

Многие владельцы бизнеса решают использовать подход, ориентированный на мобильные устройства, для создания своих веб-сайтов, удобных для мобильных устройств. По сути, это означает, что сначала нужно разработать свой веб-сайт для мобильных устройств, а затем перейти к дизайну для настольных компьютеров. Это определенно лучший подход при создании веб-сайта в первый раз, потому что, если вам удастся заставить свой веб-сайт хорошо работать на мобильных устройствах, он будет работать еще лучше на настольном компьютере.

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

Адаптивный дизайн сайта

На мобильные устройства приходится 50% всех расходов на цифровую рекламу в 2019 году

Адаптивный дизайн веб-сайта означает разработку существующего веб-сайта таким образом, чтобы он мог изменять свой макет таким образом, чтобы он автоматически адаптировался к различным мобильным устройствам. Таким образом, независимо от того, на каком устройстве он просматривается, ваш веб-сайт автоматически подстраивается под размер экрана и разрешение этого устройства, что значительно улучшает взаимодействие с пользователем.Более того, адаптивный веб-дизайн - это шаблон проектирования, который настоятельно рекомендуется Google.

МОБИЛЬНАЯ ТОРГОВЛЯ БЫСТРО РАСТУЕТ

3 млрд. $ 2010

$ 6 2011

$ 10 2012

$ 14 2013

$ 19 2014

$ 25 2015

$ 31 2016

Адаптивный веб-сайт распознает устройство, на котором он просматривается, и автоматически меняет размер для оптимального просмотра. Имея адаптивный веб-сайт, вы сможете предоставить людям, использующим свои смартфоны и планшеты, возможность посещать ваш сайт с максимальным удобством.И вы снизите любой риск проиграть их своим конкурентам.

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

Как сделать ваш сайт оптимизированным для мобильных устройств

Как вы сделаете свой сайт удобным для мобильных устройств, зависит от того, используете ли вы одну из множества систем управления контентом (CMS) для управления цифровым контентом или используете конструктор сайтов.

CMS

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

Самыми популярными платформами CMS являются WordPress, Joomla и Drupal, и это лишь некоторые из них. Они предлагают ряд мобильных плагинов, тем и шаблонов, которые помогут вам превратить ваш сайт в адаптивный, который будет адаптироваться к любому возможному мобильному устройству.

Независимо от того, какой тип системы управления контентом вы используете для своего веб-сайта, для его адаптации к мобильным устройствам необходимо изменить и / или настроить его тему.Конечно, выбранная вами тема должна основываться на принципах отзывчивого дизайна, чтобы иметь возможность адаптироваться к различным устройствам, на которых просматривается ваш веб-сайт.

Сначала вы можете проверить, возможно, для темы, которую вы уже используете, доступно обновление и подходит ли это обновление для мобильных устройств. Если это так, обновление вашей темы будет почти всем, что вам нужно сделать. Что еще более важно, обновление темы предоставит вашему сайту новые исправления безопасности, которые улучшат как ваш сайт, так и ваш бизнес в целом.

WordPress

Если ваш сайт размещен на WordPress.com, WordPress автоматически предложит вам мобильную тему для вашего сайта, в зависимости от того, какая у вас уже есть. Если вы используете WordPress с собственной хостинговой компанией, вы можете проверить свою тему и версию WordPress одним из следующих способов.

  • Проверьте свою панель администрирования, где вы можете увидеть номер версии в верхней части панели инструментов или в нижнем колонтитуле для последней и более старой версии установленных WordPress, соответственно.
  • Кроме того, вы можете перейти на веб-сайт с установленным WordPress и использовать функцию «просмотра исходного кода» своего веб-браузера для поиска на странице метатега генератора, который предоставит вам номер версии. Номер версии установки WordPress также находится в файле /wp-includes/version.php.

Joomla

Если вы используете Joomla в качестве CMS, вы можете проверить, какую версию установки вы используете, проверив интерфейс администрирования, проверив страницу информации о системе в интерфейсе администрирования или проверив файл / версию.php, который содержит номер версии и обычно находится в / library / joomla / files.

Если ваша версия Joomla не является последней доступной, вы можете обновить версию и шаблон Joomla. Другой вариант - установить расширение Joomla для мобильных устройств, потому что многие расширения делают ваш веб-сайт мобильным без необходимости обновлять версию Joomla.

Друпал

Если вы используете Drupal в качестве CMS и хотите преобразовать весь свой веб-сайт в новую тему, удобную для мобильных устройств, вы можете сделать это, посетив руководство по адаптивному веб-дизайну, предоставленное Drupal.Там вы можете найти список адаптивных тем и выбрать ту, которая адаптируется к вашему сайту. Установите тему, которую вы выбрали, и все готово.

Тестирование темы

После обновления темы проверьте, как она работает на настольных и мобильных устройствах, посетив действующую демонстрационную страницу выбранной темы. У тем обычно есть ссылка, которая ведет на их демонстрационную страницу, и это самый простой способ определить, имеет ли выбранная вами тема адаптивный дизайн, соответствующий вашим потребностям.Лучший способ проверить, работает ли тема так, как вы хотите, - это использовать мобильное устройство для посещения демонстрационной страницы.

Однако вы также можете воспользоваться инструментом PageSpeed ​​Insights, который покажет вам, будет ли выбранная вами тема работать на мобильных устройствах. Google Chrome предлагает еще одну альтернативу для проверки поведения вашей темы. Для этого используется инструмент «эмуляция мобильного устройства» в Инструментах разработчика Chrome. Вы можете найти инструмент в меню Chrome: Вид> Разработчик> Инструменты разработчика.

Если выбранная вами тема оказывается удобной для мобильных устройств и хорошо работает как на настольных, так и на мобильных устройствах, обязательно проведите последний тест, чтобы проверить, реагирует ли ваш веб-сайт и хорошо ли отображается на всех устройствах. Вы можете выполнить окончательную проверку с помощью инструмента проверки удобства для мобильных устройств, который требует всего лишь ввода URL-адреса вашего веб-сайта в поле, после чего он быстро проанализирует ваш веб-сайт и предоставит вам результат в считанные секунды.

Если ваш веб-сайт по-прежнему не оптимизирован для мобильных устройств, Тест на удобство для мобильных устройств расскажет вам, почему, а также предоставит полезную информацию обо всем, что необходимо исправить, чтобы ваш веб-сайт стал оптимизированным для мобильных устройств.

Конструктор сайтов

Существует множество отзывчивых веб-конструкторов, которые могут помочь вам сделать ваш веб-сайт мобильным без необходимости писать ни одной строчки кода. У них есть простые в использовании инструменты, которые помогут вам в кратчайшие сроки создать удобный для мобильных устройств веб-сайт. Веб-конструкторы могут даже размещать и поддерживать ваш сайт, поэтому, по сути, они могут делать всю работу за вас. Это позволяет вам сосредоточиться на создании контента и работе над достижением бизнес-целей.

Самыми популярными веб-разработчиками являются Wix, Weebly и Squarespace, и это лишь некоторые из них.Но существует гораздо больше веб-конструкторов с простыми в использовании инструментами, которые могут помочь вам улучшить ваш веб-сайт, с адаптивным дизайном, который адаптируется к любому из устройств, используемых для просмотра вашего веб-сайта.

У конструкторов веб-сайтов

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

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

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

Wix

Wix - один из лучших конструкторов сайтов на рынке.Он определенно самый инновационный, его дизайн соответствует последним тенденциям веб-дизайна. Вам не нужно уметь программировать; все, что вам нужно сделать, это перетащить ваш контент и предоставить посетителям вашего сайта наилучший пользовательский интерфейс. У Wix также есть дизайн и инструменты, которые подходят для конкретной отрасли и могут охватывать все возможные ниши рынка.

Weebly

С другой стороны, Weebly имеет простой и минималистичный пользовательский интерфейс, а его дизайн значительно отличается от того, что предлагает Squarespace.Но если вы предпочитаете простоту дизайну, Weebly - ваш выбор. В нем меньше инструментов, чем в Squarespace, и это, безусловно, самый простой веб-конструктор с перетаскиванием. Он очень удобный, все его шаблоны адаптивны, и в нем есть более 40 предварительно разработанных макетов страниц, из которых вы можете выбирать.

Squarespace

Squarespace предлагает элегантный и профессиональный дизайн, поэтому он является лидером рынка в создании адаптивных веб-сайтов. Все шаблоны дизайна, которые предлагает Squarespace, очень доработаны и обеспечивают гораздо лучший пользовательский интерфейс.Squarespace обеспечивает поддержку клиентов 24/7. Он также предоставляет вам обширный список опций на выбор для стилизации и настройки вашего сайта. Многие другие веб-конструкторы не предлагают возможности настройки стиля вашего сайта, не требующие редактирования кода.

Заключение

Сегодня веб-сайт, удобный для мобильных устройств, является необходимостью. Переход на мобильную связь обеспечит вашим посетителям лучший пользовательский опыт. Вносите изменения и не отставайте от темпа, так как Google вознаградит вас более высоким рейтингом в результатах поиска.

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

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

.

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

1. Определите страницы с чрезмерным RTR.

Минимизация RTR начинается с осознания. На многих страницах будет более 100 RTR на страницу, тогда как на самом деле вам следует стремиться к меньшему, чем 50. Часто разработчики или специалисты по SEO, просматривающие все запросы на странице, обнаруживают, что некоторые из запрошенных элементов отсутствуют (404) и никто не заметил. Несмотря на то, что они отсутствуют, браузеру все равно требуется время, чтобы запросить и вернуться с пустыми руками, поэтому эти страницы следует немедленно удалить или исправить.

Также следует исправить перемещенные активы и вернуть ответ 301 или 302. Эти ответы означают, что браузеру нужно было перейти в одно место, а затем выполнить другой набор инструкций, чтобы перейти в другое место, чтобы получить актив, но каждое новое местоположение занимает больше времени. Это похоже на поход в продуктовый магазин, где вам говорят, что там нет того, что вам нужно, но вы можете получить это в другом магазине по дороге. Хуже того, если существует цепочка переадресации, это все равно, что пойти во второй продуктовый магазин и обнаружить, что они также перестали приносить товар, и теперь вы должны попробовать третий.

2. По возможности объединяйте файлы.

Следующим шагом будет объединение файлов там, где это возможно. Например, если на странице используется 10 таблиц стилей (файлов CSS), которые все можно объединить в 1, вам следует это сделать. Точно так же, если вы используете несколько файлов JavaScript, которые можно объединить в один, сделайте это тоже. Старайтесь думать о вещах как о сайтах, так и о конкретных шаблонах. У вас должен быть один файл JavaScript для всего сайта для JavaScript, который находится на каждой странице сайта, и один файл JavaScript для конкретного шаблона для каждого шаблона страницы на сайте.То же самое можно сделать с помощью CSS. Обеспечение того, чтобы на эти файлы всегда ссылались с одним и тем же именем и расположением, также поможет, если они правильно кэшированы.

3. Оптимизировать порядок рендеринга.

После того, как вы удалите и объедините, чтобы уменьшить общее количество RTR, следующее, что вы можете сделать, это изменить порядок, в котором запрашиваются действия, чтобы ускорить работу. Точно так же, как есть шаги, которые должны быть выполнены в рецепте, прежде чем могут начаться другие шаги, существует определенный порядок, которому будет следовать мобильный браузер, который должен соблюдаться при создании страницы.Следуя примеру с продуктами, если ваш рецепт требует, чтобы что-то мариновалось в течение 2 дней, важно сначала получить продукты, необходимые для маринада, чтобы его можно было начинать, пока вы собираете остальные ингредиенты, а не после.

Если перевести эту аналогию на веб-мир, маринад похож на блокировщик рендеринга, потому что в процессе приготовления ничего не может произойти, пока он не будет готов. Вы можете подготовиться к следующим этапам процесса приготовления, только доставив ингредиенты во время маринования.Это похоже на рендеринг критического пути, при котором вы сначала расставляете приоритеты критических элементов, таких как тег заголовка, содержимое страницы и базовый макет страницы, и откладываете менее важные элементы, особенно если они задерживают загрузку. из более важных предметов. Это может значительно улучшить процесс загрузки для пользователей и вселить в них уверенность в том, что остальная часть страницы загрузится быстро. Это также дает им ресурсы для начала оценки во время процесса загрузки.

4. Создайте стратегию загрузки страницы.

Поскольку поисковые системы имитируют пользователей, они воспринимают страницы так же, как и вы. Лучшее, что вы можете сделать, чтобы упорядочить запросы на скорость, - это знать, что важно для пользователя и бота в первые секунды, когда они находятся на странице. Обычно это информация в теге заголовка, а также в тексте и изображениях на странице. Обычно людям требуется несколько секунд, чтобы взаимодействовать со всем, что является интерактивным на сайте, поэтому большую часть JavaScript на самом деле не нужно загружать сначала.Вместо этого визуальные представления JavaScript, такие как поля с плюсами или расширители, могут загружаться в качестве заполнителей до того, как JavaScript понадобится. JavaScript особенно медленный и громоздкий для загрузки. Чтобы загрузка JavaScript не замедляла работу настолько сильно, что пользователи и боты долгое время смотрели на пустую страницу, идеально загружать что-то, на что пользователи могут смотреть, а затем загружать JavaScript в фоновом режиме, в то время как пользователи смотрят на страницу.

После JavaScript видео и изображения загружаются медленнее всего.Видео и изображения, которые находятся внизу страницы, не должны мешать работе в верхней части страницы, где обычно запускаются пользователи и боты. Эта концепция задержки загрузки невидимого контента называется «ленивой загрузкой». Ленивая загрузка может быть выполнена разными способами (отложенная, асинхронная загрузка и метатег с отложенной загрузкой Google).

Лучший инструмент для поиска возможностей отложенной загрузки изображений - это Google PageSpeed ​​Insights. Вы также можете использовать тег изображения Google Lazy-load, но пока это будет соблюдаться только в мобильных и настольных браузерах Chrome (хотя в будущем он может расшириться).В любом случае вам следует использовать инструмент проверки URL в консоли поиска Google, чтобы убедиться, что элементы, которые загружаются отложенным образом, видны при визуализации страницы инструментом и в обработанном HTML.

5. Сжимайте все, что можете.

После того, как вы минимизируете и расставите приоритеты для RTR для каждого шаблона страницы, вы должны сжать то, что вы можете. Сжатие помогает увеличить скорость страницы за счет экономии полосы пропускания. Gzip - это один из способов сжатия файлов, и его можно настроить на большинстве серверов, но доступны и другие варианты.Вы также можете запустить большую часть кода через процесс минификации, который уменьшает размер окончательного файла передачи. Однако с помощью этих методов сложно сжать изображения. Вы можете использовать страницу обзора производительности на WebPageTest.org, чтобы найти полный контрольный список оптимизации, в котором показаны все ресурсы на странице, заархивированы ли они с помощью gzip и степень их сжатия.

Вместо сжатия и сворачивания изображений важно, чтобы дизайнер передавал их разработчику в максимально сжатом формате.По сути, им необходимо сделать размер конечного файла как можно меньше без ущерба для внешнего вида изображения. Фотографии обычно следует сохранять как файлы JPG, а значки и иллюстрации следует сохранять как файлы GIF. Чтобы большие изображения отлично смотрелись на полноэкранных компьютерах, не перегружая крошечные мобильные экраны, рассмотрите возможность использования протокола адаптивных изображений или сервера изображений, такого как Fastly, для динамической отправки предварительно масштабированной версии изображения на меньшие экраны. .

6.Кэшируйте нужные страницы в нужное время.

Следующий шаг - помочь браузерам и ботам определить, что можно использовать повторно, а что нужно каждый раз получать заново. Большинство элементов на сайте, особенно сайт, который не меняется чаще одного раза в неделю или передает информацию в реальном времени, например новости, погоду или спортивные результаты, могут кэшировать большинство элементов на своих страницах на срок до года. Кэширование означает, что, когда пользователи посещают страницу, браузеры будут искать локально в их памяти, чтобы узнать, есть ли у них уже файл, необходимый для создания страницы.Это сокращает количество запросов туда и обратно и сокращает время загрузки. Боты поисковых систем всегда просматривают страницу так, как будто они никогда ее раньше не видели, поэтому они не используют активное кеширование, но они могут распознавать, когда происходит кеширование, и могут использовать его для оценки времени загрузки страницы.

Важно понимать, что кеширование основано на именах файлов и их расположении на сервере. Поэтому, если вы используете один файл на многих страницах, например логотип, всегда указывайте на него одно и то же имя файла и URL, даже если он существует в нескольких местах на вашем сервере.Это можно использовать в ваших интересах, потому что это означает, что вам просто нужно обновить имя файла элемента и ссылку на него в HTML, чтобы получить новую версию кэшированного элемента. Так, например, если вы измените свой логотип, просто изменив имя файла с «logo» на «logov2», новая версия будет кэширована, а старая версия будет забыта. Таким образом, когда вы разрешаете что-то кэшировать на год, вы не говорите, что не измените элемент за год, но что если вы это сделаете, вы будете ссылаться на обновленный или новый элемент с новым именем файла.

Настройки кэша могут быть немного сложными, поэтому лучше всего думать о них как о продуктах, срок годности которых может истечь. У некоторых продуктов срок годности истекает быстрее, чем у других, поэтому вам нужно сообщить браузеру, какие продукты устаревают и их нужно быстро выбросить, а какие можно спокойно хранить на полке без замены. Вы можете использовать такой инструмент, как WebPageTest.org, чтобы понять, где есть возможности. Здесь важно понимать, что не существует ни срока действия, ни максимального срока существования элемента в кэше.Следовательно, браузер будет просто предполагать, что каждый раз его нужно загружать заново - кеширование браузера не может произойти, если эти детали не указаны.

Поскольку настройки кеширования сообщают браузеру, что элемент слишком старый для использования, на него иногда ссылаются как на «время жизни кеширования» или «время жизни». Если что-то выходит за рамки его актуальности или срока службы кеширования, для получения новой версии необходимо выполнить обход сервера и обратно. Если элементы указаны как «просроченные», это означает, что срок их действия истек, и в аналогии с продуктами и браузером их необходимо заменить в следующий раз, когда они понадобятся.

Точно так же, как бесполезно иметь полки с просроченными продуктами, бесполезно иметь кэш, заполненный просроченным веб-контентом. И наоборот, также неэффективно выбрасывать продукты (файлы), которые все еще можно использовать. Когда вы назначаете своим файлам время жизни кэширования, полезно подумать об этом, а также рассмотреть последствия щедрости в отношении времени жизни кэширования. Если вы внесете незначительные изменения в свой логотип, это не будет концом света, если старый логотип все еще будет отображаться, поэтому вы можете продлить срок действия кеширования, особенно если вы планируете тщательно обновлять имена файлов, когда вы вносить изменения.С другими именами файлов вы можете не беспокоиться о том, чтобы отобразить старый логотип.

7. Создавайте ускоренные мобильные страницы (AMP).

Все это может показаться сложным, поэтому Google создал более простое решение для оптимизации скорости загрузки страниц. Ускоренные мобильные страницы или AMP - это подмножество HTML, которое следует гораздо более строгим правилам относительно того, что может быть включено. Цель состоит в том, чтобы у большинства страниц время загрузки на мобильном устройстве составляло 1 секунду, что обычно и происходит. AMP позволяет Google контролировать большую часть сложных вещей, кэшируя и настраивая процесс загрузки и большинство элементов, описанных выше, таким образом, чтобы он был максимально оптимизирован.

В некоторых случаях предприятия создают новые страницы AMP и ссылаются на них с существующих страниц сайта с помощью тега head. Это указывает Google обслуживать страницу AMP, когда человек, запрашивающий страницу, находится на мобильном устройстве или при медленном соединении. В других случаях вы можете заменить их существующие страницы (или их существующие мобильные страницы, если у них есть отдельные сайты) страницами AMP. Это называется «канонический AMP» или «канонический AMP». Google предпочитает этот метод, потому что страницы AMP очень легко сканировать, отображать, индексировать и оценивать.Однако компании могут не предпочесть это, потому что ограничения и требования AMP могут сделать страницы немного резкими. AMP также может усложнять или ограничивать некоторые функции отслеживания и тестирования, которые вы можете выполнять на страницах для ПК, поэтому это еще одна причина, по которой некоторые люди избегают этого.

сайтов, которые являются действительными для AMP, соответствуют всем правилам и рекомендациям AMP, и, в свою очередь, Google показывает маленькую серую молнию с ними в мобильных результатах. Google с большей вероятностью включит их в специальные карусели результатов, которые, как правило, занимают верхние позиции на странице.Это замечательно, но если действительный AMP вызовет слишком много проблем для вашего веб-сайта, можно использовать код AMP, не будучи действительным. По возможности вы должны использовать AMP HTML, не беспокоясь о соблюдении всех правил. Вы по-прежнему выиграете от скорости AMP HTML и AMP JavaScript - неплохая сделка, учитывая, что это бесплатно. Помните, что скорость напрямую влияет на вовлеченность и конверсию, но, вероятно, также помогает с глубиной сканирования и другими аспектами эффективности сканирования.

Мобильные браузеры работают иначе, чем настольные браузеры.У них также более медленные процессоры и менее надежные соединения. Эти факторы делают важным анализ времени загрузки страниц вашего сайта с точки зрения наихудшего мобильного устройства, чтобы понять, где есть реальные возможности для улучшения.

.

5 способов оптимизировать ваш сайт WordPress для мобильных устройств

Большинство людей так или иначе оптимизировали свой сайт, но делали ли вы когда-нибудь что-нибудь специально для посетителей с мобильных устройств?

В 2017 году с мобильных устройств приходилось больше трафика, чем с компьютеров, и это число будет только расти. Люди все чаще и чаще используют свои устройства и требуют, чтобы вы упростили им доступ к вашему сайту.

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

Зачем вам нужен мобильный телефон? По данным Google, 61% пользователей вряд ли вернутся на мобильный сайт, с которым у них возникли проблемы, а 40% перейдут на сайт конкурентов. Даже если люди не покупают ваш продукт или услугу на мобильных устройствах, вы держите пари, что они проводят конкурентные исследования.Если вы упустите возможность пообщаться с ними на их устройстве, вы потеряете их навсегда.

Чтобы этого не произошло, очень важно поработать над своим мобильным пользовательским интерфейсом. Давайте посмотрим на 5 способов оптимизации вашего сайта сегодня.

1. Ускорьте свой мобильный сайт

Самое важное, что вы можете сделать, - это ускорить свой сайт, так что начните с этого.

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

Вот 3 вещи, которые вы можете сделать прямо сейчас, чтобы ускорить работу своего сайта для мобильных устройств.

Уменьшить изображения

Большие изображения могут значительно замедлить загрузку страницы. Хорошо, что это довольно просто исправить.

Первое, что нужно сделать, это просмотреть страницы вашего сайта и избавиться от любых изображений, которые не являются абсолютно необходимыми. Если ваши изображения предназначены только для того, чтобы ваш сайт выглядел красиво, вероятно, они не привлекают посетителей. Попробуйте выполнить a / b-тестирование с некоторыми из ваших основных изображений и без них, вы можете обнаружить, что это не имеет значения.

Если изображения должны остаться, обязательно оптимизируйте большие изображения на основных целевых страницах. Вы можете использовать такой инструмент, как Imagify, который также имеет плагин WordPress. Этот инструмент сжимает ваши изображения без потери качества, поэтому ваши страницы загружаются быстрее, но при этом выглядят великолепно.

Адаптивные изображения также помогают сократить время загрузки, и, к счастью для вас, они уже находятся в ядре WordPress начиная с версии 4.4. Вам не нужно ничего делать, чтобы использовать их, если вы в курсе.

Оптимизация подключаемых модулей и тем

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

Если вы видите серьезное замедление, попробуйте обновить все темы, плагины и ядро ​​WordPress. Если это не помогло, отключите плагины на промежуточном сайте, пока не найдете виновника. Вам также может потребоваться переключить тему на одну из тем WordPress по умолчанию, например TwentySeventeen. Найдя проблему, вы можете оставить ее неактивной или попытаться диагностировать проблему.

Это может быть довольно сложно, но лучше всего начать с HTTP-запросов или запросов wpdb.По словам технического директора Pagely Джошуа Эйхорна, это худшие нарушители, с которыми они сталкиваются при поддержке своих клиентов хостинга.

Еще вы можете минимизировать и объединить файлы CSS и JS плагинов. В этом может помочь такой плагин, как WP Rocket; просто убедитесь, что вы связываетесь со своим веб-хостингом, если используете плагин кеширования. Некоторое кеширование может быть избыточным в среде хостинга, такой как Pagely, которая уже сильно оптимизирована.

Используйте отличный веб-хостинг

Вы читаете это на Pagely, так что есть вероятность, что у вас уже есть отличный хост.

Если вы находитесь на дешевом сервере виртуального хостинга в другом месте, простое обновление вашей учетной записи хостинга может многое сделать. Управляемые хосты WordPress, такие как Pagely, имеют серверную инфраструктуру и кэширование, что значительно ускорит ваш сайт. Они также позволяют использовать современные технологии, такие как PHP 7, который в 4 раза быстрее, чем PHP 5.4. Pagely также включает CDN, который может ускорить изображения вашего сайта и другие ресурсы, и он очень прост в использовании.

Дополнительные советы по оптимизации скорости, включая бесплатное руководство в формате PDF, можно найти в этой статье «Ускорение WordPress для мобильных устройств».

2. Не останавливайтесь на адаптивном

Адаптивный дизайн важен, но этого недостаточно, чтобы просто купить адаптивную тему.

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

Адаптивный дизайн, каким мы его знаем сегодня, отрицательно сказывается на показателях мобильной конверсии.- Джоэл Харви

Например, если у вас есть веб-сайт ресторана, пользователи мобильных устройств, вероятно, просто хотят видеть ваше меню, часы работы и то, как добраться до вашего местоположения. Пользователи настольных компьютеров могут иметь возможность пролистывать больше изображений вашего сайта, читать сообщения в блоге и подписываться на вашу рассылку новостей, но вы не хотите утомлять своих мобильных пользователей слишком большим количеством этого. Если у вас просто адаптивная тема, вы не сможете намеренно показать мобильным пользователям то, что они хотят быстро.

Преднамеренное проектирование интерфейса для мобильных посетителей может потребовать обнаружения устройств на уровне сервера и создания для них другого интерфейса в вашей теме.Вы можете использовать встроенную функцию wp_is_mobile () для этого в своих шаблонах тем, которая пойдет намного дальше, чем перестановка столбцов с помощью CSS.

3. Рассмотрим мобильное приложение

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

Приложения занимают 89% времени мобильных медиа, а остальные 11% тратятся на веб-сайты. - Smart Insights

Частью мобильной оптимизации является создание целостного мобильного опыта для вашей аудитории и для многих предприятий, который включает собственное мобильное приложение.Приложения обеспечивают более быструю и целенаправленную работу, а также функции, недоступные в Интернете. Например, офлайн-доступ и push-уведомления.

Мобильный Интернет Мобильное приложение

Вы также можете распространять через магазины приложений iOS и Android, что дает вам еще одну точку контакта для взаимодействия с вашими клиентами.

Многие компании могут воспользоваться мобильным приложением в качестве дополнения к своему веб-сайту. Есть много способов создать приложение, включая индивидуальную разработку или конструктор приложений своими руками.Разработка пользовательских приложений - отличный способ создать приложение, если у вас есть на это бюджет. Конструкторов приложений - пруд пруди, но не все они интегрируются с WordPress на одном уровне. Такой инструмент, как AppPresser, ориентирован специально на веб-сайты на базе WordPress и может помочь вам создать приложение по доступной цене.

4. Избегайте распространенных ошибок SEO.

Google предлагает некоторую помощь владельцам веб-сайтов, которые работают над улучшением своего мобильного SEO.

Первое, что нужно сделать, это загрузить свой сайт от имени Google, чтобы узнать, есть ли какие-либо проблемы, о которых вам нужно знать.Вы можете сделать это через Google Search Console здесь.

После того, как вы загрузите свой сайт как Google, он покажет вам все проблемы с вашим сайтом, которые вам необходимо исправить.

Вам также следует убедиться, что вы не используете неправильно настроенный файл robots.txt или карту сайта, которые могут заблокировать доступ Google к вашему сайту. Проверьте наличие плохих перенаправлений или неработающих ссылок, особенно тех, которые влияют только на мобильные устройства. Использование такого плагина, как Yoast SEO, также поможет вам улучшить SEO, а также выявит некоторые ошибки.

Понравилось это содержание? Познакомьтесь с Пейджем.

Если вы используете всплывающий плагин или межстраничное объявление для загрузки приложения, убедитесь, что он не блокирует весь экран на мобильном устройстве. Вместо этого используйте менее навязчивый баннер или отключите всплывающие окна для мобильных устройств.

Размер шрифта должен быть удобочитаемым на мобильном телефоне. Я предпочитаю большой мобильный шрифт размером 16 пикселей. Ваши длинные статьи должны состоять из одной колонки без боковых панелей на маленьком экране. Также убедитесь, что высота любых кнопок или касаний составляет не менее 44 пикселей, что, по мнению Apple, является желаемым размером.

Дополнительные рекомендации Google в полном руководстве можно найти здесь.

5. Отслеживайте свой прогресс

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

Google Analytics может отслеживать мобильные посещения отдельно от настольных компьютеров с помощью функции, называемой сегментированием. Используя эту функцию, вы можете увидеть, какая часть вашего трафика является мобильной, откуда он идет и какие страницы просматриваются.

Чтобы включить мобильный сегмент, войдите в свою учетную запись Google Analytics и перейдите в Аудиторию.Нажмите там, где написано «Обзор» (если его еще нет), затем нажмите «Добавить сегмент» вверху страницы. Это покажет вам все доступные сегменты, и вы сможете выбрать «Мобильный трафик».

Вы можете снять флажок «Весь трафик», чтобы просматривать только мобильные устройства, или оставьте его установленным для сравнения. Нажмите синюю кнопку «Применить» под сегментами, и теперь вы увидите свои новые сегментированные данные.

Теперь вы можете видеть процентную долю мобильного трафика на ваш сайт, и вы можете щелкнуть другие элементы навигации, чтобы просмотреть другие данные.Например, если я перейду к «Поведение => Контент сайта => Все страницы», я увижу, что моя страница с ценами является посещаемой страницей №1 на мобильном устройстве. Я предполагаю, что люди изучают и хотят узнать, сколько стоит мой продукт.

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

Заключение

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

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

Мобильное приложение может стать отличным способом по-новому взаимодействовать с вашей аудиторией, предоставляя им автономный доступ к вашему контенту и более сфокусированный опыт.Наконец, убедитесь, что вы отслеживаете свой прогресс с помощью Google Analytics или другой платформы, потому что то, что измеряется, выполняется.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий