Яка ідеальна довжина meta title і meta description?

Приблизно 50–60 символів (менше ~600 пікселів) для заголовка й 120–160 символів для опису. Лічильники показують обидва значення й червоніють, коли Google, імовірно, обріже текст.

Якого розміру має бути зображення Open Graph?

1200 × 630 пікселів (1,91:1) підходить для Facebook, LinkedIn, X і месенджерів. Використовуйте абсолютну https-адресу, тримайте розмір до 5 МБ, а важливий вміст — у центрі.

Чому прев'ю мого посилання показує старе зображення чи заголовок?

Платформи кешують прев'ю посилань. Скористайтеся Sharing Debugger у Facebook або Post Inspector у LinkedIn, щоб повторно зчитати URL; X оновлює кеш приблизно через тиждень або одразу для URL з новим рядком запиту.

Чи потрібні і теги Open Graph, і теги Twitter?

Open Graph потрібен для більшості платформ, а для X — щонайменше twitter:card. X бере og:title, og:description і og:image, тож решта тегів Twitter необов'язкові, якщо є Open Graph.

Чи допомагає тег meta keywords для SEO?

Ні. Google і Bing ігнорують його для ранжування вже багато років. Тут він необов'язковий і корисний лише тоді, коли його читає якась внутрішня система.

Чи можна відредагувати мета-теги наявної сторінки?

Так. Натисніть «Імпорт», вставте HTML сторінки (підійде вихідний код), і значення title, description, canonical, Open Graph, Twitter і robots завантажаться у форму.

Чому зображення для поширення не з'являється в перегляді?

