Перейти к содержимому

Как включить мобильную версию ютуб

  • автор:

Как мне изменить режим просмотра веб-сайта на версию для настольного компьютера в Firefox для Android?

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

Settings icon in address bar in android

  1. Откройте страницу, которую хотите просмотреть в Firefox.
  2. Нажмите кнопку меню.
  3. Измените состояние переключателя рядом с Версия для ПК , чтобы включить этот режим или отключить его.

Эти прекрасные люди помогли написать эту статью:

Illustration of hands

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

Как включить мобильную версию ютуб

Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Просмотр мобильной верстки с ПК

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

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.

Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.

Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:

Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

Как создать мобильную версию сайта в Рег.сайте

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

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

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

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

Как сделать мобильную версию сайта на Рег.сайте

Чтобы настроить мобильную версию в Рег.сайте, вам не потребуется устанавливать дополнительные плагины. Всё настраивается через Divi Visual Builder. При этом вносить изменения можно как через настройки контента и дизайна, так и через дополнительные настройки CSS.

Рассмотрим, как настроить неадаптивные блоки и элементы под мобильную модификацию на примере страницы интернет-магазина. Для этого:

  1. Проверим, как сайт выглядит в мобильной версии.
  2. Отредактируем нужные элементы.

Шаг 1. Проверьте, как выглядит сайт с мобильного устройства

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

Мобильная версия регсайт 1

Перейдите в редактор сайта:

Мобильная версия регсайт 2

Кликните на три белых точки в фиолетовом круге:

В меню слева кликните на иконку телефона: Мобильная версия регсайт 3Так страница выглядит с мобильного устройства: Мобильная версия регсайт 4Видно, что большая часть блоков адаптирована под текущую версию. Однако некоторые элементы выглядят некорректно. Например, блок со сроком акции: Мобильная версия регсайт 5Давайте отредактируем их.

Шаг 2. Отредактируйте неадаптивные элементы

Настроить сайт под мобильную версию можно через Visual Builder, через CSS и через настройки видимости. Рассмотрим, как это сделать.

Через Visual Builder

Мобильная версия регсайт 6

Перейдите в настройки модуля:

Мобильная версия регсайт 7

В открывшемся блоке нажмите на иконку телефона:

Обратите внимание

Все описанные ниже настройки можно выставить и для планшетной версии сайта. Для этого в панели вместе вместо иконки телефона выбирайте иконку планшета:

Мобильная версия регсайт 8

Отредактируйте элементы так, чтобы в мобильной модификации сайта они выглядели гармонично. Обратите внимание: все изменения отображаются в Visual Builder до сохранения — вы сможете посмотреть их в процессе редактирования. Например, измените размер, позиционирование или цвет шрифта: Мобильная версия регсайт 9Или добавьте в модуль или ряд новые элементы. Чтобы сохранить изменения, нажмите на белую галочку. Аналогичным образом настройте все модули, которые отображаются некорректно. Мобильная версия регсайт 13После этого, чтобы не потерять изменения на всей странице, кликните Сохранить: Мобильная версия регсайт 14

Адаптивное редактирование Divi позволяет вносить более сложные изменения в дизайн страницы с помощью CSS. Чтобы использовать для настройки CSS:

Мобильная версия регсайт 15

Перейдите в настройки модуля:

Мобильная версия регсайт 16

Перейдите на вкладку ДополнительноПользовательский CSS. Количество доступных настраиваемых полей CSS будет отличаться в зависимости от элемента. Например, для текстового модуля есть только три настраиваемых поля: «Перед», «Основной элемент» и «После».

Мобильная версия регсайт 17

Каждое поле ввода CSS соответствует классу CSS внутри элемента. Чтобы увидеть соотношение, наведите указатель мыши на элемент и кликните на иконку вопроса:

Мобильная версия регсайт 18

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

Мобильная версия регсайт 19

Введите в поле ввода нужный код. Обратите внимание: не нужно добавлять класс CSS к фрагменту CSS, иначе код не сработает. Добавьте только свойства CSS в поле соответствующего класса. Предположим, вы хотите, чтобы кнопка охватывала всю ширину модуля на планшете и телефоне, но не на рабочем столе. Для этого на вкладке в поле ввода добавьте «display: block;»: Подробнее о нюансах работы с пользовательским CSS читайте в статье.

