Добавляем Яндекс Турбо-страницы к блогу на Next.js
5 мин.

Добавляем Яндекс Турбо-страницы к блогу на Next.js

Для того чтобы красиво отображаться в поисковой выдаче Яндекса решил добавить Яндекс Турбо-страницы к этому блогу.

Вот так это выглядит:

Турбо-страницы в поиске

Процесс этот простой и проходит в 2 основных шага:

Генерация RSS фида

Процесс генерации фида почти ничем не отличается от генерации RSS фида.

Для того чтобы сгенерировать фид, необходимо:

Получение постов и их метаданных

Так как посты у меня хранятся в репозитории проекта в формате .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://alexeybaranov.dev";

  const feedOptions = {
    language: "ru",
    title: "Алексей Баранов. Блог | RSS feed",
    description:
      "Личный блог. Пишу о разработке софта, предпринимательстве и просто об интересных мне вещах",
    id: site_url,
    link: site_url,
    image: `${site_url}/assets/blog/authors/avatar.png`,
    favicon: `${site_url}/favicon/favicon.ico`,
    copyright: `All rights reserved ${new Date().getFullYear()}, Alexey Baranov`,
    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 🙂

Поделиться

Поддержать автора

Вам может быть интересно:

Добавляем RSS-фид к статическому Next.js приложению

Добавляем RSS-фид к статическому Next.js приложению

5 мин.

Сам я не пользуюсь RSS фидами, но так как формат ещё жив, решил добавить фид и для этого блога...

Автопостинг в VK через RSS feed

Автопостинг в VK через RSS feed

4 мин.

Заметил в настройках сообщества в VK интересную настройку, связанную с фидами. И понеслось...