SEO

Технологии мобильного SEO [УЧЕБНИК]

#мобильных, #Google, #ваш, #страницы, #Отдельные, #адаптивный, #устройствах, #Шаг, #мобильного, #настольных, #Используйте, #страница, #Динамическое, #обслуживание, #убедитесь, #инструмент, #заголовке, #Отзывчивый

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Существует три различных мобильных конфигурации, которые вы можете выбрать:

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

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

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

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

Мобильная конфигурацияURLHTML
Отзывчивый веб-дизайнОстается такой жеОстается такой же
Динамическое ОбслуживаниеОстается такой жеРазные HTML
Отдельные URLРазные URLРазные HTML

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

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

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

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

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

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

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

Отдельные URL

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

Разные URL

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

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

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

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

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

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

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

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

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

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

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

Страница рабочего стола должна иметь в заголовке следующее:страница должна иметь следующее в заголовке :
<link rel = "alternate" media = "only screen and (max-width: 640px)"< link rel = "alternate" media = "only screen and (max-width: 640px)"
href = "http://m.example.com">= "http://m.example.com" > 
Мобильная страница должна иметь в своем заголовке следующее:Мобильная страница должна иметь в своем заголовке следующее :
<link rel = "canonical" href = "http://www.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 , включив их.
<script async type = "text / javascript" src = "jquery.js"> </ script>
 async type = "text / javascript" src = "jquery.js" > </ script>  
  • Переадресация с мобильных устройств – поскольку мобильные сети обычно работают медленно, слишком большое число переадресаций может снизить скорость вашей страницы. Если вы поддерживаете несколько URL-адресов, убедитесь, что все ваши ссылки указывают на соответствующие страницы. Если вы поддерживаете несколько URL-адресов и узнаете, что пользователь посещает страницу рабочего стола с мобильного устройства, и у вас есть эквивалентная мобильная страница с другим URL-адресом, затем перенаправьте пользователя на этот URL-адрес вместо отображения ошибки 404.
  • Тяжелые изображения – тяжелые изображения увеличивают время загрузки, однако мы не можем полностью избавиться от них, поскольку они полезны и эффективны. Поэтому вы должны поддерживать хороший баланс между текстом и большими изображениями. Используйте хороший инструмент для оптимизации ваших изображений и сохраняйте их в низком разрешении, чтобы избежать больших загрузок.
  • Избегайте плагинов и всплывающих окон – плагины, такие как Flash и Java, могут быть недоступны на мобильном устройстве пользователя. Всегда следите за тем, чтобы на вашей странице для мобильных устройств не было содержимого, которое нельзя воспроизвести. Избегайте использования всплывающих окон на мобильных страницах, потому что закрывать эти всплывающие окна на мобильном устройстве становится довольно неуклюжим.

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

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

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

  • Инструменты Google для веб-мастеров. Используйте доступные инструменты и методики Google, чтобы понять, что следует использовать, а чего следует избегать при разработке веб-сайтов для мобильных и настольных компьютеров.
  • Мобильный эмулятор – позволяет увидеть, как ваш сайт выглядит на самых разных мобильных устройствах.
  • Moz Local – используйте этот инструмент, чтобы убедиться, что ваш локальный SEO в порядке.
  • Инструмент тестирования адаптивного веб-дизайна – используйте этот инструмент, чтобы увидеть, как ваш адаптивный сайт выглядит на различных мобильных устройствах с экранами разных стандартных размеров.
  • Screaming Frog – это полезный инструмент, который позволяет анализировать ваш сайт и перепроверять все перенаправления.
  • User Agent Switcher – это надстройка Firefox, которую вы можете использовать, чтобы узнать, как выглядит ваш сайт при доступе из другого пользовательского агента.

Поделиться ссылкой:

1+
 
Юрий Доманский

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

Один комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *