Генератор мета-тегов HTML
Создайте SEO- и социальные мета-теги для <head> вашей страницы: заголовок, описание, ключевые слова, автор, канонический URL, директиву robots и цвет темы, а также теги Open Graph и Twitter Card для насыщенных превью ссылок. Скопируйте или скачайте готовый HTML.
Ввод
Отображается на вкладке браузера и как заголовок в результатах поиска. Желательно 50–60 символов.
Фрагмент под результатом поиска. Желательно 150–160 символов.
Через запятую. Google и большинство крупных поисковых систем игнорируют этот тег, но некоторые нишевые системы его всё ещё читают — если не уверены, оставьте поле пустым.
Предпочтительный адрес этой страницы — подсказывает поисковым системам, какую версию индексировать при наличии дубликатов.
Добавляет теги Open Graph и Twitter Card, чтобы ссылки на вашу страницу показывали насыщенную карточку превью. Рекомендуется: 1200×630 px. Оставьте пустым, чтобы пропустить теги соцсетей.
Окрашивает интерфейс браузера на мобильных устройствах (адресная строка, переключатель задач). Оставьте пустым, чтобы не выводить этот тег.
Вывод
Вставьте это внутрь <head> вашей HTML-страницы.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-meta-tag-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"title": "My Awesome Website",
"description": "A brief description of my awesome website for se…",
"keywords": "",
"author": "",
"canonicalUrl": "",
"ogImage": "",
"robots": "",
"themeColor": ""
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `html-meta-tag-generator` tool (HTML Meta Tag Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/html-meta-tag-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор мета-тегов HTML — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Генератор мета-тегов HTML создаёт блок тегов <meta> и <link>, которые должны находиться в <head> каждой веб-страницы. Заполните несколько простых полей — заголовок страницы, описание, канонический URL, изображение для соцсетей — и инструмент выдаст чистый HTML, готовый для вставки, который можно скопировать или скачать. Всё работает в вашем браузере; ничего из введённого не отправляется на сервер.
Что делают эти мета-теги
Мета-теги описывают вашу страницу для поисковых систем и социальных сетей. Они не меняют то, что видит посетитель на самой странице, — они определяют, как страница выглядит в других местах:
- Заголовок и описание — это заголовок и фрагмент, которые показываются в результатах поиска Google. Понятные заголовок и описание подходящей длины повышают кликабельность.
- Канонический URL сообщает поисковым системам, какую версию страницы индексировать, предотвращая проблемы с дублирующимся контентом, когда одна и та же страница доступна по нескольким адресам.
- Robots определяет, будут ли поисковые системы индексировать страницу и переходить по её ссылкам.
- Теги Open Graph (
og:title,og:description,og:image,og:url) формируют карточку превью, которая появляется при публикации вашей ссылки в Facebook, LinkedIn, Slack, Discord и большинстве мессенджеров. - Теги Twitter Card делают то же самое для X (Twitter), формируя сводную карточку с крупным изображением.
- Цвет темы окрашивает интерфейс браузера (адресную строку, переключатель задач) на мобильных устройствах.
Как пользоваться инструментом
- Введите заголовок страницы и мета-описание — это два тега, которые почти каждой странице стоит иметь.
- Добавьте канонический URL, автора и другие нужные опциональные поля.
- Чтобы получить карточки превью для соцсетей, вставьте URL изображения для соцсетей (желательно 1200×630 px). Инструмент добавит согласованный блок Open Graph и Twitter Card, взяв заголовок, описание и URL из уже заполненных полей.
- Скопируйте сгенерированный HTML и вставьте его внутрь
<head>вашей страницы или скачайте какmeta-tags.html.
Пустые опциональные поля пропускаются автоматически, поэтому в разметке не появятся пустые атрибуты content="".
Важны ли ещё мета-ключевые слова?
Для Google — нет. Google публично подтвердил много лет назад, что игнорирует тег <meta name="keywords">, и большинство крупных поисковых систем делают то же самое, поскольку тег активно использовался для спама. Некоторые небольшие или региональные поисковые системы его всё ещё читают, поэтому инструмент оставляет его как опциональное поле — но его можно спокойно оставить пустым.
Действительно ли нужен <meta charset>?
Да. <meta charset="utf-8"> должен быть первым тегом в <head>, чтобы браузер корректно декодировал текст. Инструмент всегда выводит современную форму HTML5 (utf-8 в нижнем регистре, без закрывающего слеша).
Гарантируют ли эти теги изображение превью?
Теги Open Graph и Twitter сообщают платформам, что показывать, но каждая платформа кэширует превью. После обновления тегов используйте отладчик самой платформы (например, Facebook Sharing Debugger), чтобы заново просканировать ваш URL.