Телеграм канал «WebDev+ | Веб-разработка»

Знакомьтесь: abs() в CSS

Функция abs() возвращает абсолютное значение вычисления, то есть делает число, длину или процент всегда положительными. Полезно для более безопасной вёрстки и предсказуемого визуала.

Подробнее здесь ↓
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/abs

@WebDev_Plus

Этот пост выкуплен под рекламную интеграцию.

Но здесь будут скрины от участников frontend-менторства Тихона Галактионова и подборка полезных материалов:

👉100 вопросов, которые точно помогут тебе на собеседовании: ссылка
👉Подборка из 100+ каналов с вакансиями для разработчиков: ссылка
👉10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS: ссылка
👉Чек лист проверки своего резюме: ссылка
👉Разбор самых популярных и каверзных вопросов на собесах: ссылка
👉Лайфхак как аккуратно “пинговать” рекрутеров: ссылка

Ссылка на канал Тихона, там же можно найти больше материалов для подготовки к собеседованиям в Big Tech: ссылка

Реклама, erid: 2W5zFHW9utM ИП Галактионов Тихон Витальевич, ИНН 771618975809

Быстрый способ улучшить поведение текста в приложении — использовать text-wrap: balance. Это свойство равномерно распределяет текст по строкам, избегая "висячих" слов

Поддержка ограничена небольшим количеством строк (примерно <6–10 в зависимости от браузера), поэтому лучше всего применять его для заголовков или коротких абзацев

@WebDev_Plus

Я до сих пор считаю, что это одна из лучших фич, которые современный CSS нам дал!

Кто знает, что значит only?

@WebDev_Plus

Чувак собрал полноценный эмулятор x86 CPU на CSS (без JavaScript).

Ты можешь писать программы на C, компилировать их в x86-машинный код через GCC и запускать прямо внутри CSS.

https://lyra.horse/x86css/

@WebDev_Plus

Ecommerce-сайт с фильтрами это SEO-кошмар.

Каждая комбинация фильтров создает новый URL:

- /shoes/
- /shoes/?color=red
- /shoes/?color=red&size=10
- /shoes/?color=red&size=10&brand=nike

50 фильтров = 1+ млн возможных URL.

Crawl budget у Google раздувается.
Штрафы за дублирующийся контент.

Вот как исправить faceted navigation и не убить фильтры:

1/ Проблема faceted navigation

Удобные для пользователя фильтры создают SEO-бардак:

10 категорий × 20 цветов × 15 размеров × 10 брендов
= 30 000 возможных URL

И все они показывают похожие товары.
Google тратит crawl budget впустую.
Ни один из них нормально не ранжируется.

У клиента было 127 000 индексируемых комбинаций фильтров.
Ценных было только 200.
Google не понимал, что именно ранжировать.

2/ Решение 1: обработка параметров в GSC

Google Search Console → Settings → Crawling → URL Parameters

Настройте каждый параметр:

No URLs:

- Параметры, которые не меняют контент
- Трекинговые коды (utm_source)
- Session ID

Representative URL:

- Параметры, которые меняют контент
- Дайте Google самому решить, что индексировать

Every URL:

- Параметры, создающие уникальные ценные страницы

Клиент настроил 15 параметров.
Индекс сократился с 127K до 3K страниц.
Позиции выросли.

3/ Решение 2: стратегия с robots meta tag

Используйте noindex на отфильтрованных страницах:

<?php if (isset($_GET['color']) || isset($_GET['size'])) { ?>
<meta name="robots" content="noindex, follow">
<?php } ?>


Позволяет:
✅Пользователи могут фильтровать
✅Google может обходить ссылки
✅Link equity передается
❌Google не будет индексировать страницы с фильтрами

Индексируйте только основные страницы категорий.


4/ Решение 3: Canonical на версию без фильтров

Все комбинации фильтров → canonical на основную категорию:

<!-- On /shoes/?color=red&size=10 -->
<link rel="canonical" href="https://example.com/shoes/" />

Это консолидирует сигналы в один URL.

Но: теряется возможность ранжироваться по запросу вроде red shoes size 10

Используйте, если:

- У комбинаций фильтров нет search volume
- Вам не нужно, чтобы страницы фильтров ранжировались

5/ Решение 4: стратегическая индексация (лучший вариант для большинства)

Индексируйте только ценные комбинации фильтров.

Индексировать:

/shoes/ (основная категория)
/shoes/red/ (цвет с высоким спросом)
/shoes/nike/ (популярный бренд)
/shoes/running/ (подкатегория)

Noindex для:

/shoes/?color=red&size=10&brand=nike&sort=price
Любой комбинации с 2+ фильтрами
Фильтров без search volume

Как реализовать:

$params = count($_GET);
if ($params > 1) {
echo '<meta name="robots" content="noindex, follow">';
}

6/ Решение 5: чистые URL для ценных фильтров

Перепишите URL фильтров так, чтобы они выглядели как категории:

Вместо: /shoes/?color=red
Сделайте: /shoes/red/

Плюсы:

- Выглядит как страница категории
- Лучше для SEO
- Можно отдельно оптимизировать title/meta
- Проще внутренняя перелинковка

У клиента было 20 ценных комбинаций фильтров.
Их перевели на clean URLs.
Все начали ранжироваться в течение 6 недель.

7/ Стратегия "View All"

Для небольших наборов товаров (<200 позиций):

Уберите пагинацию и фильтры полностью.
Покажите все товары на одной странице.

Пример:

- В категории 47 товаров
- Показываем все 47 на /category/
- Пользователь фильтрует через CTRL+F
- Или JavaScript-фильтрация (без изменения URL)

Просто. Без дублей.
Все товары на одной индексируемой странице.

8/ Мониторинг faceted navigation

Проверяйте каждый месяц:

□ Google Search Console → Coverage
□ Сколько URL в индексе?
□ Должно быть: категории + только ценные фильтры

□ Site: http://example.com
□ Сколько URL с параметрами в индексе?

□ Crawl через Screaming Frog
□ Сколько уникальных комбинаций параметров?

У клиента количество индексируемых страниц фильтров упало с 89K до 200.
Трафик ВЫРОС на 67%.

Меньше = лучше.

@WebDev_Plus

Ускорили React примерно на 74% при преобразовании payload серверных компонентов в элементы для рендера в браузере или во время SSR/SSG.

В реальных приложениях на Next.js это дает рендер в HTML на 15%–30% быстрее, в зависимости от размера RSC payload.

@WebDev_Plus