Заявете SEO одит Media Queries (Медийни запитвания) са CSS правила, които позволяват различни стилове да се прилагат според характеристиките на устройството или средата, например ширина на екрана, ориентация, резолюция или предпочитания на потребителя.
Какво означават Media Queries?
Media queries са основен инструмент в responsive web design. Те позволяват една страница да изглежда и работи добре на мобилен телефон, таблет, лаптоп и голям монитор, без да се поддържат отделни версии на сайта. Най-често се използват условия като min-width и max-width, чрез които се променят layout, размери на шрифт, колони, менюта и разстояния.
Примерно правило може да зададе едноколонно оформление за малки екрани и двуколонно оформление при по-широки екрани. Така съдържанието остава четимо, бутоните са удобни за докосване, а важните елементи не излизат извън видимата зона.
Защо са важни за SEO?
Търсачките оценяват дали страниците са достъпни и използваеми на мобилни устройства. Ако сайтът има лошо мобилно оформление, потребителите по-често напускат, а обхождането и индексирането могат да бъдат затруднени при скрито или недостъпно съдържание. Media queries помагат да се поддържа еднакво съдържание и добра използваемост при различни екрани.
Пример
CSS правило като @media (max-width: 768px) може да промени навигацията от хоризонтално меню към компактно мобилно меню. Същият подход може да намали броя колони, да увеличи разстоянията между интерактивни елементи и да подобри четимостта.
Чести грешки
- Скриване на важно съдържание на мобилни устройства.
- Използване на твърде много произволни breakpoint стойности.
- Тестване само в desktop браузър без реална мобилна проверка.
- Промяна на визуалния ред по начин, който обърква четенето и навигацията.
Свързани понятия
Media queries са свързани с responsive design, mobile-first CSS, Core Web Vitals, viewport, accessibility, CSS grid и flexbox.