banner_nika_hozyaike      banner_pos_bekker     banner_specpredl_roznica_2

Мобильный видовой экран | Как использовать видовой экран для SEO

  1. Что такое окно просмотра страницы?
  2. Создание вашего дизайна действительно отзывчивым

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

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

Что такое окно просмотра страницы?

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

Окно просмотра добавляется и настраивается на странице с использованием метатега окна просмотра. Этот тег, как и другие метатеги, представляет собой фрагмент HTML-кода, который находится в <head> страницы:

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

Эта первая часть в атрибуте содержимого, «ширина = ширина устройства», - это то, что говорит браузерам, чтобы они отображали страницу в соответствии с шириной экрана устройства. Вторая часть, «initial-scale = 1», инструктирует браузеры сделать страницу максимально широкой, когда страница отображается в альбомной ориентации (например, когда вы поворачиваете телефон в сторону).

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

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

Создание вашего дизайна действительно отзывчивым

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

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

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

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

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

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

  • Мобильный поддомен. Этот вариант требует значительных затрат времени и ресурсов на разработку. Как и в случае с динамическим дизайном, для опций мобильного поддоменов необходимо создать совершенно новый сайт, а затем разместить его на поддомене, обычно m.example.com или mobile.example.com. Google довольно хорошо выясняет отношения между доменами и поддоменами, но вы никогда не можете быть полностью уверены, поэтому вам нужно добавить канонические теги на мобильный сайт, указывающие на версию для настольных компьютеров. Наконец, вам придется перенаправлять посетителей на каждую версию, мобильную и настольную, в зависимости от их пользовательского агента. Хуже того, субдомены не могут надежно делиться ссылочным соком с остальной частью сайта, поэтому вы изолируете свои мобильные и настольные сайты друг от друга. Это может привести к проблемам в будущем, когда Google перейдет к мобильный первый индекс ,

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

Что такое окно просмотра страницы?
Что такое окно просмотра страницы?

Наш магазин

Сезонные товары

Icon    Доставка в течение дня
Icon    Работаем с 09:00 до 18:00 кроме выходных
Icon    Возврат в течении 14 дней
Icon    Гарантия на все товары