Через настройки видимости

Также вы можете просто скрыть отдельный элемент или целый блок в мобильной версии. Для этого:

Откройте настройки модуля и перейдите на вкладку Дополнительно.

В блоке «Видимость» выберите те элементы, которые хотите скрыть: контент (основной текст), изображения (кнопку) или видео/изображения. Для этого переведите нужные переключатели в положение ДА, отметьте чекбокс Телефон и кликните на галочку в зеленом квадрате: Мобильная версия регсайт 10В примере мы отключили отображение картинки в мобильной версии. Блок, для которого применены настройки, будет отображаться бледнее, чем остальные: Мобильная версия регсайт 11Аналогичные настройки можно применить и для десктопной версии. Для этого отметьте чекбокс Десктоп и сохраните изменения: Мобильная версия регсайт 12Чтобы не потерять изменения на всей странице, кликните Сохранить.

Готово. Теперь вы сможете настроить мобильную версию сайта в Рег.сайте и вашим клиентам будет удобно им пользоваться с мобильных гаджетов.

Рекомендации по мобильным сайтам и индексированию с приоритетом мобильного контента

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

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

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

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

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

  • Адаптивный дизайн. Сервер отправляет один и тот же HTML-код всем устройствам (компьютерам, планшетам, мобильным телефонам, невизуальным браузерам), но отрисовка сайта выполняется по-разному в зависимости от размера экрана. Google рекомендует использовать адаптивный дизайн, поскольку с ним проще всего работать.
  • Динамический показ. На разных устройствах открывается один и тот же URL. Для того чтобы показывать отдельные версии HTML-кода на разных устройствах, используется определение user-agent и заголовок HTTP-ответа Vary: user-agent .
  • Разные URL. В зависимости от типа устройства выбираются разные варианты кода и разные URL. Система пытается определить тип устройства пользователя, а затем перенаправляет его на нужную страницу при помощи директивы user-agent и HTTP-заголовка Vary .

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

Если вы используете такие системы управления контентом, как Wix или Blogger, возможно, вам потребуется изменить тему сайта, чтобы он был более удобным на смартфонах и планшетах. Попробуйте добавить к названию системы управления контентом фразу «оптимизация для мобильных устройств» и выполнить поиск по такому запросу (например, «wix оптимизация для мобильных устройств»).

Убедитесь, что Google может сканировать страницы

У Google должен быть доступ к вашим ресурсам и контенту на страницах для мобильных устройств.

  • На обычной и мобильной версиях сайта следует внедрять одни и те же теги meta с атрибутом robots . При использовании для мобильной версии сайта других тегов meta с атрибутом robots , особенно тегов noindex или nofollow , у робота Googlebot могут возникнуть проблемы: он не сможет обрабатывать такие страницы, если для них включено индексирование с приоритетом мобильного контента.
  • Не используйте для основного контента отложенную загрузку, связанную с действиями пользователей. Google не всегда может найти контент, для загрузки которого пользователь должен что-то сделать, например перелистнуть страницу, нажать кнопку или ввести текст. Подробнее о том, как обеспечить индексацию контента с отложенной загрузкой…
  • Необходимо предоставить Google возможность сканировать ваши ресурсы. Иногда адрес мобильного сайта не совпадает с адресом обычного. Робот Googlebot может проиндексировать только те URL, которые не заблокированы правилом disallow .

Убедитесь, что на обычном и мобильном сайтах опубликован один и тот же контент

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

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

Проверьте структурированные данные

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

  • Проверьте, совпадают ли структурированные данные на мобильном и обычном сайтах. Если вы не знаете, какие типы структурированных данных подойдут для мобильного сайта, сначала ознакомьтесь с информацией о свойстве Breadcrumb и типах Product и VideoObject .
  • Используйте в структурированных данных правильные URL. Убедитесь, что URL в структурированных данных, добавленных на мобильную версию сайта, ведут на страницы, которые оптимизированы для мобильных устройств.
  • Если вы используете Маркер, не забывайте о проверках. Если вы добавляете структурированные данные с помощью Маркера, регулярно выполняйте проверку на наличие проблем с извлечением информации.

Разместите одинаковые метаданные на обеих версиях сайта

