Шрифты и SEO: влияет ли выбор шрифта на ранжирование
Прямые и косвенные факторы: скорость, UX, индексация
«Влияет ли выбор шрифта на SEO?» — частый вопрос, на который нет простого ответа. Прямого влияния нет: Google не ранжирует сайты выше за использование Inter или ниже за Comic Sans. Но косвенное влияние — огромное, и игнорировать его нельзя. Шрифт влияет на скорость загрузки, на поведенческие метрики, на индексацию. В этой статье — разбор прямых и косвенных факторов SEO, связанных со шрифтами, и рекомендации, как сделать типографику SEO-friendly.
Google видит шрифт как ресурс (CSS-файл + WOFF2-файл), который браузер грузит при отрисовке страницы. Шрифты не входят в HTML, не индексируются как текст, не влияют на ключевые слова. Google не «читает» шрифт, не «оценивает» его эстетику. С точки зрения прямого ранжирования — шрифт нейтрален.
Однако Google видит, как шрифт влияет на скорость загрузки. Core Web Vitals — метрики, которые Google использует для оценки UX. Главная из них — Largest Contentful Paint (LCP), время отрисовки самого крупного элемента на экране. Если самый крупный элемент — это заголовок на кастомном шрифте, и шрифт грузится медленно, LCP страдает. Плохой LCP — отрицательный сигнал для ранжирования.
Вторая метрика — Cumulative Layout Shift (CLS), визуальная стабильность. Если шрифт грузится после отрисовки страницы и вызывает «прыжок» текста (FOIT/FOUT), CLS ухудшается. Это особенно критично, если на странице много текстовых блоков с кастомными шрифтами. Хороший font-display: swap уменьшает CLS, но не устраняет полностью.
Шрифт влияет на поведение пользователей: время на странице, глубина просмотра, отказы. Если шрифт плохо читается — пользователь быстрее уходит, что увеличивает bounce rate и уменьшает время на странице. Это отрицательные сигналы для SEO. Если шрифт хорошо читается — пользователь остаётся дольше, что улучшает поведенческие метрики.
Размер шрифта имеет значение. Слишком мелкий шрифт (меньше 14 px для основного текста) — частая причина отказов, особенно на мобильных. Google видит, что пользователи уходят с страницы в первые 10 секунд, и интерпретирует это как «контент неинтересен». Рекомендация — основной текст не менее 16 px, для мобильных — не менее 18 px.
Контраст шрифта с фоном — второй фактор. Если контраст ниже 4.5:1 (уровень WCAG AA), текст трудно читать, особенно людям с нарушениями зрения и на ярком солнце. Это увеличивает отказы и ухудшает поведенческие метрики. Google не измеряет контраст напрямую, но видит поведение пользователей, на которое он влияет.
Скорость загрузки шрифтов — ключевой SEO-фактор. Если шрифты грузятся 3+ секунды, LCP страдает, и Google понижает сайт в выдаче. Каждая секунда загрузки шрифтов добавляет примерно 7% вероятности отказа пользователя. Оптимизация скорости шрифтов — одна из самых ROI-ных SEO-задач.
Способы оптимизации: subsetting (удаление неиспользуемых глифов, уменьшение размера файла в 2–3 раза), WOFF2 как основной формат (на 30% меньше WOFF), font-display: swap (мгновенный рендер в fallback-шрифте), предзагрузка ключевых шрифтов через <link rel="preload">. В каталоге FontHub при подключении через CDN все эти оптимизации применяются автоматически.
Пример: Inter без subsetting — 86 КБ WOFF2. Inter с subsetting Latin+Cyrillic — 38 КБ. Inter с subsetting Cyrillic только — 24 КБ. Разница в скорости загрузки на 3G — от 1.2 секунды до 0.4 секунды. Это улучшает LCP на 0.8 секунды, что может поднять сайт на 3–5 позиций в выдаче Google.
Googlebot индексирует текст, но не видит шрифты. Если ваш контент — это HTML-текст, оформленный CSS-шрифтом, Googlebot его «читает». Если ваш контент — это текст, встроенный в изображение (например, PNG-картинка с надписью), Googlebot его не «читает», и контент не индексируется.
Это критично для заголовков. Если у вас на странице крупный красивый заголовок, но он сделан как картинка (чтобы использовать сложный шрифт, не доступный в вебе), Google не увидит текст заголовка. Это серьёзный SEO-минус. Решение — всегда использовать HTML-текст с веб-шрифтами, не картинки. Если шрифт не доступен в вебе — найдите близкий аналог в каталоге FontHub и используйте его.
Та же логика — для логотипов. Если ваш логотип — это PNG-картинка с текстом, Google не индексирует текст логотипа. Решение — использовать SVG-логотип с текстом, или HTML-текст с веб-шрифтом. Это даёт Google возможность «видеть» название бренда, что улучшает ранжирование по брендовым запросам.
Mobile-first indexing — Google индексирует мобильную версию сайта. Если на мобильной версии шрифт грузится медленно или рендерится плохо, это влияет на индексацию всего сайта. Мобильные устройства часто на 3G или медленном 4G, и каждый килобайт шрифта добавляет миллисекунды загрузки.
Рекомендации для мобильной оптимизации: используйте WOFF2 с subsetting (минимальный размер файла), подключайте только те подмножества, которые нужны (для русского сайта — Latin+Cyrillic, без греческого, арабского, иврита), используйте font-display: swap для мгновенного рендера, предзагружайте только критические шрифты (например, основной шрифт интерфейса), не предзагружайте акцентные шрифты (для них допустима «догрузка» после основной отрисовки).
Размер шрифта на мобильных — отдельная тема. Минимальный кегль — 16 px для основного текста, 14 px допустимо только для второстепенной информации. Заголовки — 24+ px. Если на мобильной версии шрифт слишком мелкий, пользователи «пинчат» экран для увеличения, что ухудшает поведенческие метрики. Google видит это и интерпретирует как «плохой UX».
1. Подключайте шрифты через CDN с автоматическим subsetting. В каталоге FontHub это делается автоматически при подключении через наш CDN — вам не нужно вручную настраивать subsetting, font-display и предзагрузку.
2. Используйте не более 2 шрифтов на страницу. Один — основной (для интерфейса и текста), второй — акцентный (для заголовков и акцентов). Больше двух шрифтов — лишний трафик и задержка рендера.
3. Используйте переменные шрифты, если нужно несколько начертаний. Один переменный файл заменяет 5–9 статических, что уменьшает трафик и ускоряет загрузку. Inter Variable, Roboto Variable — отличные варианты из каталога FontHub.
4. Предзагружайте только критические шрифты. <link rel="preload" as="font" type="font/woff2" href="inter-cyr.woff2" crossorigin>. Это говорит браузеру начать загрузку шрифта сразу, не дожидаясь парсинга CSS.
5. Используйте font-display: swap для всех шрифтов. Это даёт мгновенный рендер в fallback-шрифте и подмену при загрузке основного. Улучшает LCP и CLS.
6. Контролируйте контраст. Минимум 4.5:1 для основного текста, 3:1 для крупного. Проверяйте через WebAIM Contrast Checker.
«Шрифт не ранжирует. Но поведение пользователя, на которое он влияет, — ранжирует.» — Энди Кресвел
Выбор шрифта напрямую не влияет на SEO, но косвенно — через скорость загрузки, поведенческие метрики и индексацию — определяет позиции сайта в выдаче. Оптимизация шрифтов под SEO — это не «тёмное искусство», а набор конкретных техник: subsetting, WOFF2, font-display, предзагрузка, контроль контраста. В каталоге FontHub при подключении шрифтов через наш CDN все эти техники применяются автоматически, но если вы хостите шрифты сами — теперь вы знаете, что делать. Хорошая типографика — это хорошая SEO-оптимизация, и наоборот.
Понравилась статья?