
Алексей Баранов
Добавляем Яндекс Турбо-страницы к блогу на Next.js
Для того чтобы красиво отображаться в поисковой выдаче Яндекса решил добавить Яндекс Турбо-страницы к этому блогу.
Вот так это выглядит:
Турбо-страницы в поиске
Процесс этот простой и проходит в 2 основных шага:
Генерация фида
Процесс генерации фида почти ничем не отличается от генерации RSS фида.
Для того чтобы сгенерировать фид, необходимо:
- получить список всех постов и их метаданные,
- сформировать Tурбофид в специальном формате
- делать так при каждой сборке
Получение постов и их метаданных
Так как посты у меня хранятся в репозитории проекта в формате .md, то для получения всех постов мне просто необходимо:
- получить список файлов в директории с постами,
- пройти по каждому посту и получить метаданные
Для получения метаданных я воспользовался пакетом gray-matter
npm i gray-matter
В результате получился такой код:
import fs from "fs";
import { join } from "path";
import matter from "gray-matter";
import { Post } from "@/interfaces/post";
const postsDirectory = join(process.cwd(), "_posts");
export function getPostBySlug(slug: string) {
const realSlug = slug.replace(/\.md$/, "");
const fullPath = join(postsDirectory, `${realSlug}.md`);
const fileContents = fs.readFileSync(fullPath, "utf8");
const { data, content } = matter(fileContents);
return { ...data, slug: realSlug, content } as Post;
}
export function getAllPosts(): Post[] {
const slugs = fs.readdirSync(postsDirectory);
const posts = slugs
.map((slug) => getPostBySlug(slug))
// сортируем посты по дате в порядке убывания
.sort((a, b) => (a.date > b.date ? -1 : 1));
return posts;
}
Формирование Турбо фида
Для того чтобы добавить RSS фид я воспользовался пакетом turbo-rss.
Устанавливаем его командой:
npm i turbo-rss
Алгоритм следующий:
- сформировать описание фида,
- пройти по списку постов, и сформировать feedItem для каждого поста,
- записать всё в .xml файл
У меня получился вот такой скрипт:
import fs from "fs";
import path from "node:path";
import { getAllPosts } from "../api";
import { markdownToTurboHtml } from "../markdownToHtml";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const TR = require("turbo-rss");
export default async function generateTurboFeed() {
console.log("Generating Turbo feed...");
const allPosts = await getAllPosts();
console.log(`Found ${allPosts.length} posts.`);
const site_url = "https://baranov.guru";
const feedOptions = {
language: "ru",
title: "Baranov.Guru | RSS feed",
description:
"Личный блог. Пишу о разработке софта, предпринимательстве и просто об интересных мне вещах",
id: site_url,
link: site_url,
image: `${site_url}/assets/blog/authors/avatar.webp`,
favicon: `${site_url}/favicon/favicon.ico`,
copyright: `All rights reserved ${new Date().getFullYear()}, Baranov.Guru`,
generator: "Feed for Node.js",
feedLinks: {
rss2: `${site_url}/rss.xml`,
},
};
const feed = new TR(feedOptions);
for (const post of allPosts) {
console.log(`Adding turbo item for post ${post.slug}`);
const content = await markdownToTurboHtml(post.content);
feed.item({
title: post.title,
id: `${site_url}/posts/${post.slug}`,
description: post.description,
image_url: `${site_url}${post.coverImage}`,
url: `${site_url}/posts/${post.slug}`,
author: post.author.name,
date: new Date(post.date),
content: content,
menu: [
{
link: "http://alexeybaranov.dev",
text: "Главная страница",
},
],
});
}
const feedPath = path.resolve("./out/turbo.xml");
fs.writeFileSync(feedPath, feed.xml());
console.log(`Rss feed is written to ${feedPath}.`);
}
Автоматизация сборки фида
Добавляем в package.json скрипт postbuild.
{
"scripts": {
"build": "next build",
"postbuild": "npx tsx ./src/lib/feeds/generate.ts"
}
}
Он запустится сразу же после успешной сборки проекта и запишет фид в папку с результатами сборки.
Добавление информации о фиде в Яндекс Вебмастер
Теперь осталось только добавить информацию о фиде в поисковую машину Яндекса.
Заходим в Яндекс Вебмастер.
Переходим на вкладку Турбо-страницы для контентных сайтов --> Источники.
Добавление через Вебмастер
Добавляем фид удобным нам способом:
- Руками, через форму;
- Через API;
Добавить фид надо всего 1 раз, поэтому я не стал заморачиваться с API и просто добавил ссылку на фид руками.
Всё готово! 🎉
P.S.
Вот ссылка на мой Турбо фид.
Также не забудьте подписаться на мой Youtube канал и Telegram 🙂



