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

Що робить інструмент

Генератор мета-тегів пише теги для <head> HTML-сторінки: <title>, meta description, ключові слова й автора, директиву robots, канонічне посилання, колір теми, оголошення viewport і charset, повний набір тегів Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) і теги карток X / Twitter.

Під час введення він показує, як сторінка може виглядати в результатах пошуку та в картці соцмережі, і перевіряє поширені помилки: заголовок довший за приблизно 60 символів, відсутній, закороткий або довший за приблизно 160 символів опис, відносний канонічний URL, зображення без абсолютного URL, неправильно записані локаль чи колір. Усе відбувається в браузері, а попередній перегляд навмисно не завантажує ваше зображення, тож сторінка не надсилає мережевих запитів.

Як користуватися

1. Заповніть дані сторінки. Головне — заголовок і опис; лічильники показують їхню довжину відносно звичних меж відображення. Натисніть Приклад, щоб побачити повний варіант.
2. Вкажіть канонічний URL сторінки та зображення для превʼю. Відносний шлях на кшталт /images/cover.jpg розвʼязується відносно канонічного URL.
3. У параметрах виберіть тип Open Graph (website для більшості сторінок, article для дописів у блозі), розмір картки, чи можуть пошуковики індексувати сторінку й переходити за посиланнями, і які групи тегів додати.
4. Прочитайте попередження під HTML, перевірте попередній перегляд і скопіюйте HTML у шаблон сторінки.

Параметри зберігаються в адресі сторінки, а форма — у браузері, тож до неї можна повернутися або поділитися посиланням із тими самими налаштуваннями.

Приклад

Приклад сторінки дає такі теги (зі скороченнями):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Значення екрануються для HTML, тому лапки й амперсанди в заголовку не ламають розмітку, а локаль en-US зводиться до вигляду en_US, якого очікує Open Graph.

Поради

• Пишіть унікальні заголовок і опис для кожної сторінки: дублікати ускладнюють розрізнення результатів.
• Ставте найважливіші слова на початок заголовка — довгі заголовки обрізаються з кінця.
• Канонічний URL має бути точною адресою для індексації — з протоколом і бажаним варіантом із www або без.
• robots зі значенням noindex прибирає сторінку з пошуку, але лише якщо роботи й далі можуть її завантажити: не блокуйте її одночасно в robots.txt.