Почему нужна автоматическая генерация related-статей?
Представьте: в блоге 500 статей, но читатель открывает одну и не видит предложений перейти к похожему материалу. Отказ достигает 70%. Ручной подбор не масштабируется — при сотнях публикаций необходима автоматическая система на основе тегов, категорий или семантической близости. Мы часто получаем такие запросы и реализуем решение под ключ, опираясь на многолетний опыт интеграции для крупных блогов. Стоимость внедрения начинается от 25 000 ₽, а экономия от отказа от ручной проверки — до 40 000 ₽ в месяц. Блок «Похожие статьи» удерживает пользователя на сайте и снижает показатель отказов.
Как автоматическая генерация related-статей улучшает SEO?
Система автоматически подбирает related-статьи на основе тегов, семантики и поведения пользователей. По тегам и категориям — быстро, не требует ML, но поверхностно. По TF-IDF — статистическая близость на основе частоты терминов. По векторным эмбеддингам — семантическая близость, лучшее качество, требует pgvector. В наших проектах embedding-based даёт на 40% больше кликов, чем простой tag-based. Key phrase "автоматическая генерация related-статей" реализуется через эти подходы.
Какие алгоритмы подбора связанных статей существуют?
| Стратегия | Скорость | Точность | Сложность |
|---|---|---|---|
| Tag-based | высокая | низкая | низкая |
| TF-IDF | средняя | средняя | средняя |
| Embedding-based | низкая | высокая | высокая |
| Метрика | До внедрения | После внедрения |
|---|---|---|
| Среднее время на сайте | 1:20 | 1:40 |
| Показатель отказов | 65% | 55% |
| Клики по related | 0% | 12% |
Частая проблема — дублирование тегов: статьи с одинаковыми тегами не обязательно схожи по смыслу. Например, статья о React-хуках и статья о React-роутинге имеют общий тег React, но разную тематику. Tag-based подход будет рекомендовать их друг другу, что неэффективно. Embedding-based подход решает эту проблему. Выбор стратегии зависит от размера блога: для небольших блогов (до 200 статей) достаточно tag-based; для крупных (от 1000) embedding-based даёт существенный прирост вовлечённости.
Пример расчёта экономии
При ручном подборе 1000 статей требуется около 50 часов работы редактора. С автоматической генерацией related-статей время сокращается до 2 часов, что экономит до 40 000 ₽ в месяц.Что даёт embedding-based подход?
Embedding-based подход с pgvector учитывает семантический смысл статьи, а не только общие теги. В одном из кейсов с 1000+ статей внедрение дало рост среднего времени на сайте на 25% и уменьшение отказов на 15%. Статьи, которые раньше не пересекались по тегам, стали рекомендоваться корректно. TF-IDF, напротив, уступает по точности на 30%, но работает в 2 раза быстрее. Для блогов, где важна скорость, можно комбинировать: сначала отфильтровать по тегам, а потом ранжировать по эмбеддингам.
Мы используем модель OpenAI text-embedding-3-small. Для каждой статьи формируется строка из заголовка, выдержки и первых 2000 символов контента. Запрос к API выполняется в фоне через очередь. Готовый эмбеддинг сохраняется в столбце типа vector(1536). Поиск ближайших соседей выполняется через оператор <=> (косинусное расстояние) с использованием индекса IVFFlat.
Tag-based подход — автоматическая генерация related
// RelatedArticleService
class RelatedArticleService
{
public function getRelated(Article $article, int $limit = 4): Collection
{
if ($article->tags->isEmpty()) {
// Фоллбэк: статьи из той же категории
return Article::published()
->where('category_id', $article->category_id)
->where('id', '!=', $article->id)
->latest()
->limit($limit)
->get();
}
$tagIds = $article->tags->pluck('id');
// Считаем количество общих тегов
return Article::published()
->where('id', '!=', $article->id)
->withCount(['tags as common_tags_count' => function ($q) use ($tagIds) {
$q->whereIn('tags.id', $tagIds);
}])
->having('common_tags_count', '>', 0)
->orderByDesc('common_tags_count')
->orderByDesc('published_at')
->limit($limit)
->get();
}
}
Embedding-based подход с pgvector
// При создании/обновлении статьи
class ArticleObserver
{
public function saved(Article $article): void
{
GenerateArticleEmbedding::dispatch($article)->onQueue('low');
}
}
class GenerateArticleEmbedding implements ShouldQueue
{
public function handle(): void
{
$text = implode("\n", [
$this->article->title,
$this->article->excerpt,
strip_tags(substr($this->article->content, 0, 2000)),
]);
$embedding = OpenAI::embeddings()->create([
'model' => 'text-embedding-3-small',
'input' => $text,
])->embeddings[0]->embedding;
$this->article->update(['embedding' => '[' . implode(',', $embedding) . ']']);
// Пересчитываем кэш похожих для этой статьи
Cache::forget("related_articles_{$this->article->id}");
}
}
// Запрос похожих через pgvector
public function getSemanticallyRelated(Article $article, int $limit = 4): Collection
{
$embedding = $article->embedding;
if (!$embedding) return collect();
return Cache::remember("related_articles_{$article->id}", 86400, function () use ($article, $embedding, $limit) {
return Article::published()
->where('id', '!=', $article->id)
->selectRaw('*, (embedding <=> ?) AS distance', [$embedding])
->whereNotNull('embedding')
->orderBy('distance')
->limit($limit)
->get();
});
}
React-компонент с lazy loading
// RelatedArticles.tsx
export function RelatedArticles({ articleId }: { articleId: number }) {
const ref = useRef<HTMLDivElement>(null);
const [inView, setInView] = useState(false);
// Загружаем только когда блок попадает в viewport
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) setInView(true); },
{ rootMargin: '200px' }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
const { data, isLoading } = useQuery({
queryKey: ['related', articleId],
queryFn: () => fetch(`/api/articles/${articleId}/related`).then(r => r.json()),
enabled: inView,
staleTime: 10 * 60 * 1000,
});
return (
<div ref={ref} className="mt-10">
<h3 className="text-xl font-bold mb-5">Читайте также</h3>
{isLoading ? (
<div className="grid grid-cols-2 gap-4">
{[...Array(4)].map((_, i) => (
<div key={i} className="h-32 bg-gray-100 rounded-lg animate-pulse" />
))}
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{data?.map((article: any) => (
<a key={article.id} href={article.url}
className="group flex gap-4 p-4 border rounded-xl hover:shadow-md transition-shadow">
{article.image && (
<img src={article.image} alt="" className="w-20 h-16 object-cover rounded-lg flex-shrink-0" />
)}
<div>
<p className="text-xs text-blue-600 mb-1">{article.category}</p>
<h4 className="text-sm font-medium group-hover:text-blue-600 transition-colors line-clamp-2">
{article.title}
</h4>
<p className="text-xs text-gray-400 mt-1">{article.reading_time} мин. чтения</p>
</div>
</a>
))}
</div>
)}
</div>
);
}
Процесс работы
- Аналитика — оцениваем объём блога, текущую структуру, посещаемость.
- Проектирование — выбираем стратегию (tag-based / TF-IDF / embedding-based) с учётом бюджета и целей.
- Реализация — пишем сервис, интеграция с базой, фронтенд-компонент.
- Тестирование — A/B тест на 20% трафика: измеряем клики по related-статьям, время на сайте, отказы.
- Деплой — выкатываем на продакшн, мониторим метрики.
Сроки
Базовая версия на тегах — 1-2 дня. С эмбеддингами и lazy loading — 3-4 рабочих дня. Срок может варьироваться в зависимости от объёма блога и инфраструктуры.
Что входит в работу
- PHP-сервис (Laravel) с tag-based и/или embedding-based подбором.
- Миграция для pgvector.
- React-компонент с lazy loading.
- Документация по кастомизации.
- Обучение одного разработчика.
- 1 месяц поддержки после запуска.
Метрики и гарантии
Более 50 внедрений для блогов с посещаемостью до 100 000 в месяц. Опыт работы в highload-версиях. Гарантируем, что система не повлияет на Core Web Vitals и корректно работает при 500+ одновременных запросах.
Если вы хотите внедрить автоматическую генерацию related-статей, свяжитесь с нами — мы подберём оптимальное решение. Получите консультацию по внедрению related-статей для вашего блога. Закажите услугу — оценим проект бесплатно.