Вашият уебсайт удобен ли е за преглед на телефон?

Повечето посетители разглеждат Вашия уебсайт на телефон. Google прави същото: Google използва мобилната версия на Вашите страници, за да ги индексира и класира. Това, което не се вижда на телефона Ви, не се вижда и за Google. В тази статия ще прочетете как сами да проверите дали Вашият сайт работи добре на малък екран.

Правилото за viewport

Телефонът не знае автоматично, че Вашата страница е създадена за малък екран. Без инструкция браузърът приема, че екранът е много по-широк, и свива цялата страница. Тогава се получава съвсем дребен текст, в който трябва да увеличавате мащаба. Решението е един ред в <head> на всяка страница:

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

• Без фиксирана широчина като width=1024: тогава телефонът отново приема, че екранът е широк.
• Не блокирайте мащабирането: пропуснете user-scalable=no и maximum-scale=1. Хората със слабо зрение трябва да могат да увеличават текста.

AI Builder, темите на WordPress и повечето други конструктори на уебсайтове сами добавят този ред във всяка страница. При самостоятелно изработен или стар сайт си струва да проверите: отворете страница, щракнете с десния бутон, изберете Преглед на изходния код на страницата (или Ctrl+U) и потърсете с Ctrl+F думата viewport.

Тестване сами

1. Отворете сайта си на собствения си телефон и прегледайте най-важните си страници.
2. Или на компютъра: отворете сайта си в Chrome или Firefox, натиснете F12 и щракнете върху иконата на телефон и таблет. Изберете тясно устройство.
3. Обърнете внимание на текст, който излиза извън екрана, страница, която трябва да превъртате настрани, бутони, които са твърде малки или се припокриват, и части, които липсват на мобилна версия.
4. След това тествайте в PageSpeed Insights в раздела Mobile. Как се чете този отчет, е описано в Четене на PageSpeed Insights: Core Web Vitals на разбираем език.

Отделният тест за мобилна съвместимост на Google и отчетът Мобилна удобство за ползване в Search Console вече не съществуват от 1 декември 2023 г. Ако попаднете на тях в стара статия, използвайте стъпките по-горе.

Еднакво съдържание на мобилно устройство и на компютър

При responsive сайт (един адрес и една страница, която се адаптира към широчината на екрана) съдържанието автоматично съвпада. Google препоръчва този начин. Ако имате отделен мобилен сайт, например m.example.com, или система, която изпраща различни страници на телефоните, проверете следното:

• еднакъв текст, дори ако на мобилно устройство той е в разгъващ се блок;
• еднакво заглавие и описание;
• еднакви изображения с еднакви alt текстове;
• няма съдържание, което се зарежда едва когато посетителят плъзне, щракне или въведе нещо: Google не прави това.

Допълнително четене

• Google: препоръчани практики за mobile-first indexing (на английски)
• MDN: правилото за viewport (на английски)

Искате да научите повече? Преминете безплатния курс Видимост онлайн, урок 4.2 Първо мобилното и viewport.