Пошук уроків, статей та іншого контенту
Додасте Twitter Cards і налаштуєте вигляд посилань під час поширення контенту в X та сумісних сервісах.
Twitter Cards — це набір метатегів, які описують сторінку для X та сумісних сервісів. Коли користувач поширює URL, сервіс може показати не лише текст посилання, а й:
заголовок сторінки;
опис;
зображення;
тип картки;
ім’я автора або сайту.
Без цих метатегів сервіс намагатиметься самостійно визначити вміст сторінки. Результат може бути непередбачуваним: неправильний заголовок, відсутнє зображення або обрізаний опис.
У Next.js метадані можна оголосити через об’єкт metadata. Фреймворк сам перетворить його на HTML-метатеги.
Основні значення twitter.card:
summary — невелика картка із зображенням поруч із текстом;
summary_large_image — велике зображення над заголовком і описом;
player — картка з медіаплеєром;
app — картка для мобільного застосунку.
Для статей, новин і сторінок блогу найчастіше використовують summary_large_image.
Щоб картка працювала коректно, сторінка повинна мати:
публічний URL;
заголовок і опис;
Twitter Card метадані в HTML сторінки.
У проєкті з App Router глобальні метадані зазвичай оголошують у файлі app/layout.tsx.
// app/layout.tsx
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'Блог Acme',
template: '%s | Блог Acme',
},
description: 'Статті про розробку програмного забезпечення.',
twitter: {
card: 'summary_large_image',
title: 'Блог Acme',
description: 'Статті про розробку програмного забезпечення.',
images: ['https://example.com/images/social/default-card.jpg'],
creator: '@acme_blog',
site: '@acme_blog',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}Цей код створює метатеги, подібні до таких:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Блог Acme">
<meta name="twitter:description" content="Статті про розробку програмного забезпечення.">
<meta name="twitter:image" content="https://example.com/images/social/default-card.jpg">
<meta name="twitter:creator" content="@acme_blog">
<meta name="twitter:site" content="@acme_blog">Файл default-card.jpg повинен реально існувати на сервері й бути доступним за вказаною адресою.
twitterОб’єкт twitter у Next.js відповідає основним полям Twitter Cards:
card — тип картки;
title — заголовок картки;
description — короткий опис;
images — одне або кілька зображень;
creator — обліковий запис автора матеріалу;
site — обліковий запис сайту.
Для зображення краще використовувати окрему графіку, підготовлену для поширення. Вона не повинна залежати від стилів сторінки або завантажуватися лише після виконання JavaScript.
Зображення має бути:
доступним через HTTPS;
доступним без авторизації;
достатньо великим для вибраного формату;
у поширеному растровому форматі, наприклад JPEG, PNG або WebP;
оптимізованим за розміром.
Глобальні метадані підходять для головної сторінки або стандартних значень. Для статті потрібно використовувати власний заголовок, опис і зображення.
Створіть файл app/articles/nextjs-cards/page.tsx:
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Twitter Cards у Next.js',
description:
'Практичний посібник із налаштування Twitter Cards у застосунку Next.js.',
twitter: {
card: 'summary_large_image',
title: 'Twitter Cards у Next.js',
description:
'Практичний посібник із налаштування Twitter Cards у застосунку Next.js.',
images: [
{
url: 'https://example.com/images/articles/twitter-cards.jpg',
alt: 'Налаштування Twitter Cards у Next.js',
},
],
creator: '@author_account',
site: '@acme_blog',
},
};
export default function TwitterCardsArticle() {
return (
<main>
<article>
<h1>Twitter Cards у Next.js</h1>
<p>
У цьому матеріалі ми налаштовуємо картки посилань для публікацій у
соціальних мережах.
</p>
</article>
</main>
);
}Для цієї сторінки Next.js використає локальні метадані замість значень, оголошених у app/layout.tsx. У результаті поширення URL статті матиме власний заголовок, опис і зображення.
Метадані для соціальних сервісів повинні містити URL, який зможе відкрити зовнішній робот. Локальна адреса на кшталт http://localhost:3000 підходить лише для локальної перевірки.
Можна використовувати абсолютну адресу:
export const metadata: Metadata = {
twitter: {
card: 'summary_large_image',
images: ['https://example.com/images/social/article.jpg'],
},
};Або налаштувати базову адресу сайту й використовувати відносний шлях:
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
twitter: {
card: 'summary_large_image',
images: ['/images/social/article.jpg'],
},
};У production замініть https://example.com на реальний домен застосунку.
Зручно зберігати соціальні зображення в каталозі public:
public/
└── images/
└── social/
└── article.jpgФайл public/images/social/article.jpg буде доступний за адресою:
https://example.com/images/social/article.jpgСервіси соціальних мереж часто використовують також Open Graph метатеги. Next.js дозволяє налаштувати їх у тому самому об’єкті metadata.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
openGraph: {
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
type: 'article',
images: [
{
url: 'https://example.com/images/articles/twitter-cards.jpg',
width: 1200,
height: 630,
alt: 'Twitter Cards у Next.js',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
images: ['https://example.com/images/articles/twitter-cards.jpg'],
},
};openGraph і twitter — це різні групи метаданих:
openGraph описує Open Graph-поля;
twitter описує Twitter Card-поля.
Вони мають схоже призначення, але не є взаємозамінними. Якщо потрібен передбачуваний вигляд у різних сервісах, варто налаштовувати обидві групи.
Щоб не дублювати адресу зображення, можна винести її в константу:
import type { Metadata } from 'next';
const socialImage = 'https://example.com/images/articles/twitter-cards.jpg';
export const metadata: Metadata = {
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
openGraph: {
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
type: 'article',
images: [
{
url: socialImage,
width: 1200,
height: 630,
alt: 'Twitter Cards у Next.js',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
images: [socialImage],
},
};Для сторінок із динамічним маршрутом, наприклад /articles/[slug], метадані можна створювати за допомогою generateMetadata.
// app/articles/[slug]/page.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
type Article = {
title: string;
description: string;
image: string;
};
const articles: Record<string, Article> = {
'nextjs-cards': {
title: 'Twitter Cards у Next.js',
description: 'Налаштування карток посилань для соціальних мереж.',
image: 'https://example.com/images/articles/twitter-cards.jpg',
},
};
type PageProps = {
params: Promise<{ slug: string }>;
};
export async function generateMetadata({
params,
}: PageProps): Promise<Metadata> {
const { slug } = await params;
const article = articles[slug];
if (!article) {
return {};
}
return {
title: article.title,
description: article.description,
openGraph: {
title: article.title,
description: article.description,
type: 'article',
images: [
{
url: article.image,
alt: article.title,
},
],
},
twitter: {
card: 'summary_large_image',
title: article.title,
description: article.description,
images: [
{
url: article.image,
alt: article.title,
},
],
},
};
}
export default async function ArticlePage({ params }: PageProps) {
const { slug } = await params;
const article = articles[slug];
if (!article) {
notFound();
}
return (
<main>
<article>
<h1>{article.title}</h1>
<p>{article.description}</p>
</article>
</main>
);
}Для кожного матеріалу можна повертати власні значення:
title із назвою статті;
description із коротким анонсом;
images із зображенням конкретної статті;
creator з обліковим записом її автора.
Це важливо для сторінок блогу, каталогу товарів і будь-яких інших маршрутів, у яких вміст залежить від параметра URL.
Спочатку запустіть production-збірку та сервер:
npm run build
npm run startПотім відкрийте HTML потрібної сторінки й переконайтеся, що в ньому є метатеги з префіксом twitter:.
Також перевірте:
Чи відповідає twitter:title заголовку сторінки.
Чи не перевищує опис розумну довжину.
Чи є URL зображення абсолютним і доступним через HTTPS.
Чи відкривається зображення без cookies та авторизації.
Чи відповідає тип картки вмісту сторінки.
Чи не повертає сервер помилку під час запиту сторінки або зображення.
Сервіс може кешувати метадані. Тому після зміни заголовка або зображення попередній вигляд картки може зберігатися деякий час.
images: ['http://localhost:3000/images/card.jpg']Така адреса не працюватиме для зовнішнього сервісу. Після розгортання використовуйте публічний HTTPS-домен.
metadataBaseexport const metadata: Metadata = {
twitter: {
images: ['/images/card.jpg'],
},
};Без metadataBase Next.js може не мати достатньої інформації для побудови повної адреси. Встановіть metadataBase або використовуйте абсолютний URL.
Метатеги, додані через useEffect або інший клієнтський код, можуть бути недоступними для робота, який не виконує JavaScript. Для карток використовуйте статичний metadata або generateMetadata.
Загальна картка підходить як запасний варіант, але для статей краще задавати тематичне зображення на рівні сторінки.
Якщо сервер повертає зображення лише авторизованим користувачам, сервіс не зможе завантажити його й картка відображатиметься без зображення.
titleОдного заголовка недостатньо для повноцінної картки. Додайте щонайменше:
card;
title;
description;
images.
Якщо заголовок у twitter відрізняється від заголовка в openGraph, різні сервіси можуть показувати різний текст. Для однакової картки синхронізуйте значення між цими секціями.
Twitter Cards визначають вигляд поширених URL у X та сумісних сервісах.
У Next.js їх налаштовують через metadata.twitter.
Для більшості статей підходить summary_large_image.
Зображення повинно бути публічним, доступним через HTTPS і мати абсолютний URL або коректно налаштований metadataBase.
Глобальні значення задають у app/layout.tsx.
Метадані конкретної сторінки задають у її page.tsx.
Для динамічних маршрутів використовують generateMetadata.
Для ширшої сумісності варто налаштувати також openGraph.
Після змін перевіряйте згенерований HTML і доступність зображення.