Първо мобилното и viewport

Модул 4: Скорост, мобилни устройства и https · Време за четене: 10 минути

Цел на урока: След този урок ще можете да обясните какво означава mobile-first indexing, да разпознавате и пишете правилна настройка на viewport и да избягвате капаните, заради които Вашата мобилна страница показва по-малко или работи по-зле от настолната.

Основни понятия: mobile-first indexing, smartphone crawler, responsive дизайн, dynamic serving, отделен мобилен сайт, <meta name="viewport">, width=device-width, initial-scale, блокиране на мащабирането, еднакво съдържание, натрапчиви изскачащи прозорци (interstitials), зони за докосване

Google гледа през телефон

Дълго време Google разглеждаше уебсайтовете така, както го прави компютър. Това вече е минало. За индексиране и класиране Google използва мобилната версия на Вашите страници и я изтегля със smartphone crawler на Googlebot. Това се нарича mobile-first indexing. През октомври 2023 г. Google обяви, че преминаването е завършено: за почти всички сайтове това вече е просто „индексиране“. От юли 2024 г. Google обхожда с мобилния crawler и последните сайтове, които още се посещаваха с настолния; това, което изобщо не е достъпно от телефон, вече не може да бъде индексирано.

Какво означава това на практика? Това, което го няма на Вашата мобилна страница, за Google не съществува. Ако на телефона премахнете част от текста, таблица, работното си време или структурираните си данни, „защото екранът е малък“, Google също няма да види тази част.

Три начина за изграждане на мобилна версия

Почти всички съвременни конструктори на уебсайтове и теми за WordPress са responsive. Сайтът от AI Builder също е responsive: една страница, която се приспособява. Ако имате стар сайт с отделна m. версия, преминаването към responsive често е най-голямото подобрение, което можете да направите.

Viewport: редът, благодарение на който всичко работи

Браузърът на телефона не знае от само себе си, че Вашата страница е направена за малък екран. Без указание той приема, че екранът е много по-широк, например 980 пиксела (примерът от документацията на MDN), и смалява цялата страница, докато се побере на екрана. Резултатът: миниатюрен текст, в който трябва да увеличавате. Тогава и responsive дизайнът не работи, защото CSS смята, че екранът е широк.

Решението е един ред в <head> на всяка страница:

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

• width=device-width означава: направи страницата толкова широка, колкото е екранът на устройството. Тогава Вашият CSS може да работи с ширините на екрана.
• initial-scale=1 означава: започни без увеличаване или намаляване.

Това е точно редът, който препоръчва Lighthouse (проверката в Chrome и PageSpeed Insights). Lighthouse отхвърля страница, ако редът за viewport липсва или няма width=.

Какво е по-добре да не правите

Някои сайтове добавят повече:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Така посетителят вече не може да увеличава. Изглежда подредено („оформлението остава цяло“), но за човек със слабо зрение това е пречка. Насоките за достъпност WCAG 2.2 изискват в критерий за успех 1.4.4 (Преоразмеряване на текста, ниво AA) текстът да може да се увеличи до 200 процента, без да се губи съдържание или функционалност. Официалното правило за проверка на W3C, „Meta viewport allows for zoom“, отхвърля viewport с user-scalable=no или с maximum-scale по-малко от 2. Затова пропуснете тези части. (Safari на iPhone днес ги пренебрегва по подразбиране, но другите браузъри не.)

Грешка е и фиксираната ширина, като width=1024. Тогава телефонът отново приема, че екранът е широк 1.024 пиксела, и Вашият responsive дизайн става безполезен.

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

В документацията за mobile-first indexing Google посочва няколко неща, които трябва да са еднакви в двете версии. При responsive сайт това е така от само себе си, а при dynamic serving и отделен мобилен сайт трябва да го проверите:

• Самото съдържание. На мобилно устройство текстът може да е в разгъващ се блок или раздел, но трябва да е в страницата.
• Заглавието и мета описанието (урок 3.1) трябва да са равностойни.
• Структурираните данни (модул 5) трябва да присъстват и в двете версии.
• Изображенията трябва да са със същите alt текстове и в добро качество.
• Без съдържание, което се зарежда едва след действие. Google го казва буквално: не зареждайте основното съдържание едва когато посетителят плъзне, кликне или въведе текст; Googlebot не прави това.
• robots.txt не трябва да блокира мобилните страници и техните CSS, JavaScript и изображения. Без CSS Google не може да види как изглежда страницата.

Удобно на малък екран

Няколко точки, които Google посочва като въпроси за добро потребителско изживяване и които можете да проверите на собствения си телефон:

• Четлив текст без увеличаване.
• Зони за докосване (бутони, връзки в меню), достатъчно големи и не твърде близо една до друга, за да не докоснете по погрешка грешната.
• Без натрапчиви изскачащи прозорци. Google пише, че елементите, които закриват съдържанието (прозорец за бюлетин върху цялата страница веднага щом влезете), дразнят посетителите и подкопават доверието, и че затрудняват търсачките да разберат Вашето съдържание. По-добре използвайте малка лента. Задължителните по закон прозорци, като проверка на възрастта, не попадат под тази насока.
• Без хоризонтално превъртане: твърде широко изображение или таблица избутва цялата страница настрани. Дайте на таблиците собствена лента за превъртане.

В края на 2023 г. Google спря отделния тест Mobile-Friendly Test и отчета Mobile Usability в Search Console. Днес проверявате със собствения си телефон, с мобилния изглед в инструментите за разработчици на браузъра и с Lighthouse или PageSpeed Insights (урок 4.3).

На практика: проверете сами

Отворете сайта си в Chrome или Firefox на компютъра, натиснете F12 и кликнете върху иконата на телефон и таблет (лента с инструменти за устройства). Изберете тясно устройство и прегледайте най-важните си страници. Обърнете внимание на текст, който излиза извън екрана, бутони, които се застъпват, и части, които липсват на мобилното устройство. След това проверете в изходния код (Ctrl+U) дали редът за viewport е там.

AI Builder сам поставя реда за viewport width=device-width, initial-scale=1 във всяка страница. Темите за WordPress също го правят, както и повечето други конструктори на уебсайтове. При самостоятелно създаден или стар сайт си струва да проверите: това е един ред, но без него нищо от мобилния Ви дизайн не работи.

Обобщение

• Google индексира и класира мобилната версия на Вашите страници; това, което липсва там, Google не го вижда.
• Responsive дизайнът е препоръчителният начин: един адрес, един HTML.
• Всяка страница се нуждае от <meta name="viewport" content="width=device-width, initial-scale=1">.
• Не блокирайте мащабирането: без user-scalable=no и без maximum-scale под 2 (WCAG 1.4.4).
• Поддържайте еднакви съдържанието, заглавието, мета описанието и структурираните данни на мобилни устройства и настолни компютри и избягвайте изскачащи прозорци, които закриват страницата.

Тест

Задача

Задача A4.2: Има ли Вашата страница подходящ viewport? Въведете адреса на една страница (например началната си страница). Програмата прочита HTML и проверява дали в <head> има точно един <meta name="viewport"> с width=device-width и дали мащабирането не е блокирано (user-scalable=no или maximum-scale под 2). След това разгледайте сами същата страница в мобилния изглед на браузъра си. Нямате собствен сайт? Използвайте www.wikipedia.org.

Прочетете още

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT правило Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Мета тагът viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• Вашият уебсайт удобен ли е за преглед на телефон?