Убедитесь, что на обоих сайтах совпадают элементы title и метаописания.

Проверьте места размещения объявлений

Используйте такие методы размещения рекламы, которые не нанесут вреда рейтингу вашего мобильного сайта. При показе объявлений на мобильных устройствах соблюдайте стандарты Better Ads Standards. Например, объявления в верхней части страницы зачастую занимают слишком много места. Это может производить неблагоприятное впечатление на пользователей.

Проверьте графику и видео

Проверьте изображения

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

  • Используйте качественные изображения. Они не должны быть слишком маленькими или иметь недостаточно высокое разрешение.
  • Используйте только поддерживаемые форматы. Это касается как изображений, так и тегов. Например, Google поддерживает формат SVG, но наши системы не могут проиндексировать JPG-изображение в теге внутри встроенного SVG-файла.
  • Не используйте URL, которые меняются каждый раз при загрузке изображений. В таком случае наша система не сможет обработать и проиндексировать ваши ресурсы.
  • Убедитесь, что для изображений на обеих версиях сайта указан один и тот же альтернативный текст. На мобильном сайте он должен быть настолько же информативным, как и в версии для компьютеров.
  • Контент должен быть в равной степени качественным как на обычных, так и на мобильных страницах. Используйте одни и те же информативные заголовки, подписи, текстовые фрагменты и названия файлов для обеих версий сайта.

Проверьте видео

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

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

Дополнительные рекомендации для сайтов с отдельными URL

Если у мобильной и полной версий сайта разные URL (например, мобильная версия находится в субдомене m.), следуйте советам, приведенным ниже.

  • Убедитесь, что статус страницы с сообщением об ошибке одинаков на обеих версиях сайта. Если на странице обычного сайта контент доступен, а ее версия для мобильных устройств возвращает ошибку, страница не будет проиндексирована.
  • Убедитесь, что на мобильной версии сайта не используются фрагменты URL. Фрагмент – это часть URL, которая расположена в конце и начинается с элемента # . Как правило, фрагментированные URL не индексируются. Мы перестанем сохранять их после того, как ваш домен будет переведен на индексирование с приоритетом мобильного контента.
  • Проверьте, есть ли у страниц с обычного сайта, содержащих несколько разных вариантов контента, аналогичные версии для мобильных устройств. Если на смартфонах и планшетах переадресация с разных URL ведет на одну и ту же страницу, например на главную, то исходные страницы пропадут из индекса после перехода на новый способ индексирования.
  • Подтвердите право собственности как на мобильную, так и на обычную версию сайта в Search Console, чтобы вам были доступны данные и уведомления, связанные с обеими версиями. Когда Google начнет использовать для вашего сайта индексирование с приоритетом мобильного контента, на сайте может произойти сдвиг данных.
  • Проверьте атрибуты hreflang в каждой версии сайта. Если на многоязычном сайте используются элементы link с атрибутом rel=hreflang , ссылки между страницами для компьютеров и мобильных устройств следует настраивать отдельно. Атрибуты hreflang в мобильных URL должны указывать на мобильные URL, а URL для компьютеров, имеющие атрибут hreflang , – на обычные версии URL. Вот пример атрибутов hreflang для главной страницы сайта с разными URL мобильной и полной версий:

Мобильные устройства

URL мобильной версии сайта: https://m.example.com/ .

Полная версия

URL версии сайта для компьютеров: https://example.com/ .

Мобильные устройства

URL мобильной версии сайта: https://m.example.com/ . Он содержит элемент link , который указывает на URL для компьютеров как на канонический URL.

Компьютеры

URL полной версии сайта: https://example.com/ . Он содержит элемент link , который указывает сам на себя как на канонический URL, и ещё один элемент link , указывающий на мобильную версию как на альтернативный URL.

Устранение неполадок

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

Отсутствуют структурированные данные

done Решение:

  1. В коде обеих версий сайта должны быть структурированные данные.
  2. Проверьте, совпадают ли они.
  3. Используйте в структурированных данных правильные URL. Убедитесь, что URL в структурированных данных мобильных версий ведут на страницы, оптимизированные для мобильных устройств.
  4. Проверьте, нормально ли осуществляется извлечение информации. Если вы добавляете структурированные данные с помощью Маркера, регулярно выполняйте проверку на наличие проблем с извлечением информации.
  5. Используйте инструмент проверки URL, чтобы узнать, как робот Google воспринимает ваши страницы.

