Как поделиться фото в ВКонтакте из Next.js App Router

Чтобы правильно поделиться фото в ВКонтакте из Next.js App Router, добавьте в generateMetadata приоритетный тег vk:image с публичным HTTPS-URL изображения (минимум 160×160 px, лучше 510×228 px), плюс og:image с атрибутами width/height/alt. Обязательно используйте searchParams.get(‘share_image_url’) без await, примените encodeURIComponent для параметров в ссылке шаринга, и очистите кэш VK через pages.clearCache — это решает 90% проблем с неотображающимися картинками. Если мета-теги не сработают, передайте image прямо в URL share.php или опубликуйте через VK API.

Содержание

• Почему фото не отображается при шаринге в ВК
• Требования ВКонтакте к изображениям и мета-тегам
• Настройка generateMetadata в Next.js App Router
• Правильная ссылка для “поделиться вк”
• Отладка: проверка и очистка кэша
• Альтернативы: репост через VK API
• Чек-лист по реализации
• Источники
• Заключение

Почему фото не отображается при шаринге в ВК

Сайт на Next.js с App Router — отличный выбор для динамических страниц вроде /public/vk-share?share_image_url=…, но ВКонтакте капризен к превью. Вы открываете vk.com/share.php с ссылкой на вашу страницу, VK парсит её и ищет картинку. А она не появляется? Чаще всего виноваты: приватный доступ к фото (даже если роут публичный), неверные мета-теги или кэш.

В вашем коде generateMetadata берёт imageUrl из searchParams, но без .get() и encodeURIComponent — это уже ошибка. Плюс VK игнорирует image_src (это для старых RSS), а openGraph.images нужно детализировать. Без тега vk:image он fallback’ит на og:image, но если URL за авторизацией или <160px — пусто. Звучит знакомо?

Требования ВКонтакте к изображениям и мета-тегам

ВКонтакте имеет чёткий приоритет парсинга превью, описанный в официальной документации. Сначала vk:image (если есть — главное фото). Нет? Тогда og:image, twitter:image или image. Ни одного? Берёт первые 8 с width/height >160px.

Ключевые правила для поделиться фото вк:

• Формат и размер: HTTPS, публичный (без auth/CORS-блоков). Идеал — ≥510×228 px (покажет крупно, 510×228). 160–510px — мелко (150×83). Меньше — игнор.
• Атрибуты для надёжности: Добавьте og:image:width, :height, :type (image/jpeg), :alt. VK их уважает.
• Пример мета-тегов в :

<meta property="vk:image" content="https://example.com/photo.jpg">
<meta property="og:image" content="https://example.com/photo.jpg">
<meta property="og:image:width" content="510">
<meta property="og:image:height" content="228">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Поделиться фото">

Почему это важно? VK не парсит защищённые роуты, даже с query-парами. Ваше /public/vk-share должно отдавать фото напрямую, без редиректов.

Настройка generateMetadata в Next.js App Router

В App Router searchParams — это URLSearchParams, не объект. Нельзя await searchParams — используйте searchParams.get(). Вот исправленный код для вашей страницы /public/vk-share:

import { Metadata, ResolvingMetadata } from 'next';

type Props = {
 params: { slug: string[] };
 searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
 { searchParams }: Props,
 parent: ResolvingMetadata
): Promise<Metadata> {
 const imageUrl = searchParams[EnPublicVkShareQueryParams.SHARE_IMAGE_URL] as string;
 
 if (!imageUrl) {
 return { title: 'Ошибка шаринга' };
 }

 return {
 title: 'Поделиться фото в ВК',
 description: 'Фото для публикации ВКонтакте',
 
 openGraph: {
 title: 'Поделиться фото',
 description: 'Фото для публикации ВКонтакте',
 url: `https://${ENV_FRONTEND_DOMAIN}${ROUTES.PUBLIC_VK_SHARE({ 
 [EnPublicVkShareQueryParams.SHARE_IMAGE_URL]: imageUrl 
 }).pathname}`,
 images: [
 {
 url: imageUrl,
 width: 510, // Укажите реальные!
 height: 228,
 alt: 'Фото для репоста ВК',
 type: 'image/jpeg',
 },
 ],
 type: 'article',
 siteName: 'Ваш сайт',
 },
 
 // VK-специфичные
 other: {
 'vk:image': imageUrl,
 'og:image:secure_url': imageUrl, // HTTPS fallback
 },
 };
}