URL має бути абсолютною (https://…) і публічно доступною. Деякі сервери забороняють показувати свої зображення на інших сайтах; справжні платформи завантажують їх на боці сервера, тож там вони все одно можуть працювати.

Чи щось завантажується на сервер?

Ні. Теги генеруються у вашому браузері. Лише зображення для поширення завантажується з указаної URL-адреси, щоб показати його в переглядах.

Генератор мета-тегів: SEO, Open Graph і Twitter

Мета-теги для пошуку й поширення, з переглядом

Цей генератор мета-тегів пише HTML, який визначає, як сторінка виглядає в результатах Google і коли посиланням на неї діляться у Facebook, LinkedIn, X, Slack, Discord чи WhatsApp. Заповніть заголовок, опис, канонічну URL-адресу й зображення для поширення — і отримаєте основні SEO-теги, теги Open Graph і теги Twitter Card, правильно екрановані й готові до вставлення у ваш <code><head></code>, із живим переглядом пошукового сніпета й кожної соціальної картки. Вставте head наявної сторінки, щоб завантажити її теги й покращити їх. Усе працює у вашому браузері.

Як згенерувати мета-теги

1Напишіть заголовок і опис. Лічильники червоніють, коли Google, імовірно, їх обріже: приблизно 600 пікселів (≈60 символів) для заголовка й близько 160 символів для опису.
2Введіть канонічну URL-адресу сторінки, назву сайту й абсолютну URL-адресу зображення — бажано 1200 × 630 пікселів — з альтернативним текстом.
3Виберіть тип Open Graph, мову й стиль картки Twitter і додайте свої імена в X. Зніміть позначку Дозволити індексацію для сторінок, які не мають потрапляти в пошук.
4Перевірте перегляди для Google, Facebook, LinkedIn і X, потім перейдіть до HTML, виберіть групи тегів і скопіюйте їх у <head> своєї сторінки.
5Щоб редагувати наявну сторінку, натисніть Імпорт і вставте її HTML або вихідний код.

Теги, що важливі для SEO

<title>: Найважливіший сигнал на сторінці й клікабельний заголовок у результатах. Ставте головну тему на початок, робіть його унікальним для кожної сторінки й завершуйте назвою бренду. Google переписує заголовки, які вважає некорисними, задовгими або переповненими ключовими словами.
meta description: Не впливає на ранжування, але часто стає сніпетом під заголовком, тож впливає на кліки. Опишіть сторінку в 120–160 символах і дайте причину її відвідати.
canonical: <link rel="canonical"> вказує бажану URL-адресу, коли той самий вміст доступний за кількома адресами (параметри відстеження, http і https, скісні риски в кінці).
robots: noindex прибирає сторінку з результатів, nofollow каже пошуковим роботам не переходити за її посиланнями. Index, follow — типове значення, тому тег пишеться лише тоді, коли ви його змінюєте.
viewport & charset: Це не зовсім SEO-теги, але вони потрібні кожній сторінці: UTF-8 і адаптивний viewport — обов'язкові умови для mobile-first індексації.
keywords: Google і Bing ігнорують його для ранжування вже понад десять років. Додавайте лише тоді, коли його читає внутрішній пошук чи інша система.

Open Graph: як виглядають поширені посилання

Open Graph — протокол, який запровадив Facebook і який сьогодні читають майже всі платформи: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest та багато інших. Основні теги — og:title, og:description, og:image, og:url і og:type; og:site_name і og:locale уточнюють картку.

Від зображення залежить усе. Використовуйте абсолютну URL-адресу https://, 1200 × 630 пікселів (співвідношення 1,91:1), до 5 МБ, у форматі JPEG, PNG або WebP, і тримайте текст і логотипи подалі від країв, бо платформи обрізають по-різному. Платформи кешують картки: після зміни тегів оновіть їх через Sharing Debugger у Facebook, Post Inspector у LinkedIn або поширивши URL із рядком запиту.

Картки Twitter / X

X читає власний тег twitter:card, щоб вибрати макет — summary_large_image для зображення на всю ширину, summary для маленької квадратної мініатюри, — а також twitter:site і twitter:creator для імен сайту й автора. Для заголовка, опису й зображення він бере теги Open Graph, тож генератор пише twitter:title, twitter:description і twitter:image лише тоді, коли Open Graph вимкнено, щоб уникнути дублювання розмітки.

Наразі X показує картки з великим зображенням як зображення з накладеним заголовком і доменом під ним; описи з'являються лише на картках summary і тільки в деяких клієнтах.

Довжина заголовка: символи чи пікселі

Google обрізає заголовки за шириною, а не за кількістю символів: на комп'ютері межа — приблизно 600 пікселів шрифтом, схожим на Arial, розміром 20 пікселів, що вміщує 50–60 символів залежно від літер — "WWW" утричі ширше за "iii". Лічильник вимірює заголовок цим шрифтом у вашому браузері, тож відображає ваші справжні слова. Описи обрізаються приблизно на 920 пікселях — це близько 155–160 символів на комп'ютері й менше на мобільних.

Обрізання — не штраф, воно лише приховує кінець тексту, але важливі слова на початку точно побачать. Стежте, щоб заголовок і опис відповідали видимому вмісту: тоді Google імовірніше залишить їх без змін.

Куди вставляти теги

Усі ці теги розміщуються в елементі <head> сторінки й мають бути в HTML, який надсилає сервер: роботи для прев'ю посилань не виконують JavaScript, тож теги, додані кодом на боці клієнта, невидимі для Facebook, LinkedIn і X. У фреймворках на кшталт Next.js, Nuxt чи Astro використовуйте їхні API метаданих, щоб рендерити теги на сервері. Кожне значення атрибута екранується в HTML, тож лапки й амперсанди у ваших заголовках не зламають розмітку.

Поєднайте це з robots.txt, який пускає пошукових роботів на ваші сторінки, XML-картою сайту з вашими канонічними URL і фавіконкою, щоб у результаті показувалася ваша іконка.

Поширені запитання

Яка ідеальна довжина meta title і meta description?: Приблизно 50–60 символів (менше ~600 пікселів) для заголовка й 120–160 символів для опису. Лічильники показують обидва значення й червоніють, коли Google, імовірно, обріже текст.
Якого розміру має бути зображення Open Graph?: 1200 × 630 пікселів (1,91:1) підходить для Facebook, LinkedIn, X і месенджерів. Використовуйте абсолютну https-адресу, тримайте розмір до 5 МБ, а важливий вміст — у центрі.
Чому прев'ю мого посилання показує старе зображення чи заголовок?: Платформи кешують прев'ю посилань. Скористайтеся Sharing Debugger у Facebook або Post Inspector у LinkedIn, щоб повторно зчитати URL; X оновлює кеш приблизно через тиждень або одразу для URL з новим рядком запиту.
Чи потрібні і теги Open Graph, і теги Twitter?: Open Graph потрібен для більшості платформ, а для X — щонайменше twitter:card. X бере og:title, og:description і og:image, тож решта тегів Twitter необов'язкові, якщо є Open Graph.
Чи допомагає тег meta keywords для SEO?: Ні. Google і Bing ігнорують його для ранжування вже багато років. Тут він необов'язковий і корисний лише тоді, коли його читає якась внутрішня система.
Чи можна відредагувати мета-теги наявної сторінки?: Так. Натисніть «Імпорт», вставте HTML сторінки (підійде вихідний код), і значення title, description, canonical, Open Graph, Twitter і robots завантажаться у форму.
Чому зображення для поширення не з'являється в перегляді?: URL має бути абсолютною (https://…) і публічно доступною. Деякі сервери забороняють показувати свої зображення на інших сайтах; справжні платформи завантажують їх на боці сервера, тож там вони все одно можуть працювати.
Чи щось завантажується на сервер?: Ні. Теги генеруються у вашому браузері. Лише зображення для поширення завантажується з указаної URL-адреси, щоб показати його в переглядах.

Генератор мета-тегів і Open Graph