Технологии мобильного SEO

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

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

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

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

Что такое мобильное SEO?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1 — Выберите мобильную конфигурацию

Шаг 2 — Информировать поисковые системы

Шаг 3 — Избегайте распространенных ошибок

Выберите мобильную конфигурацию

Вы можете выбрать одну из трех мобильных конфигураций:

Шаг 1 — Отзывчивый веб-дизайн

Шаг 2 — Динамическое обслуживание

Шаг 3 — Отдельные URL

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

Отзывчивый веб-дизайн

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

Динамическое Обслуживание

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

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

Отдельные URL

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

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

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

Информ Поисковики

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

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

 <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

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

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

 Варь: Пользователь-агент

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

Если вы поддерживаете отдельные URL-адреса, например example.com и m.example.com, вы можете сообщить об этом Google, добавив специальную ссылку rel = alternate в версию для настольного компьютера и наоборот, как указано ниже.

 Страница рабочего стола должна иметь в заголовке следующее:
 <link rel = "alternate" media = "only screen and (max-width: 640px)"
 href = "http://m.example.com">
 Мобильная страница должна иметь в своем заголовке следующее:
 <link rel = "canonical" href = "http://www.example.com">

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

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

• Медленные мобильные страницы. Мобильные сети работают медленнее по сравнению с проводными Интернет-сетями, поэтому важно обратить внимание на скорость загрузки ваших мобильных страниц. Это критический фактор рейтинга Google. Используйте мобильный инструмент SEO, чтобы узнать скорость вашей мобильной страницы. Google предоставляет ряд хороших инструментов, которые вы можете использовать. Перейдите по следующей ссылке — https://www.google.com/webmasters/tools/mobile-friendly/.

• Не блокируйте CSS и JavaScript — Google рекомендует использовать встроенные CSS и Javascripts для веб-сайтов, дружественных для мобильных устройств, чтобы их можно было загружать вместе с контентом. Поэтому, если у вас мало CSS, попробуйте настроить его внутри самого тега; но если вы используете много CSS в отдельных файлах, попробуйте включить его внизу, чтобы прекратить блокирование другого загружаемого контента. То же правило применяется к Javascript, который может храниться внутри самой страницы или включаться в нижней части страницы. Если вы можете избежать включения файла вверху страницы, используйте атрибут async , включив их.

Медленные мобильные страницы. Мобильные сети работают медленнее по сравнению с проводными Интернет-сетями, поэтому важно обратить внимание на скорость загрузки ваших мобильных страниц. Это критический фактор рейтинга Google. Используйте мобильный инструмент SEO, чтобы узнать скорость вашей мобильной страницы. Google предоставляет ряд хороших инструментов, которые вы можете использовать. Перейдите по следующей ссылке — https://www.google.com/webmasters/tools/mobile-friendly/.

Не блокируйте CSS и JavaScript — Google рекомендует использовать встроенные CSS и Javascripts для веб-сайтов, дружественных для мобильных устройств, чтобы их можно было загружать вместе с контентом. Поэтому, если у вас мало CSS, попробуйте настроить его внутри самого тега; но если вы используете много CSS в отдельных файлах, попробуйте включить его внизу, чтобы прекратить блокирование другого загружаемого контента. То же правило применяется к Javascript, который может храниться внутри самой страницы или включаться в нижней части страницы. Если вы можете избежать включения файла вверху страницы, используйте атрибут async , включив их.

 <script async type = "text / javascript" src = "jquery.js"> </ script>

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

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

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

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

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

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

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

Полезные инструменты

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

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

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

Moz Local — используйте этот инструмент, чтобы убедиться, что ваш локальный SEO в порядке.

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

Screaming Frog — это полезный инструмент, который позволяет анализировать ваш сайт и перепроверять все перенаправления.

User Agent Switcher — это надстройка Firefox, которую вы можете использовать, чтобы узнать, как выглядит ваш сайт при доступе из другого пользовательского агента.