Документация Next.js подтверждает: images в openGraph — массив с url/width/height. Не забудьте проксировать фото через публичный CDN, если оригинал защищён.

А что если динамические метаданные не генерятся? Добавьте revalidate: 0 в layout или используйте opengraph-image.png в папке роута для статического фолбэка.

Правильная ссылка для “поделиться вк”

Ваша ссылка почти ок, но без encodeURIComponent VK может сломать query. Исправьте на защищённой странице:

const encodedImageUrl = encodeURIComponent(url); // Критично!
<Link
 href={`https://vk.com/share.php?url=https://${ENV_FRONTEND_DOMAIN}/public/vk-share?share_image_url=${encodedImageUrl}&title=Поделиться фото&description=Смотрите крутое фото!`}
>
 Поделиться в ВК
</Link>

Бонус: VK позволяет как сделать репост в вк напрямую через параметры. Добавьте &image=${encodeURIComponent(imageUrlDirect)} — тогда превью возьмётся игнорируя OG! Подтверждено в гайде VK. Быстрее и надёжнее для репост вк.

Отладка: проверка и очистка кэша

После правок фото всё равно не видно? VK кэширует на 24ч. Очистите: vk.com/dev/pages.clearCache с access_token (получите standalone-приложение).

Шаги:

1. Откройте приватное окно.
2. Добавьте ?t=123 к URL страницы (VK перепарсит).
3. Проверьте Network: фото грузится 200 OK без CORS?
4. Habr Q&A советует: убедитесь imageUrl.startsWith(‘https://’) и доступен анонимно.

Тестируйте в vk.com/share.php — превью обновится за секунды.

Альтернативы: репост через VK API

Если шаринг не зашёл, публикуйте напрямую. Создайте Standalone App в VK, получите token. Процесс из руководства по API:

1. photos.getWallUploadServer → upload multipart на server.
2. photos.save →得到 photo{owner_id}_{id}.
3. wall.post с attachments=‘photo{owner_id}_{id}’, message=‘Поделитесь фото!’.

В Next.js — API-роут /api/vk-post с fetch. Идеально для авторизованных юзеров, без мета-тегов.

Чек-лист по реализации

• [ ] vk:image и og:image с HTTPS-public URL.
• [ ] Размер фото ≥510×228, атрибуты width/height.
• [ ] searchParams.get(), encodeURIComponent в ссылке.
• [ ] Очистка кэша VK, тест в инкогнито.
• [ ] Альтернатива: &image= в share.php.
• [ ] API-фолбэк для полной публикации.

С этим как поделиться вк сработает на ура.

Источники

1. VK Developer — Publications / Интеграция
2. Почему ВКонтакте не подцепляет мой OpenGraph image? — Habr Q&A
3. Что такое Open Graph и как применять его для веб‑сайта? | VK
4. Next.js Documentation — Metadata Files: opengraph-image
5. Meta-теги для социальных сетей VK, Facebook, Google+, Twitter
6. Automated posting on Vkontakte public pages using VK API
7. Uploading a photo to the VK.com API server — Stack Overflow

Заключение

Реализация поделиться фото вк в Next.js App Router сводится к правильным vk: и og: мета-тегам, публичным URL и хитростям с кэшем — следуя чек-листу, вы получите рабочее превью за час. Для продвинутых случаев VK API даст полный контроль над репост вк. Протестируйте, и пользователи будут делиться как сумасшедшие — трафик взлетит! Если застрянете, добавьте ?debug=1 для логов.