На страницах есть тег noindex

done Решение. Используйте одни и те же теги meta с атрибутом robots для обеих версий сайта. Не добавляйте тег noindex на страницу для мобильных устройств. При его наличии робот Googlebot не сможет просканировать и проиндексировать вашу страницу, если для нее включено индексирование с приоритетом мобильного контента.

Отсутствует изображение

done Решение:

  1. Мобильная версия сайта должна содержать те же материалы, что и полная. Обновите основной контент мобильной версии, чтобы он совпадал с версией для компьютеров. Индексироваться будут только материалы для смартфонов и планшетов.
  2. Используйте одни и те же теги robots ( meta ) для обеих версий сайта. Не добавляйте тег nofollow на страницу для мобильных устройств. При его наличии робот Googlebot не сможет просканировать и проиндексировать изображения на вашей странице, если ваш сайт переведен на индексирование с приоритетом мобильного контента.
  3. Используйте только поддерживаемые форматы изображений и теги. Например, Google поддерживает формат SVG, но наши системы не могут проиндексировать JPG-изображение в теге внутри встроенного SVG-файла.
  4. Не используйте для основного контента отложенную загрузку, связанную с действиями пользователей. Робот Googlebot не всегда может найти контент, для загрузки которого пользователь должен что-то сделать, например перелистнуть страницу, нажать кнопку или ввести текст. Подробнее о том, как обеспечить индексацию контента с отложенной загрузкой…

Изображение заблокировано

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

Низкое качество изображения

done Решение. Следите за качеством изображений. Они не должны быть слишком маленькими или иметь недостаточно высокое разрешение.

Отсутствует альтернативный текст

done Решение. Используйте один и тот же альтернативный текст для изображений на обеих версиях сайта.

Отсутствует название страницы

done Решение. Убедитесь, что на обоих сайтах совпадают названия и метаописания.

Отсутствует метаописание

done Решение. Убедитесь, что на обоих сайтах совпадают названия и метаописания.

Ошибка при переходе по мобильному URL

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

В мобильном URL есть анкер

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

Файл robots.txt блокирует доступ к странице

done Решение. Проверьте, правильно ли работают директивы в файле robots.txt и теги robots ( meta ) для обеих версий сайта. Обычно для полной и мобильной версий сайта используются одни и те же правила этого типа.

Выполняется переадресация с нескольких обычных страниц на одну мобильную

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

Выполняется переадресация на главную страницу мобильного сайта

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

Недостаточно высокое качество страницы

done Решение:

  1. Используйте такие методы размещения рекламы, которые не нанесут вреда рейтингу вашего мобильного сайта. При показе объявлений на мобильных устройствах соблюдайте стандарты Better Ads Standards.
  2. Мобильная версия сайта должна содержать те же материалы, что и его вариант для обычных компьютеров. Обновите основной контент мобильной версии, чтобы он совпадал с полной. Индексироваться будут только материалы для смартфонов и планшетов.
  3. Используйте одни и те же информативные заголовки для обеих версий сайта.
  4. Используйте одни и те же заголовки, подписи, текстовые фрагменты и названия файлов для обеих версий сайта.

Проблемы с видео

done Решение:

  1. При добавлении видео используйте только поддерживаемые форматы и теги. Чтобы проверить наличие видео на странице, мы выясняем, есть ли там связанный с ним HTML-тег, например , или .
  2. Не используйте для основного контента отложенную загрузку, связанную с действиями пользователей. Робот Googlebot не всегда может найти контент, для загрузки которого пользователь должен что-то сделать, например перелистнуть страницу, нажать кнопку или ввести текст. Подробнее о том, как обеспечить индексирование контента с отложенной загрузкой…
  3. Разместите видео так, чтобы его было легко найти на мобильном сайте. Если пользователи будут вынуждены долго прокручивать страницу, чтобы обнаружить ролик, его рейтинг может снизиться.

Проблемы с нагрузкой на хост

done Решение. Убедитесь, что ваши серверы смогут обеспечить достаточную производительность, если увеличится частота сканирования мобильной версии сайта.

Отправить отзыв

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-12-14 UTC.

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

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