Пагинация и казахский шрифт
Блог вырос до 25 постов на трёх языках. Все грузились на одну страницу. Google видит одну длинную портянку вместо структуры. Пользователь ждёт пока отрендерятся все 25 карточек. А казахские буквы (Ә, Ғ, Қ, Ң, Ө) рендерились системным шрифтом - как нарезки из газет на фоне аккуратного Inter.
Проблема 1: всё на одной странице
Astro генерирует статические HTML. 25 постов - это 25 карточек с картинками, тегами, датами. Для поисковика /blog/ - одна страница со всем контентом. Нет пагинации - нет структуры - нет причин индексировать глубже.
Решение: paginate() + “Показать ещё”
Astro умеет пагинацию из коробки. Файл [...page].astro с функцией paginate() генерирует /blog/, /blog/2/, /blog/3/ автоматически.
export const getStaticPaths = (async ({ paginate }) => {
const posts = (await getCollection('blog', (e) => e.data.locale === 'ru'))
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
return paginate(posts, { pageSize: 9 });
}) satisfies GetStaticPaths;9 постов на страницу - ровно 3×3 грид. Краулеры ходят по статическим страницам. Пользователи видят кнопку «Показать ещё» которая через fetch() подтягивает следующую порцию без перезагрузки.
fetch(nextUrl)
.then(function (res) { return res.text(); })
.then(function (html) {
var doc = new DOMParser().parseFromString(html, 'text/html');
var newCards = doc.querySelectorAll('#blog-grid > .blog-card');
newCards.forEach(function (card) {
grid.appendChild(document.importNode(card, true));
});
});Трюк - парсим HTML следующей страницы и вытаскиваем карточки из DOM. Никакого API, никакого JSON. Статические страницы уже есть - просто берём из них нужные элементы.
Для тех у кого JS выключен - <noscript> со ссылками «Предыдущая» / «Следующая».
SEO-детали
Каждая страница получает <link rel="next"> и <link rel="prev"> в head. Страницы 2+ добавляют номер в title: «Блог - imarch.dev - Страница 2». Sitemap содержит все пагинированные URL с hreflang для трёх локалей.
Проблема 2: казахские буквы
Inter - основной шрифт сайта. Подключены два подмножества: latin и cyrillic. Русский текст выглядит отлично. Но казахский кириллический алфавит содержит буквы за пределами базового Cyrillic-диапазона: Ә, Ғ, Қ, Ң, Ө, Ұ, Ү, Һ.
Эти буквы живут в Unicode-блоке Cyrillic Extended (U+0460–052F). Браузер не находит их в подключённых woff2-файлах и откатывается на системный шрифт. Результат - буквы из другой гарнитуры посреди текста.
Решение: один файл
Inter уже содержит все казахские глифы. Они просто не попали в базовое подмножество. Нужен третий woff2-файл - cyrillic-ext.
// BaseLayout.astro - AstroFont config
{
path: './public/fonts/inter-cyrillic-ext-wght-normal.woff2',
style: 'normal',
weight: '100 900',
}26 КБ. Скачал с Fontsource CDN, добавил в конфиг шрифтов. Все казахские буквы теперь рендерятся тем же Inter что и остальной текст.
Итого
Два фикса, один вечер:
- Пагинация -
paginate()для SEO +fetch()для UX. Статические страницы для краулеров, lazy load для людей - Шрифт - один woff2-файл (26 КБ) закрыл все казахские символы
Оба изменения - ноль зависимостей, ноль сложности. Иногда достаточно подключить то что уже есть.
Исходный код сайта открыт. Если делаете мультиязычный блог на Astro - напишите, расскажу подробнее.
Читайте также
