Генератор Open Graph v1.0
Code
Скопируйте ваш код. Копировать
<meta property="og:title" content="
Генератор Open Graph тегов — онлайн-инструмент для создания HTML-разметки, которая управляет отображением страницы при публикации ссылки в социальных сетях и мессенджерах. Генератор от ToolsPivot поддерживает более 27 типов контента (от статей и товаров до ресторанных меню и музыкальных плейлистов), позволяет указать до 10 изображений и выдаёт готовый код без регистрации.
Возможности Генератора Open Graph от ToolsPivot
Инструмент принимает данные о странице и превращает их в корректно оформленные мета-теги, которые считывают Facebook, ВКонтакте, LinkedIn, Telegram, WhatsApp и другие платформы.
Тег og:title: задаёт кликабельный заголовок в превью ссылки. Facebook обрезает заголовки длиннее 88 символов, но для стабильного отображения на всех платформах лучше укладываться в 60 символов.
Тег og:site_name: указывает название сайта или бренда. В Telegram это название подтягивается над заголовком, а в Facebook — отображается рядом с URL.
Тег og:url: фиксирует каноническую ссылку на страницу. Если пользователь поделится URL с параметрами или редиректом, платформа всё равно подтянет данные правильной страницы.
Тег og:description: формирует текст описания под заголовком. По сути, это аналог мета-описания для поисковиков, только для соцсетей.
Тег og:type: сообщает платформам тип контента. Генератор поддерживает более 27 вариантов: article, product, website, business, video.movie, music.song, restaurant.menu, book.author, fitness.course, election и другие.
До 10 слотов для изображений: каждому изображению присваивается отдельный мета-тег og:image. Полезно для товарных карточек, портфолио и галерей — платформа выберет подходящее фото или покажет несколько.
Готовый HTML-код: результат можно скопировать одной кнопкой и вставить в секцию
без правок. Код использует атрибуты property и content — стандартный формат протокола Open Graph.
Как пользоваться Генератором Open Graph от ToolsPivot
Введите заголовок страницы. Укажите текст, который будет отображаться как кликабельный заголовок в соцсетях. Старайтесь уложиться в 60 символов.
Добавьте название сайта. Впишите бренд или домен. Telegram и ВКонтакте отображают это поле над заголовком превью.
Вставьте URL страницы. Используйте полный адрес с https:// — относительные ссылки не распознаются протоколом Open Graph.
Напишите описание. Кратко опишите содержание страницы в пределах 155–160 символов. Текст появится под заголовком в карточке ссылки.
Выберите тип контента. В выпадающем списке доступны article, product, website, video, music, restaurant и десятки других вариантов.
Укажите количество изображений. Выберите от 1 до 10 слотов для og:image — по одному мета-тегу на каждое изображение.
Скопируйте код. Нажмите кнопку «Copy» и вставьте полученные теги в секцию
HTML-страницы перед закрывающим тегом .
Перед генерацией новых тегов проверьте, нет ли на странице старой OG-разметки. Дублирование тегов приводит к непредсказуемому отображению. Используйте проверку Open Graph , чтобы увидеть текущие теги.
Зачем использовать Генератор Open Graph от ToolsPivot
Работает без регистрации и ограничений. Создавайте столько наборов тегов, сколько нужно. Многие конкурирующие сервисы (например, HEADMasterSEO, RankWatch) требуют аккаунт для доступа к генератору. Здесь — нет.
27+ типов контента. Большинство генераторов предлагают 5–8 типов (website, article, product, video). Инструмент покрывает нишевые сценарии: restaurant.menu, music.playlist, book.author, fitness.course, election. Правильный og:type помогает платформам показать контент в подходящем формате.
Поддержка нескольких изображений. Можно задать до 10 og:image одновременно. Актуально для интернет-магазинов на Ozon и Wildberries, где ссылки на товары активно расшариваются в Telegram-чатах и группах ВКонтакте.
Чистый код без лишнего. Результат — стандартные мета-теги без inline-стилей, JavaScript или дополнительной обёртки. Код работает на любой CMS: WordPress, 1С-Битрикс, Tilda, OpenCart, Joomla.
Совместимость с основными платформами. Теги читают Facebook, LinkedIn, Pinterest, WhatsApp, Slack, Discord, Telegram, ВКонтакте и Одноклассники. Один набор тегов — превью на всех платформах.
Дополняет SEO-разметку. OG-теги отвечают за соцсети, а стандартные мета-теги — за поисковую выдачу. Используйте генератор мета-тегов вместе с этим инструментом, чтобы полностью заполнить секцию
.Данные не сохраняются. Заголовки, описания и URL обрабатываются на стороне клиента. Это существенно для тех, кто работает с конфиденциальными проектами или соблюдает требования 152-ФЗ.
Как выбрать правильный og:type для страницы
По умолчанию многие ставят тип «website» на все страницы подряд. Работает — но не всегда даёт лучший результат.
Для статей блога или новостей используйте «article». Facebook подтягивает дату публикации и имя автора, если эти данные прописаны в разметке. Для товарных страниц — «product»: так платформы понимают, что ссылка ведёт на страницу с товаром, а не на информационную статью.
Если вы делитесь видеоконтентом, тип «video.movie» или «video.other» позволит платформам распознать медиаматериал. Яндекс.Видео тоже использует OG-теги для индексации роликов — указание og:video и корректного типа контента помогает видео попасть в поиск по Яндексу.
Этот генератор включает редкие типы, которых нет у большинства конкурентов. Ресторанный бизнес может использовать «restaurant.menu» и «restaurant.menu.item» для отдельных блюд. Музыкальные проекты — «music.song», «music.album», «music.playlist». Есть даже «election» для предвыборных кампаний и «fitness.course» для онлайн-курсов.
Не уверены в выборе? Проверьте, как страница отображается с типом «website» через отладчик Facebook. Если превью выглядит нормально — менять необязательно. Но для структурированных данных и специфического контента конкретный тип даёт преимущество.
Размеры изображений для OG-тегов
Тег og:image влияет на кликабельность сильнее остальных OG-свойств. Страница без изображения или с картинкой неправильного размера получает до 50 % меньше переходов по сравнению с корректно оформленным превью.
Платформа Рекомендуемый размер Соотношение сторон Минимум Facebook 1200 × 630 px 1.91:1 200 × 200 px ВКонтакте 1200 × 630 px 1.91:1 537 × 240 px LinkedIn 1200 × 627 px 1.91:1 200 × 200 px Telegram 1200 × 630 px 1.91:1 400 × 200 px Pinterest 1000 × 1500 px 2:3 600 × 600 px WhatsApp 1200 × 630 px 1.91:1 300 × 200 px
Универсальный размер — 1200 × 630 пикселей. Он корректно отображается в Facebook, ВКонтакте, LinkedIn, Telegram и WhatsApp без обрезки. Формат файла — JPEG для фото, PNG для графики с текстом. Вес — до 5 МБ.
Если изображение слишком тяжёлое, пропустите его через сжатие изображений перед загрузкой. Нужен точный кроп под OG-размер? Изменение размера изображения поможет.
Важный момент, который многие пропускают: добавьте теги og:image:width и og:image:height рядом с og:image. Без явных размеров Facebook сначала загружает изображение, измеряет его и только потом формирует карточку. Первый человек, который поделится ссылкой, может увидеть пустое превью.
Проверка и отладка OG-тегов
Сгенерировать теги — половина задачи. Вторая половина — убедиться, что платформы их корректно считывают.
Facebook. Откройте Sharing Debugger (developers.facebook.com/tools/debug), вставьте URL и нажмите «Отладка». Если превью показывает старые данные, нажмите «Повторный парсинг» — Facebook обновит кэш.
ВКонтакте. Используйте метод API pages.clearCache (vk.com/dev/pages.clearCache). Также можно вставить ссылку в поле нового поста — ВКонтакте подтянет свежие данные.
LinkedIn. Post Inspector (linkedin.com/post-inspector) показывает карточку ссылки. LinkedIn кэширует агрессивно — иногда нужно два запроса подряд.
Telegram. Бот @webpagebot позволяет обновить кэш превью. Без принудительного сброса Telegram может показывать старое превью до суток.
Типичные ошибки:
Не подтягивается изображение. Скорее всего, в og:image указан относительный путь (/images/cover.jpg) вместо полного URL (https://yoursite.com/images/cover.jpg). Протокол OG требует абсолютных ссылок.
Превью не появляется. Теги размещены в
, а не в . Мета-теги вне не валидны и игнорируются.Маленькая картинка вместо большой карточки. Изображение менее 200 × 200 px. Facebook и ВКонтакте покажут миниатюру вместо полноразмерного превью.
После установки тегов проверьте общее состояние разметки через анализатор мета-тегов . Это быстрый способ убедиться, что ничего не потерялось при деплое.
Кому и когда нужен генератор OG-тегов
Контент-маркетологи и SMM-специалисты. Каждая статья, которую вы публикуете, рано или поздно попадёт в соцсети — вы сами её расшарите или это сделают читатели. Без OG-тегов Facebook и ВКонтакте подтянут случайную картинку с сайта, часть рекламного баннера или логотип из шапки. Генерируйте теги перед каждой публикацией.
Владельцы интернет-магазинов. Товарные страницы, которыми делятся в Telegram-чатах и группах ВКонтакте, должны показывать фото товара, название и ключевое преимущество. Тип «product» в сочетании с проработанными длиннохвостовыми ключевыми словами в описании даёт максимальную видимость и в поиске, и в соцсетях. Особенно актуально для ИП и небольших ООО, которые продвигаются через социальные каналы.
Веб-разработчики и фрилансеры. Клиенты редко думают об OG-тегах до момента, когда делятся новым сайтом в LinkedIn и видят сломанное превью. Добавьте генерацию OG-тегов в свой чек-лист перед сдачей проекта. Заодно запустите SEO-проверку сайта и тест скорости страницы — три минуты работы, которые избавят от неудобных писем через неделю.
Маркетологи в агентствах. Когда вы ведёте 5–10 клиентских аккаунтов, каждую неделю публикуете десятки ссылок. Несоответствие картинки и заголовка в превью выглядит непрофессионально. Создавайте теги для каждого URL кампании и отслеживайте результаты через проверку социальной статистики .
Популярные вопросы об Open Graph тегах
Open Graph теги — это мета-элементы в секции
HTML-страницы, которые задают заголовок, описание, изображение и тип контента для социальных сетей. Протокол разработал Facebook в 2010 году. Сегодня его поддерживают ВКонтакте, LinkedIn, Telegram, WhatsApp, Slack, Pinterest и Одноклассники. Четыре обязательных тега: og:title, og:type, og:image и og:url.
Да, полностью бесплатный и без ограничений. Регистрация не нужна — генерируйте теги для любого количества страниц в любое время.
Прямого влияния на ранжирование нет — Google и Яндекс игнорируют OG-теги при индексации и используют стандартные мета-теги. Но правильно оформленные превью увеличивают кликабельность ссылок в соцсетях, что приносит дополнительный трафик и поведенческие сигналы. Эти факторы косвенно помогают позициям сайта.
Соцсети попробуют угадать содержимое. Facebook и ВКонтакте просканируют страницу и подтянут первый найденный текст и изображение. Результат — обрезанный заголовок, рекламный баннер вместо обложки или описание из сайдбара. По данным исследований, страницы без OG-тегов теряют до 50 % вовлечённости при расшаривании.
Технически — да. Практически — нет. Каждая страница должна иметь уникальные og:title, og:description, og:image и og:url. Одинаковые теги на всём сайте превращают каждую расшаренную ссылку в клон предыдущей. Пользователи перестают кликать.
Open Graph создал Facebook, и большинство платформ его поддерживают. Twitter (X) разработал собственный формат — Twitter Cards с тегами вроде twitter:title и twitter:image. Если на странице нет Twitter-тегов, X использует OG-теги как запасной вариант. Для полного покрытия добавьте оба формата: OG через этот генератор, а Twitter Cards через генератор Twitter Card .
Два варианта. Вставьте код напрямую в header.php темы — подходит для разработчиков. Или используйте SEO-плагин (Yoast SEO, Rank Math, All in One SEO) — в редакторе каждой записи появятся поля для OG-тегов. Плагин удобнее, если у вас много страниц и нет доступа к коду темы.
В 1С-Битрикс отредактируйте шаблон сайта и вставьте мета-теги в секцию
через header.php или компонент bitrix:main.include. В Tilda зайдите в настройки страницы — раздел «SEO» — и заполните поля Open Graph: заголовок, описание, изображение. Tilda генерирует OG-разметку автоматически из этих полей.
Да. Оба мессенджера считывают OG-теги при вставке ссылки в чат. WhatsApp формирует карточку с изображением, заголовком и описанием. Telegram делает то же самое и дополнительно показывает og:site_name. Для обновления кэша в Telegram используйте бота @webpagebot.
Стандарт — 1200 × 630 пикселей с соотношением сторон 1.91:1. Этот размер корректно отображается в Facebook, ВКонтакте, LinkedIn, Telegram и WhatsApp как большая карточка. Изображения меньше 600 × 315 px покажутся как миниатюры — кликов по ним значительно меньше. Вес файла — до 5 МБ.
Да. Тег
оптимизируют под ключевые слова для Google и Яндекса, а og:title делают более «цепляющим» для соцсетей. Многие маркетологи используют <a href="https://toolspivot.com/ru/ai-meta-title-generator">генератор мета-заголовков</a> для подбора вариантов SEO-заголовков и отдельно пишут OG-заголовок с акцентом на кликабельность.</p></div></div></div><div class="panel panel-default accordion_box"><div class="panel-heading" role="tab" id="bvfaq1-11-h"><h4 class="panel-title"><a class="acordion_link external collapsed" role="button" data-toggle="collapse" data-parent="#bvfaq1" href="#bvfaq1-11" aria-expanded="false" aria-controls="bvfaq1-11" rel="nofollow"><i class="more-less glyphicon glyphicon-menu-up"></i><span class="acordion_q">Как часто нужно обновлять OG-теги?</span></a></h4></div><div id="bvfaq1-11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="bvfaq1-11-h" aria-expanded="false"><div class="panel-body acordion_body"><p>При каждом значимом изменении страницы: новая обложка, переписанный заголовок, обновлённое описание. Если тестируете заголовки для соцсетей, og:title можно менять независимо от <title>. После обновления обязательно сбросьте кэш через Sharing Debugger в Facebook и pages.clearCache во ВКонтакте.</p></div></div></div><div class="panel panel-default accordion_box"><div class="panel-heading" role="tab" id="bvfaq1-12-h"><h4 class="panel-title"><a class="acordion_link external collapsed" role="button" data-toggle="collapse" data-parent="#bvfaq1" href="#bvfaq1-12" aria-expanded="false" aria-controls="bvfaq1-12" rel="nofollow"><i class="more-less glyphicon glyphicon-menu-up"></i><span class="acordion_q">Что делать, если ВКонтакте показывает старое превью?</span></a></h4></div><div id="bvfaq1-12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="bvfaq1-12-h" aria-expanded="false"><div class="panel-body acordion_body"><p>Вызовите метод API pages.clearCache с параметром url — ВКонтакте перечитает OG-теги страницы. Альтернативный способ: создайте новый пост на стене, вставьте ссылку и удалите черновик. После этого ВКонтакте обновит кэш. Убедитесь, что новые теги уже доступны на странице — проверьте через <a href="https://toolspivot.com/ru/twitter-graph-checker">проверку Twitter Graph</a> или через отладчик OG-тегов.</p>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Что такое Open Graph теги?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Open Graph теги — это мета-элементы в секции head HTML-страницы, которые задают заголовок, описание, изображение и тип контента для социальных сетей. Протокол разработал Facebook в 2010 году. Сегодня его поддерживают ВКонтакте, LinkedIn, Telegram, WhatsApp, Slack, Pinterest и Одноклассники. Четыре обязательных тега: og:title, og:type, og:image и og:url."
}
},
{
"@type": "Question",
"name": "Генератор Open Graph от ToolsPivot бесплатный?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Да, полностью бесплатный и без ограничений. Регистрация не нужна — генерируйте теги для любого количества страниц в любое время."
}
},
{
"@type": "Question",
"name": "OG-теги влияют на позиции в поиске Google и Яндекс?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Прямого влияния на ранжирование нет — Google и Яндекс игнорируют OG-теги при индексации и используют стандартные мета-теги. Но правильно оформленные превью увеличивают кликабельность ссылок в соцсетях, что приносит дополнительный трафик и поведенческие сигналы. Эти факторы косвенно помогают позициям сайта."
}
},
{
"@type": "Question",
"name": "Что будет, если не добавить OG-теги на страницу?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Соцсети попробуют угадать содержимое. Facebook и ВКонтакте просканируют страницу и подтянут первый найденный текст и изображение. Результат — обрезанный заголовок, рекламный баннер вместо обложки или описание из сайдбара. Страницы без OG-тегов теряют до 50 % вовлечённости при расшаривании."
}
},
{
"@type": "Question",
"name": "Можно ли использовать одинаковые OG-теги на всех страницах?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Технически — да. Практически — нет. Каждая страница должна иметь уникальные og:title, og:description, og:image и og:url. Одинаковые теги на всём сайте превращают каждую расшаренную ссылку в клон предыдущей."
}
},
{
"@type": "Question",
"name": "Чем OG-теги отличаются от Twitter Cards?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Open Graph создал Facebook, и большинство платформ его поддерживают. Twitter (X) разработал собственный формат — Twitter Cards с тегами вроде twitter:title и twitter:image. Если на странице нет Twitter-тегов, X использует OG-теги как запасной вариант. Для полного покрытия добавьте оба формата."
}
},
{
"@type": "Question",
"name": "Как добавить OG-теги в WordPress?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Два варианта. Вставьте код напрямую в header.php темы — подходит для разработчиков. Или используйте SEO-плагин (Yoast SEO, Rank Math, All in One SEO) — в редакторе каждой записи появятся поля для OG-тегов."
}
},
{
"@type": "Question",
"name": "Как добавить OG-теги на сайт на 1С-Битрикс или Tilda?",
"acceptedAnswer": {
"@type": "Answer",
"text": "В 1С-Битрикс отредактируйте шаблон сайта и вставьте мета-теги в секцию head через header.php или компонент bitrix:main.include. В Tilda зайдите в настройки страницы — раздел SEO — и заполните поля Open Graph: заголовок, описание, изображение. Tilda генерирует OG-разметку автоматически из этих полей."
}
},
{
"@type": "Question",
"name": "OG-теги работают в WhatsApp и Telegram?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Да. Оба мессенджера считывают OG-теги при вставке ссылки в чат. WhatsApp формирует карточку с изображением, заголовком и описанием. Telegram делает то же самое и дополнительно показывает og:site_name. Для обновления кэша в Telegram используйте бота @webpagebot."
}
},
{
"@type": "Question",
"name": "Какой размер изображения для og:image?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Стандарт — 1200 × 630 пикселей с соотношением сторон 1.91:1. Этот размер корректно отображается в Facebook, ВКонтакте, LinkedIn, Telegram и WhatsApp как большая карточка. Изображения меньше 600 × 315 px покажутся как миниатюры. Вес файла — до 5 МБ."
}
},
{
"@type": "Question",
"name": "Можно ли задать разные заголовки для SEO и соцсетей?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Да. Тег title оптимизируют под ключевые слова для Google и Яндекса, а og:title делают более цепляющим для соцсетей. Многие маркетологи используют отдельные формулировки для каждого канала."
}
},
{
"@type": "Question",
"name": "Как часто нужно обновлять OG-теги?",
"acceptedAnswer": {
"@type": "Answer",
"text": "При каждом значимом изменении страницы: новая обложка, переписанный заголовок, обновлённое описание. После обновления обязательно сбросьте кэш через Sharing Debugger в Facebook и pages.clearCache во ВКонтакте."
}
},
{
"@type": "Question",
"name": "Что делать, если ВКонтакте показывает старое превью?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Вызовите метод API pages.clearCache с параметром url — ВКонтакте перечитает OG-теги страницы. Альтернативный способ: создайте новый пост на стене, вставьте ссылку и удалите черновик. После этого ВКонтакте обновит кэш."
}
}
]
}
</script></p><section class="bv-related-tools" aria-label="Related tools"></div></div></div></div><h2 class="bv-related-tools-title">Related Tools You Might Like</h2><div class="bv-related-tools-grid"><a class="bv-related-tool" href="https://toolspivot.com/ru/keywords-research-tool" title="Инструмент исследования ключевых слов">
<span class="bv-related-tool-icon"><img alt="Инструмент исследования ключевых слов" src="https://toolspivot.com/theme/smallseo/icons/keywordsug.png?v=1743853502" loading="lazy" /></span>
<span class="bv-related-tool-name">Инструмент исследования ключевых слов</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a><a class="bv-related-tool" href="https://toolspivot.com/ru/link-analyzer-tool" title="Анализатор ссылок">
<span class="bv-related-tool-icon"><img alt="Анализатор ссылок" src="https://toolspivot.com/theme/smallseo/icons/no_image.png?v=1780401052" loading="lazy" /></span>
<span class="bv-related-tool-name">Анализатор ссылок</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a><a class="bv-related-tool" href="https://toolspivot.com/ru/questions-explorer-tool" title="Инструмент исследования вопросов">
<span class="bv-related-tool-icon"><img alt="Инструмент исследования вопросов" src="https://toolspivot.com/theme/smallseo/icons/questions-explorer-tool.png?v=1743860398" loading="lazy" /></span>
<span class="bv-related-tool-name">Инструмент исследования вопросов</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a><a class="bv-related-tool" href="https://toolspivot.com/ru/spider-simulator" title="Симулятор паука поисковой системы">
<span class="bv-related-tool-icon"><img alt="Симулятор паука поисковой системы" src="https://toolspivot.com/theme/smallseo/icons/no_image.png?v=1780401052" loading="lazy" /></span>
<span class="bv-related-tool-name">Симулятор паука поисковой системы</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a><a class="bv-related-tool" href="https://toolspivot.com/ru/robots-txt-generator" title="Генератор Robots.txt">
<span class="bv-related-tool-icon"><img alt="Генератор Robots.txt" src="https://toolspivot.com/theme/smallseo/icons/robots_txt_generator.png?v=1779002277" loading="lazy" /></span>
<span class="bv-related-tool-name">Генератор Robots.txt</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a><a class="bv-related-tool" href="https://toolspivot.com/ru/meta-tag-generator" title="Генератор метатегов">
<span class="bv-related-tool-icon"><img alt="Генератор метатегов" src="https://toolspivot.com/theme/smallseo/icons/meta_tag_generator.png?v=1779002277" loading="lazy" /></span>
<span class="bv-related-tool-name">Генератор метатегов</span>
<span class="bv-related-tool-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a></div></section></p> <br />
</div>
<div class="col-md-4" id="rightCol" >
<div class="search_dots_section p20 box_shadow_border">
<div class="tool_heading text-center">
<div class="fs18 mn th-title">ПОИСК</div>
<div class="heading_border mb10 mt10"></div>
</div>
<div id="sidebar_search">
<div class="input-group">
<input id="sidebarsearch" autocomplete="off" placeholder="Поиск по SEO-инструментам" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" aria-label="Search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
<div id="sidebar-results" class="search-resultsbar box_shadow_border" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; border-radius: 10px; padding: 15px 0px; display: none;"></div>
</div>
</div>
<div class="sidebar_adds p5 mt15 box_shadow_border"><span class="ad-label">Реклама</span><div class="sideXd"><!-- New Sidebar -->
<ins class="adsbygoogle"
style="display:block;width:100%;min-height:250px"
data-ad-client="ca-pub-3744783675211834"
data-ad-slot="5576900894"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></div>
<div class="popular_tool_box box_shadow_border pn mb10 dp-poptools">
<ul>
<li class="popular-seo-t pn">
<div class="mn p10 pop-title">
Популярные инструменты DocPivot </div>
</li>
<li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><text x="3" y="14" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PPT</text><path d="M9 20l10 10" stroke-width="2.4"/><path d="M19 24v6h-6" stroke-width="2.4"/><text x="37" y="37" text-anchor="end" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PDF</text></svg></div><a href="https://toolspivot.com/doc/ru/powerpoint-to-pdf">PowerPoint в PDF</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><text x="3" y="14" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">TXT</text><path d="M9 20l10 10" stroke-width="2.4"/><path d="M19 24v6h-6" stroke-width="2.4"/><text x="37" y="37" text-anchor="end" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PDF</text></svg></div><a href="https://toolspivot.com/doc/ru/text-to-pdf">Текст в PDF</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="6" y="6" width="22" height="22" rx="3" stroke-dasharray="4 3"/><rect x="12" y="12" width="22" height="22" rx="3"/><path d="M20 34v-8M16 30l4 4 4-4"/></svg></div><a href="https://toolspivot.com/doc/ru/flatten-pdf">Свести PDF</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><text x="3" y="14" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PDF</text><path d="M9 20l10 10" stroke-width="2.4"/><path d="M19 24v6h-6" stroke-width="2.4"/><text x="37" y="37" text-anchor="end" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">TXT</text></svg></div><a href="https://toolspivot.com/doc/ru/pdf-to-text">PDF в Текст</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><text x="3" y="14" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PDF</text><path d="M9 20l10 10" stroke-width="2.4"/><path d="M19 24v6h-6" stroke-width="2.4"/><text x="37" y="37" text-anchor="end" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">XLS</text></svg></div><a href="https://toolspivot.com/doc/ru/pdf-to-excel">PDF в Excel</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 4H11a3 3 0 0 0-3 3v26a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V14z"/><path d="M22 4v10h10"/></svg></div><a href="https://toolspivot.com/doc/ru/pdf-to-epub">PDF в EPUB</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><text x="3" y="14" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PDF</text><path d="M9 20l10 10" stroke-width="2.4"/><path d="M19 24v6h-6" stroke-width="2.4"/><text x="37" y="37" text-anchor="end" font-size="11" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui,-apple-system,sans-serif">PPT</text></svg></div><a href="https://toolspivot.com/doc/ru/pdf-to-powerpoint">PDF в PowerPoint</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="9" width="14" height="14" rx="2.5"/><circle cx="7.5" cy="13.5" r="1.5"/><path d="M3 20l4-3.5 4.5 4"/><path d="M20 26h11M26 21l5 5-5 5"/><path d="M23 9c4-4 10-4 14 0v11H23z"/><circle cx="23" cy="9" r="2" fill="currentColor" stroke="none"/><circle cx="37" cy="9" r="2" fill="currentColor" stroke="none"/></svg></div><a href="https://toolspivot.com/doc/ru/png-to-svg">PNG в SVG</a></li><li class="pg-hovr"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="9" width="14" height="14" rx="2.5"/><circle cx="7.5" cy="13.5" r="1.5"/><path d="M3 20l4-3.5 4.5 4"/><path d="M20 26h11M26 21l5 5-5 5"/><path d="M23 9c4-4 10-4 14 0v11H23z"/><circle cx="23" cy="9" r="2" fill="currentColor" stroke="none"/><circle cx="37" cy="9" r="2" fill="currentColor" stroke="none"/></svg></div><a href="https://toolspivot.com/doc/ru/jpg-to-svg">JPG в SVG</a></li><li class="pg-hovr border-bottom"><div class="icon_image"><svg viewBox="0 0 40 40" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="9" width="14" height="14" rx="2.5"/><circle cx="7.5" cy="13.5" r="1.5"/><path d="M3 20l4-3.5 4.5 4"/><path d="M20 26h11M26 21l5 5-5 5"/><path d="M23 9c4-4 10-4 14 0v11H23z"/><circle cx="23" cy="9" r="2" fill="currentColor" stroke="none"/><circle cx="37" cy="9" r="2" fill="currentColor" stroke="none"/></svg></div><a href="https://toolspivot.com/doc/ru/webp-to-svg">WebP в SVG</a></li> </ul>
</div>
<div class="sidebar_adds p5 mt15 box_shadow_border"><span class="ad-label">Реклама</span><div class="sideXd"><!-- Multiplex -->
<ins class="adsbygoogle"
style="display:block;width:100%;min-height:400px"
data-ad-client="ca-pub-3744783675211834"
data-ad-slot="7692867693"
data-ad-format="autorelaxed"
data-matched-content-ui-type="image_stacked"
data-matched-content-columns-num="1"
data-matched-content-rows-num="3"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></div>
<div class="popular_tool_box box_shadow_border pn mb10"><ul><li class="popular-seo-t pn"><div class="mn p10 pop-title">Популярные ИИ-инструменты</div></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/geo-audit.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/geo-audit">Инструмент GEO-аудита</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/llms-txt-generator.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/llms-txt-generator">Генератор llms.txt</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/ai-content-detector.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/ai-content-detector">Детектор ИИ-контента</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/ai-humanizer.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/ai-humanizer">ИИ-гуманизатор</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/ai-keyword-cluster-ideas.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/ai-keyword-cluster-ideas">Идея кластеризации ключевых слов с помощью AI</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/ai-seo-meta-title-generator.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/ai-meta-title-generator">Генератор мета-заголовков на базе ИИ</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/ai-seo-meta-description-generator.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/ai-meta-description-generator">Генератор мета-описаний на базе ИИ</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/article_rewriter_pro.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/paraphrasing-tool">Инструмент перефразирования</a></li><li class="pg-hovr border-bottom"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/article_rewriter_pro.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/article-rewriter-tool">Реврайтер статей</a></li></ul></div><div class="sidebar_adds p5 mt15 box_shadow_border"><span class="ad-label">Реклама</span><div class="sideXd"><!-- After Popular AI Tools -->
<ins class="adsbygoogle"
style="display:block;width:100%;min-height:250px"
data-ad-client="ca-pub-3744783675211834"
data-ad-slot="7276995379"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></div><div class="popular_tool_box box_shadow_border pn mb10"><ul><li class="popular-seo-t pn"><div class="mn p10 pop-title">Популярные SEO-инструменты</div></li><li class="pg-hovr"><div class="icon_image website-seo-score"></div><a href="https://toolspivot.com/ru/website-seo-checker">Инструмент проверки SEO сайта</a></li><li class="pg-hovr"><div class="icon_image plagrism-checker"></div><a href="https://toolspivot.com/ru/plagiarism-checker">Проверка на плагиат</a></li><li class="pg-hovr"><div class="icon_image word-count-checker"></div><a href="https://toolspivot.com/ru/word-counter-tool">Счётчик слов</a></li><li class="pg-hovr"><div class="icon_image keyword-position-checker"></div><a href="https://toolspivot.com/ru/keyword-rank-checker">Проверка позиций ключевых слов</a></li><li class="pg-hovr"><div class="icon_image grammer-chacker"></div><a href="https://toolspivot.com/ru/grammar-checker">Бесплатная онлайн-проверка грамматики</a></li><li class="pg-hovr"><div class="icon_image readability-checker"></div><a href="https://toolspivot.com/ru/readability-checker">Проверка читаемости</a></li><li class="pg-hovr"><div class="icon_image reverse-image"></div><a href="https://toolspivot.com/ru/reverse-image-search">Обратный поиск по изображению</a></li><li class="pg-hovr"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/keywordsug.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/keywords-research-tool">Инструмент исследования ключевых слов</a></li><li class="pg-hovr"><div class="icon_image keyword-dencity-checker"></div><a href="https://toolspivot.com/ru/keyword-density-checker">Проверка плотности ключевых слов</a></li><li class="pg-hovr border-bottom"><div class="icon_image" style="background-image:url(https://toolspivot.com/theme/smallseo/icons/html-edit.png);background-size:contain;background-repeat:no-repeat;background-position:center;"></div><a href="https://toolspivot.com/ru/markdown-editor">Редактор Markdown</a></li></ul></div><div class="sidebar_adds p5 mt15 box_shadow_border"><span class="ad-label">Реклама</span><div class="sideXd"><!-- After Popular SEO Tools -->
<ins class="adsbygoogle"
style="display:block;width:100%;min-height:250px"
data-ad-client="ca-pub-3744783675211834"
data-ad-slot="6571357712"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></div>
</div>
</div>
</div> <br />
<script>
function doCheck(){
var impressions = jQuery.trim($('input[name=impressions]').val());
var cpr = jQuery.trim($('input[name=cpr]').val());
var ctr = jQuery.trim($('input[name=ctr]').val());
if (ctr == null || ctr== "" || cpr == null || cpr == "" || impressions == null || impressions == "") {
alert("Все поля должны быть заполнены!");
return false;
}
return true;
}
</script></div></div></div><!-- Bug Button -->
<style>
/* REPORT A BUG - a 48px circle, not a slab.
*
* It used to be a 136x47 orange rectangle, which made it the fourth orange CTA
* on a tool page (the tool's own "Choose files" and the action button are the
* other two) and the most permanently visible one - competing with the button
* we actually want pressed. As a small icon it competes by SIZE instead of by
* colour: 48px against a 300px action bar reads as subordinate at a glance.
*
* MOVED TO THE LEFT CORNER. The right corner now carries the chat launcher
* and the back-to-top control; a third circle stacked in the same column read
* as clutter, and on a 375px screen the stack reached a third of the height.
* Left also separates the two supports: ask on the right, report on the left.
*/
#bug-btn {
position: fixed;
left: 12px;
/* --aic-b is raised by ai-chat.js while the cookie consent bar is on
screen, so these controls never sit on top of it. Falls back to 12px
when the script has not run. */
bottom: var(--aic-b, 12px);
width: 48px; /* 44px is the touch-target floor; 48 has margin */
height: 48px;
border-radius: 50%;
background: #fa4c10;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,.28);
/* Under the back-to-top, so if they ever do meet the arrow still wins. */
z-index: 9999;
transition: transform .18s ease, box-shadow .18s ease;
}
#bug-btn:hover,
#bug-btn:focus-visible {
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
#bug-btn:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(250,76,16,.45);
}
#bug-btn .fa { font-size: 20px; line-height: 1; }
/* AN ICON ALONE DOES NOT SAY WHAT IT DOES.
The accessible name is on the link for screen readers; this is the same
thing for everyone else, revealed on hover or keyboard focus so the button
stays a circle at rest. */
#bug-btn .bug-btn-label {
position: absolute;
left: 58px; /* flies out to the right of a left-corner button */
white-space: nowrap;
background: #1c1c1c;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
opacity: 0;
transform: translateX(6px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
#bug-btn .bug-btn-label { transform: translateX(-6px); }
#bug-btn:hover .bug-btn-label,
#bug-btn:focus-visible .bug-btn-label { opacity: 1; transform: translateX(0); }
/* On a phone there is no hover and the label would sit under the thumb, so the
circle stands alone - the accessible name still carries the meaning. */
@media (max-width: 767px) {
#bug-btn .bug-btn-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#bug-btn, #bug-btn .bug-btn-label { transition: none; }
#bug-btn:hover, #bug-btn:focus-visible { transform: none; }
}
/* ---------------------------------------------------------------------------
AI chat widget.
Layout follows the modern support-widget convention: a flat light panel
rather than a coloured header bar, a floating identity card naming who is
answering, assistant text with no bubble around it, and a pill composer.
The brand mark is ours - the ToolsPivot icon from the favicon setting.
Stacking order in the bottom-right column, measured not assumed:
launcher bottom var(--aic-b), z 10001 (primary support action, 56px)
.top 68px above it, z 10000 (back-to-top, shifted to clear it)
#bug-btn moved to the LEFT corner - see its block above. --aic-b is raised
by ai-chat.js while the cookie consent bar is on screen, and .aic-hold keeps
both controls hidden until window.load.
--------------------------------------------------------------------------- */
.aic-hold #aic-launch, .aic-hold #bug-btn { visibility: hidden; opacity: 0; }
#aic-launch, #bug-btn { transition: opacity .25s ease; }
#aic-launch {
position: fixed;
right: 12px;
bottom: var(--aic-b, 12px);
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: #fa4c10;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(250,76,16,.38);
z-index: 10001;
transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
}
/* A speech bubble, not the ToolsPivot mark: the mark is orange and light grey,
so on an orange disc its orange half disappears - and this control's job is
to say "chat". The mark identifies the assistant inside the panel instead. */
#aic-launch .fa { font-size: 23px; line-height: 1; }
#aic-launch:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(250,76,16,.5); }
#aic-launch:focus-visible {
outline: 3px solid #fff; outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(250,76,16,.45);
}
body.aic-on .top { bottom: calc(var(--aic-b, 12px) + 68px) !important; }
#aic-panel {
position: fixed;
right: 12px;
bottom: calc(var(--aic-b, 12px) + 68px);
width: 380px;
max-width: calc(100vw - 24px);
height: 580px;
max-height: calc(100vh - 150px);
background: #f6f4f3; /* flat light field, no header bar */
border: 1px solid #e8e2de;
border-radius: 16px;
box-shadow: 0 18px 48px rgba(28,12,4,.22);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 10002;
font-family: 'open sans', sans-serif;
transform-origin: bottom right;
animation: aic-in .18s ease-out;
}
@keyframes aic-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
/* --- header ------------------------------------------------------------- */
/* One bar carrying identity and the close control, rather than a floating
close row above a separate floating card: two stacked chrome layers ate the
top of the panel and read as two unrelated things. Identity belongs in the
header - who is answering, and that it is a machine. A support widget that
hides that is one people distrust the moment it gets something wrong. */
#aic-head {
flex: 0 0 auto;
display: flex; align-items: center; gap: 11px;
/* 16px left matches #aic-log's padding, so the header mark and every
message avatar sit on one vertical edge. It was 14px and they were 2px
apart, which is exactly the sort of gap that reads as sloppy without
being obvious. */
padding: 12px 12px 12px 16px;
background: #fff;
border-bottom: 1px solid #e8e2de;
}
#aic-close {
width: 34px; height: 34px; border: 0; border-radius: 50%; flex: 0 0 34px;
background: rgba(0,0,0,.05); color: #3f3a37; cursor: pointer;
font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
/* 34px visual, 44px hit area - the target rule is about what the finger
must reach, not what the eye must see. */
position: relative;
}
#aic-close::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; }
#aic-close:hover { background: rgba(0,0,0,.11); }
#aic-close:focus-visible { outline: 2px solid #fa4c10; outline-offset: 2px; }
#aic-mark { position: relative; width: 38px; height: 38px; flex: 0 0 38px; }
#aic-head .aic-ttl { flex: 1 1 auto; min-width: 0; }
/* The disc is black because the icon itself is: every uploaded ToolsPivot Icon
has an opaque black field and none is transparent, so the image fills the
circle and its own background becomes the disc. */
#aic-mark .aic-disc {
width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #000;
}
#aic-mark img { width: 100%; height: 100%; display: block; }
#aic-mark .aic-dot {
position: absolute; top: -1px; right: -1px;
width: 11px; height: 11px; border-radius: 50%;
background: #22c55e; border: 2px solid #fff;
}
#aic-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: #1f1b19; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aic-head .aic-sub { font-size: 12.5px; color: #7d726c; margin: 1px 0 0; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- message list ------------------------------------------------------- */
#aic-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.aic-msg { display: flex; gap: 10px; margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; }
.aic-msg:last-child { margin-bottom: 0; }
.aic-me { justify-content: flex-end; }
.aic-col { min-width: 0; max-width: 88%; }
/* margin-top centres the avatar on the first LINE BOX of the message, not on
the row: measured 1.8px low at margin-top:1px, so -1px lands it. Line box is
23.2px (14.5px x 1.6) against a 28px avatar. */
.aic-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
background: #000; margin-top: -1px; overflow: hidden; }
.aic-av img { width: 100%; height: 100%; display: block; }
/* Assistant text carries no bubble: the avatar already marks the speaker, and
an unboxed answer reads as prose rather than as a chat artefact. */
.aic-ai .aic-b { background: transparent; border: 0; padding: 2px 0 0; color: #2b2622; }
.aic-me .aic-b {
background: #fa4c10; color: #fff; padding: 10px 14px;
border-radius: 16px 16px 4px 16px;
}
.aic-note .aic-b { color: #2b2622; }
.aic-err .aic-b { background: #fdf3f3; border: 1px solid #f0c9c9; color: #8a2020;
padding: 10px 13px; border-radius: 12px; }
/* --- source card -------------------------------------------------------- */
/* This is the conversion: the answer names a tool, this opens it. */
.aic-src { margin: 10px 0 0; padding: 0; list-style: none; }
.aic-src li { margin: 6px 0 0; }
.aic-src a {
display: flex; align-items: center; gap: 8px;
padding: 10px 13px; background: #fff; border: 1px solid #e8e2de; border-radius: 12px;
color: #b23a0c; font-size: 13.5px; font-weight: 600; text-decoration: none;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aic-src a .aic-sarrow { margin-left: auto; opacity: .55; font-size: 12px; }
.aic-src a:hover, .aic-src a:focus-visible {
border-color: #fa4c10; color: #8f2e0a; text-decoration: none;
transform: translateX(2px); box-shadow: 0 2px 8px rgba(250,76,16,.14);
}
.aic-src a:focus-visible { outline: 2px solid #fa4c10; outline-offset: 1px; }
/* --- suggested questions ------------------------------------------------ */
/* An empty chat is a blank page problem: people do not know what it can answer,
so they ask nothing. Editable in admin, not hardcoded. */
#aic-sug { margin: 16px 0 0; }
#aic-sug .aic-sug-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
color: #9b8d85; margin: 0 0 8px; font-weight: 700; }
.aic-chip {
display: block; width: 100%; text-align: left;
background: #fff; border: 1px solid #e8e2de; border-radius: 12px;
padding: 11px 13px; margin: 0 0 8px; font-size: 13.5px; color: #433b36;
cursor: pointer; font-family: inherit; line-height: 1.45;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aic-chip:hover { border-color: #fa4c10; color: #1f1b19;
transform: translateX(2px); box-shadow: 0 2px 8px rgba(250,76,16,.14); }
.aic-chip:focus-visible { outline: 2px solid #fa4c10; outline-offset: 1px; }
/* --- escalation to a human --------------------------------------------- */
/* Offered only when the assistant could not answer. Progressive disclosure: a
button first, fields only once pressed, so a dead end becomes a route to a
person without putting a form in front of everyone. */
.aic-esc { margin: 12px 0 0; padding: 13px; background: #fff;
border: 1px solid #e8e2de; border-radius: 14px; }
.aic-esc-h { font-size: 13.5px; color: #433b36; margin: 0 0 10px; font-weight: 600; }
.aic-esc .aic-btn {
display: inline-flex; align-items: center; gap: 7px;
background: #fa4c10; color: #fff; border: 0; border-radius: 999px;
padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
font-family: inherit; min-height: 42px;
}
.aic-esc .aic-btn:hover { background: #e34410; }
.aic-esc .aic-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px rgba(250,76,16,.45); }
.aic-esc .aic-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Visible labels, not placeholder-only: a placeholder disappears the moment
someone types, which is exactly when they need to know what the field was. */
.aic-f { margin: 0 0 10px; }
.aic-f label { display: block; font-size: 12px; font-weight: 600; color: #6b5f59; margin: 0 0 4px; }
.aic-f label .aic-opt { font-weight: 400; color: #9b8d85; }
.aic-f input, .aic-f textarea {
width: 100%; border: 1px solid #e2dad5; border-radius: 10px;
padding: 10px 12px; font-size: 16px; /* 16px stops iOS zooming on focus */
font-family: inherit; color: #222; background: #faf8f7; line-height: 1.4;
}
.aic-f textarea { resize: vertical; min-height: 72px; }
.aic-f input:focus, .aic-f textarea:focus {
border-color: #fa4c10; background: #fff; outline: 2px solid rgba(250,76,16,.22);
}
.aic-f .aic-ferr { display: block; font-size: 12px; color: #b02a2a; margin: 4px 0 0; }
.aic-esc-ok { font-size: 13.5px; color: #1d6b3a; margin: 0; display: flex; gap: 7px; align-items: flex-start; }
/* Three dots, not a spinner: the wait is short and this says "composing". */
.aic-dots span {
display: inline-block; width: 6px; height: 6px; margin-right: 3px;
background: #bcaea6; border-radius: 50%; animation: aic-bounce 1s infinite;
}
.aic-dots span:nth-child(2) { animation-delay: .15s; }
.aic-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes aic-bounce { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* --- privacy notice ----------------------------------------------------- */
/* Says plainly that the question leaves the site, because it does: it goes to
an AI provider to be answered. Dismissible and remembered, so it informs
once instead of nagging. */
#aic-note {
flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px;
margin: 0 14px; padding: 10px 12px;
background: #fff; border: 1px solid #e8e2de; border-radius: 12px;
}
#aic-note p { flex: 1 1 auto; margin: 0; font-size: 11.5px; line-height: 1.5; color: #7d726c; }
#aic-note a { color: #b23a0c; text-decoration: underline; }
#aic-note a:hover, #aic-note a:focus-visible { color: #8f2e0a; }
#aic-note .aic-nx {
flex: 0 0 24px; width: 24px; height: 24px; border: 0; border-radius: 50%;
background: transparent; color: #9b8d85; cursor: pointer; font-size: 12px; line-height: 1;
display: flex; align-items: center; justify-content: center; position: relative;
}
/* 24px visual, 44px reachable */
#aic-note .aic-nx::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; }
#aic-note .aic-nx:hover { background: rgba(0,0,0,.06); color: #3f3a37; }
#aic-note .aic-nx:focus-visible { outline: 2px solid #fa4c10; outline-offset: 1px; }
/* --- composer ----------------------------------------------------------- */
#aic-foot { flex: 0 0 auto; padding: 10px 14px 14px; display: flex; gap: 8px; align-items: flex-end; }
#aic-cw {
flex: 1 1 auto; display: flex; align-items: flex-end; gap: 6px;
background: #fff; border: 1px solid #e2dad5; border-radius: 24px; padding: 4px 4px 4px 16px;
}
#aic-cw:focus-within { border-color: #fa4c10; box-shadow: 0 0 0 3px rgba(250,76,16,.16); }
#aic-q {
flex: 1 1 auto; resize: none; border: 0; background: transparent;
padding: 11px 0; font-size: 16px; /* 16px stops iOS zooming on focus */
line-height: 1.4; max-height: 96px; font-family: inherit; color: #222;
}
#aic-q:focus { outline: none; }
#aic-send {
flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
background: #fa4c10; color: #fff; cursor: pointer; font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: background .15s ease;
}
#aic-send:hover { background: #e34410; }
#aic-send:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px rgba(250,76,16,.45); }
#aic-send[disabled] { opacity: .4; cursor: not-allowed; }
#aic-cap { padding: 12px 16px; margin: 0 14px 10px; background: #fff;
border: 1px solid #e8e2de; border-radius: 14px; }
#aic-cap p { font-size: 13px; margin: 0 0 8px; color: #555; }
@media (max-width: 767px) {
#aic-panel {
right: 12px; left: 12px; width: auto;
bottom: calc(var(--aic-b, 12px) + 64px); height: auto; top: 12px; /* full height on a phone */
max-height: none;
}
.aic-col { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
#aic-launch, .aic-chip, .aic-src a, #aic-send, #bug-btn { transition: none; }
#aic-launch:hover, .aic-chip:hover, .aic-src a:hover { transform: none; }
#aic-panel { animation: none; }
.aic-dots span { animation: none; opacity: .6; }
}
</style>
<a id="bug-btn"
href="https://toolspivot.com/ru/report-bug"
rel="nofollow"
title="Сообщить об ошибке"
aria-label="Сообщить об ошибке"
onclick="this.href = this.href.split('?')[0] + '?url=' + encodeURIComponent(window.location.href)">
<i class="fa fa-bug" aria-hidden="true"></i>
<span class="bug-btn-label">Сообщить об ошибке</span>
</a>
<!-- Bug Button End-->
<script>document.documentElement.className += ' aic-hold';</script>
<button id="aic-launch" type="button" aria-expanded="false" aria-controls="aic-panel"
title="Задать вопрос"
aria-label="Задать вопрос">
<i class="fa fa-comment" aria-hidden="true"></i>
</button>
<script>
window.AICHAT_CFG = {
ask: "https:\/\/toolspivot.com\/ai-chat\/ask",
verify: "https:\/\/toolspivot.com\/ai-chat\/captchaverify",
contact: "https:\/\/toolspivot.com\/ai-chat\/contact",
privacy: "https:\/\/toolspivot.com\/ru\/page\/privacy-policy",
lang: "ru",
sitekey: "",
icon: "https:\/\/toolspivot.com\/uploads\/74432335_ToolsPivot Icon.png",
suggest: ["Проверить, работает ли мой сайт","На какой позиции мой запрос?","Проверить авторитет домена","Проверить грамматику"],
t: {"title":"Спросить ToolsPivot","open":"Задать вопрос","close":"Закрыть","intro":"Спросите о любом инструменте ToolsPivot, и я подскажу нужный.","ph":"Задайте вопрос","send":"Отправить","think":"Думаю","err":"Что-то пошло не так. Попробуйте ещё раз.","rate":"Вы достигли лимита вопросов. Попробуйте позже.","src":"Источники","sub":"Ответы на основе страниц ToolsPivot","role":"ИИ-ассистент","note":"Ваш вопрос отправляется ИИ-провайдеру для подготовки ответа. Мы не храним ваши сообщения.","notelnk":"Политика конфиденциальности","notedis":"Скрыть","sugh":"Попробуйте спросить","esc":"Нужна ещё помощь?","escbtn":"Написать нашей команде","cname":"Ваше имя","cmail":"Ваш e-mail","cmsg":"Чем мы можем помочь?","csend":"Отправить сообщение","cok":"Спасибо. Мы получили ваше сообщение и ответим по электронной почте.","cbad":"Введите корректный адрес электронной почты.","copt":"необязательно","cap":"Подтвердите, что вы человек, чтобы продолжить.","capfail":"Проверка не пройдена. Попробуйте ещё раз."}};
</script>
<script src="https://toolspivot.com/theme/smallseo/js/ai-chat.js?v=20260906p" defer></script>
<div class="f_intro_bg text-center">
<form class="navbar-form mn" action="#">
<img src="https://toolspivot.com/theme/smallseo/img/form_subcribe_footer_brand.png?v=1788577768" class="f_icon" alt="" loading="lazy" decoding="async">
<span class="f_text">Подпишитесь на нашу рассылку</span>
<div class="input-group">
<input id="newsletterEmail" name="email" placeholder="Введите адрес электронной почты" class="form-control search_input pl30" type="email">
<div class="input-group-btn">
<button id="newsletterSubscribe" type="submit" class="btn btn-default search_button">Подписаться</button>
</div>
</div>
</form>
</div>
<div class="f_description_bg text-center">
<div class="f_graph">
<div class="container">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 f_logo_box f_contect pn">
<a class="navbar-brand ptn" href="https://toolspivot.com/ru"><img src="https://toolspivot.com/uploads/ToolsPivot Logo Light.png" alt="ToolsPivot" width="398" height="78" loading="lazy" decoding="async" /></a>
<div class="contect_info col-xs-12 pn">
<p>СВЯЗАТЬСЯ С НАМИ</p>
<span>info@toolspivot.com</span>
</div>
<div class="address_info col-xs-12 pn">
<p>АДРЕС</p>
<span>Ward No.1, Nehuta, P.O - Kusha, P.S - Dobhi, Gaya, Bihar, India, 824220</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 lef_to_right_border f_version">
<p>Наши самые популярные инструменты</p>
<a href="https://toolspivot.com/ru/word-counter-tool" title="Word Counter"><div class="ver_img has-fa"><i class="fa fa-file-text-o"></i></div></a>
<a href="https://toolspivot.com/ru/plagiarism-checker" title="Plagiarism Checker"><div class="ver_img has-fa"><i class="fa fa-search"></i></div></a>
<a href="https://toolspivot.com/ru/sitemap-generator-tool" title="Sitemap Generator"><div class="ver_img has-fa"><i class="fa fa-sitemap"></i></div></a>
<a href="https://toolspivot.com/ru/robots-txt-generator" title="Robots.txt Generator"><div class="ver_img has-fa"><i class="fa fa-android"></i></div></a>
<a href="https://toolspivot.com/ru/reverse-image-search" title="Reverse Image Search"><div class="ver_img has-fa"><i class="fa fa-picture-o"></i></div></a>
<a href="https://toolspivot.com/ru/keywords-research-tool" title="Keywords Research"><div class="ver_img has-fa"><i class="fa fa-key"></i></div></a>
<a href="https://toolspivot.com/ru/backlink-maker" title="Backlink Maker"><div class="ver_img has-fa"><i class="fa fa-link"></i></div></a>
<a href="https://toolspivot.com/ru/meta-tag-generator" title="Meta Tag Generator"><div class="ver_img has-fa"><i class="fa fa-tags"></i></div></a>
<a href="https://toolspivot.com/ru/page-speed-checker" title="Page Speed Checker"><div class="ver_img has-fa"><i class="fa fa-tachometer"></i></div></a>
<a href="https://toolspivot.com/ru/article-rewriter-tool" title="Article Rewriter"><div class="ver_img has-fa"><i class="fa fa-pencil-square-o"></i></div></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 f_contect pl30" style="min-height: 230px;">
<div class="mor_pages">
<p>БЫСТРЫЕ ССЫЛКИ</p>
<ul style="list-style:none;margin:0;padding:0;">
<li><a href="https://toolspivot.com/ru">Главная</a></li><li><a href="https://toolspivot.com/ru/page/dmca">Авторские права и DMCA</a></li><li><a href="https://toolspivot.com/ru/page/privacy-policy">Политика конфиденциальности</a></li><li><a href="https://toolspivot.com/ru/page/terms-of-service">Условия обслуживания</a></li><li><a href="https://toolspivot.com/ru/contact">Свяжитесь с нами</a></li><li><a href="https://toolspivot.com/doc/ru">DocPivot</a></li><li><a href="https://toolspivot.com/ru/page/about-us">О нас</a></li> </ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div style="position: relative;">
<div class="container-fluid p10 footer">
<div class="container pn">
<div class="col-md-6 col-sm-12 col-xs-12 text-center pull-right_big">
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="text-center margin0">Авторские права © 2018-2026 ToolsPivot.com. Все права защищены. </p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("body").append('<div class="top">↑</div>'),$(window).scroll(function(){$(this).scrollTop()>220?$(".top").fadeIn(500):$(".top").fadeOut(500)}),$(".top").click(function(a){return a.preventDefault(),$("html, body").animate({scrollTop:0},500),!1})
</script>
<script>
jQuery(document).ready(function(){
jQuery("#newsletterSubscribe").click(function(e) {
e.preventDefault();
var newsletterEmail = jQuery('#newsletterEmail').val();
if (newsletterEmail == '') {
sweetAlert(oopsStr, inputEm, "error");
}else {
jQuery.post(baseUrl + 'newsletter', {subscribe: '1', email: newsletterEmail}, function (data) {
if (data.success)
sweetAlert('Success', data.msg, "success");
else
sweetAlert(oopsStr, data.msg, "error");
});
}
});
});
</script>
<!-- Bootstrap -->
<script src="https://toolspivot.com/theme/smallseo/js/bootstrap.min.js?v=1743851074" type="text/javascript"></script>
<!-- Sweet Alert -->
<script type='text/javascript' src='https://toolspivot.com/theme/smallseo/js/sweetalert.min.js?v=1743851074'></script>
<!-- App JS (self-contained UI: mega-menu, TOC, etc. — safe to defer).
No manual ?v= needed: themeLink() already appends ?v=filemtime, so editing
this file busts the two-month JS cache in .htaccess by itself. -->
<script src="https://toolspivot.com/theme/smallseo/js/app.js?v=1786855079" type="text/javascript" defer></script>
<!-- Navbar mega menus. On every page now, not just /doc/*, because ToolsPivot's
navbar carries All PDF Tools and All Image Tools too. The script returns
immediately when there is no `.dp-mega-wrap` on the page, so anywhere the
menus are absent it costs one querySelectorAll. Deferred: the panels are
plain lists of links until it runs, so nothing is broken in flight. -->
<script src="https://toolspivot.com/theme/smallseo/js/docpivot/megamenu.js?v=1786408068" type="text/javascript" defer></script>
<!-- Master JS -->
<script src="https://toolspivot.com/ru/rainbow/master-js?v=3d84fe0b9a" type="text/javascript"></script>
<!-- XD Box -->
<div class="modal fade loginme" id="xdBox" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id="xdClose" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title" id="xdTitle"></div>
</div>
<div class="modal-body" id="xdContent">
</div>
</div>
</div>
</div>
<script> $("#collapse0").collapse();</script></body>
</html>
<!-- Cookie consent banner — GDPR/ePrivacy compliance. Renders only if no consent cookie set yet. -->
<div id="bvCookieBar" style="display:none;position:fixed;left:0;right:0;bottom:0;background:#1a202c;color:#fff;padding:14px 20px;z-index:9998;box-shadow:0 -2px 12px rgba(0,0,0,0.15);font-size:14px;line-height:1.5;">
<div style="max-width:1200px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
<div style="flex:1;min-width:240px;">
🍪 We use cookies for analytics and ad personalisation. Choose whether to allow non-essential cookies. Essential cookies keep the site working and are always on. See our
<a href="https://toolspivot.com/ru/page/privacy-policy" style="color:#fa4c10;text-decoration:underline;">Privacy Policy</a>.
</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<button type="button" id="bvCookieAccept" style="background:#fa4c10;color:#fff;border:0;padding:9px 18px;border-radius:6px;font-weight:600;cursor:pointer;">Accept all</button>
<button type="button" id="bvCookieDecline" style="background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3);padding:9px 16px;border-radius:6px;font-weight:600;cursor:pointer;">Reject</button>
</div>
</div>
</div>
<script>
(function(){
var COOKIE = 'bv_cookie_consent';
var bar = document.getElementById('bvCookieBar');
// Read consent cookie
function getConsent() {
var m = document.cookie.match(/(?:^|; )bv_cookie_consent=([^;]+)/);
if (!m) return null;
try { return decodeURIComponent(m[1]); } catch (e) { return null; }
}
function setConsent(val) {
var d = new Date(); d.setTime(d.getTime() + 365 * 86400 * 1000);
document.cookie = COOKIE + '=' + val + '; expires=' + d.toUTCString() + '; path=/; SameSite=Lax';
}
if (!getConsent()) {
bar.style.display = '';
}
document.getElementById('bvCookieAccept').addEventListener('click', function(){
setConsent('accepted'); bar.style.display = 'none';
// Optionally re-fire analytics with consent
if (typeof gtag === 'function') gtag('consent', 'update', { ad_storage: 'granted', ad_user_data: 'granted', ad_personalization: 'granted', analytics_storage: 'granted' });
});
document.getElementById('bvCookieDecline').addEventListener('click', function(){
setConsent('declined'); bar.style.display = 'none';
if (typeof gtag === 'function') gtag('consent', 'update', { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied' });
});
})();
</script>