Помилка підключення. Спробуйте ще раз.

Перейти до вмісту
SEO Tools
Довідка та документація
UX / UI Критичний вплив Просте 2 хв

Viewport / мобільне відображення

Meta viewport забезпечує правильне відображення на мобільному.

Що це

Meta-тег viewport повідомляє браузеру, як масштабувати сторінку під ширину пристрою. Без нього мобільний відображає десктопну ширину, і все стає «дрібним і віддаленим».

Чому це важливо

Google індексує mobile-first — оцінює переважно мобільну версію. Без правильного viewport сайт провалює тест зручності використання на мобільному, що напряму знижує позиції, адже більшість відвідувань — із мобільних.

Як це зробити

  1. 1Вставте у <head> стандартний meta-тег viewport.
  2. 2Не забороняйте масштабування (maximum-scale=1 / user-scalable=no) — це шкодить доступності.
  3. 3Переконайтеся, що контент не виходить за межі по горизонталі, а кнопки достатньо великі (див. UX-аудит).

Приклад

Правильно
<meta name="viewport" content="width=device-width, initial-scale=1">

Висновок

Один рядок у заголовку, але принциповий для світу mobile-first. Без нього сайт на мобільному практично непридатний для використання, і Google це жорстко штрафує. Після впровадження протестуйте на реальному телефоні та в інструменті мобільної зручності.

Повʼязані теми