Инженерная энциклопедия Promo-Star • Рубрика: Техническое SEO и CWV • Автор: Алексей Смагин

Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях

⚡ ИНЖЕНЕРНОЕ РЕЗЮМЕ • SLA 2026

Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях: Open Graph — набор meta-тегов в страницы, по которым соцсети и мессенджеры строят карточку-превью ссылки: заголовок, описание, картинку, домен. Без разметки парсер берёт первые попавшиеся title и текст, часто с мусором из навигации. Задача технической оптимизации — отдать краулеру однозначные og:title, og:description, og:image и og:url, чтобы превью выглядело предсказуемо на всех площадках.

Определение: Open Graph — набор meta-тегов в страницы, по которым соцсети и мессенджеры строят карточку-превью ссылки: заголовок, описание, картинку, домен. Без разметки парсер берёт первые попавшиеся title и текст, часто с мусором из навигации. Задача технической оптимизации — отдать краулеру однозначные og:title, og:description, og:image и og:url, чтобы превью выглядело предсказуемо на всех площадках.

1. Архитектура и принцип работы

Краулер мессенджера или соцсети при получении ссылки делает HTTP-запрос, читает и вытаскивает . Приоритет у og-тегов выше, чем у и meta description, но fallback-цепочка у каждой площадки своя. Картинка og:image грузится отдельным запросом — её размер, формат и доступность без авторизации критичны. Дальше превью кешируется: Telegram, WhatsApp, VK, Facebook хранят карточку часами и днями, поэтому правки тегов не видны сразу. Обновление кеша делается через отладчики (Facebook Sharing Debugger, VK-редактор сниппета) или сменой URL-параметра. Для SPA-сайтов теги должны попадать в первичный HTML — рендер на клиенте краулеры превью обычно не выполняют, поэтому нужен SSR или пререндер.</p> <h2 style="font-family:Montserrat,sans-serif; font-size:21px; color:#00d4ff; margin:0 0 12px;" id="wiki-sec-2">2. Математическая механика и триггеры ранжирования</h2> <div data-inline-lead="1" style="margin:30px 0;padding:22px;background:#0b111e;border:1px solid #00d4ff55;border-radius:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;"><div style="flex:1;min-width:240px;"><div style="color:#00d4ff;font-size:11.5px;font-family:monospace;font-weight:700;">⚡ ЭКСПРЕСС-АУДИТ ВАШЕГО ПРОЕКТА ПО SLA</div><div style="color:#fff;font-size:15px;font-weight:700;margin-top:4px;">Проверить ваш домен на ошибки по регламенту этой статьи:</div></div><form onsubmit="var u=this.querySelector('input').value||'не указан';openPromoModal('Аудит домена из статьи: '+u);return false;" aria-label="Экспресс-аудит сайта по SLA" style="display:flex;gap:8px;flex-wrap:wrap;margin:0;"><input type="text" name="domain" aria-label="Ваш сайт (например, site.ru)" placeholder="Ваш сайт (например, site.ru)" style="padding:10px 14px;background:#060911;border:1px solid #334155;color:#fff;border-radius:8px;font-size:13.5px;min-width:210px;"><button type="submit" style="padding:10px 18px;background:#00d4ff;color:#000;border:none;border-radius:8px;font-weight:800;font-size:13px;cursor:pointer;">Рассчитать →</button></form></div> <p style="color:#e2e8f0; font-size:15.5px; line-height:1.8; margin:0 0 22px;">Парсер читает только первые ~1 МБ HTML и не ждёт JS. Ключевые параметры: og:image — рекомендуемый минимум 1200×630 px (соотношение 1.91:1), вес до 1–5 МБ в зависимости от площадки, форматы JPEG/PNG/WebP; Telegram тянет до 5 МБ, VK режет крупные файлы. og:title — до 60–70 символов до обрезки, og:description — 110–160 символов. Обязательный набор: og:title, og:type, og:image, og:url; для товаров — og:price:amount, og:price:currency, og:availability. Правило абсолютных URL: og:image и og:url задаются полным адресом с https, относительные пути часть парсеров игнорирует. og:url должен совпадать с canonical, иначе превью и индексация расходятся. Для языковых версий — og:locale (ru_RU) и og:locale:alternate. Twitter использует twitter:card=summary_large_image и twitter:image как отдельный слой поверх OG.</p> <h2 style="font-family:Montserrat,sans-serif; font-size:21px; color:#00d4ff; margin:0 0 12px;" id="wiki-sec-3">3. Специфика в Яндекс (YATI) vs Google</h2> <p style="color:#e2e8f0; font-size:15.5px; line-height:1.8; margin:0 0 24px;">Google сам OG не использует для поисковой выдачи — там работают title, description и schema.org, но OG важен для Google Discover и карточек в Google-сервисах. Яндекс для сниппетов опирается на свои теги и schema.org, а OG учитывает в Турбо-страницах и при шаринге через Яндекс-сервисы. В соцсетях разница заметнее: ВКонтакте и Telegram читают OG напрямую, Facebook — OG с приоритетом, Twitter — свой twitter:*-слой. Для российского трафика критичны VK и Telegram: у VK свой отладчик сниппета и агрессивный кеш, у Telegram — бот @WebpageBot для сброса. Практический вывод: держим полный OG-набор плюс twitter:card, а schema.org добавляем параллельно — это закрывает и поиск, и соцсети.</p> <h2 style="font-family:Montserrat,sans-serif; font-size:21px; color:#4ade80; margin:0 0 14px;" id="wiki-sec-4">4. Нормативы SLA и диагностическая матрица</h2> <div style="overflow-x:auto; margin-bottom:26px;"><table style="width:100%; border-collapse:collapse; font-size:14px; text-align:left;"><thead><tr style="border-bottom:1px solid rgba(0,160,198,0.35); background:rgba(0,160,198,0.08);"><th style="padding:12px; color:#00d4ff;">Параметр / Метрика</th><th style="padding:12px; color:#4ade80;">Эталон по SLA</th><th style="padding:12px; color:#ff6b81;">Критическая ошибка</th></tr></thead><tbody><tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:12px; font-weight:700; color:#fff;">Наличие полного OG-набора на ключевых шаблонах</td><td style="padding:12px; color:#4ade80;">100% шаблонов</td><td style="padding:12px; color:#ff6b81;"><80% шаблонов</td></tr><tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:12px; font-weight:700; color:#fff;">Размер og:image</td><td style="padding:12px; color:#4ade80;">1200×630 px, до 1 МБ</td><td style="padding:12px; color:#ff6b81;">меньше 600×315 или больше 5 МБ</td></tr><tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:12px; font-weight:700; color:#fff;">HTTP-статус og:image</td><td style="padding:12px; color:#4ade80;">200 без редиректов</td><td style="padding:12px; color:#ff6b81;">403/302/404</td></tr></tbody></table></div> <h2 style="font-family:Montserrat,sans-serif; font-size:21px; color:#4ade80; margin:0 0 12px;" id="wiki-sec-5">5. Пошаговый инженерный протокол внедрения</h2> <ul style="color:#e2e8f0; font-size:15px; line-height:1.75; margin:0 0 24px; padding-left:20px;"><li style="margin-bottom:10px;">Проверить текущий HTML: curl -s URL | grep -i 'og:' — убедиться, что теги в первичном ответе, а не в JS-рендере.</li><li style="margin-bottom:10px;">Прописать обязательный набор og:title, og:description, og:image (1200×630, абсолютный https-URL), og:url, og:type и twitter:card.</li><li style="margin-bottom:10px;">Прогнать ссылку через отладчики: Facebook Sharing Debugger, VK-редактор сниппета, Telegram @WebpageBot — зафиксировать, что превью собирается без ошибок.</li><li style="margin-bottom:10px;">Настроить автогенерацию OG для динамических страниц (шаблоны title/description, дефолтная картинка при отсутствии своей) и мониторить 200-ответ og:image без редиректов на авторизацию.</li></ul> <pre style="background:#06080c; border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:18px; overflow-x:auto; color:#4ade80; font-family:monospace; font-size:13.5px; margin-bottom:24px;"><code><meta property="og:title" content="Купить кофемолку — каталог"> <meta property="og:description" content="Ручные и электрические кофемолки, доставка по РФ."> <meta property="og:image" content="https://example.ru/img/og/coffee-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:url" content="https://example.ru/catalog/kofemolki"> <meta property="og:type" content="website"> <meta property="og:locale" content="ru_RU"> <meta name="twitter:card" content="summary_large_image"> <link rel="canonical" href="https://example.ru/catalog/kofemolki"></code></pre> <h2 style="font-family:Montserrat,sans-serif; font-size:20px; color:#ff6b81; margin:0 0 12px;" id="wiki-sec-6">6. Типичные ошибки при оптимизации</h2> <ul style="font-size:14.5px; line-height:1.75; margin:0 0 28px; padding-left:20px;"><li style="margin-bottom:10px; color:#fca5a5;">OG-теги рендерятся только на клиенте (React/Vue без SSR) — краулер превью видит пустой <head> и строит карточку из мусора.</li><li style="margin-bottom:10px; color:#fca5a5;">og:image отдаёт 403/302 на логин или весит 10 МБ — площадка молча подставляет дефолтную заглушку или не показывает картинку вовсе.</li><li style="margin-bottom:10px; color:#fca5a5;">Правят теги и ждут мгновенного результата, забывая про кеш соцсетей — нужно сбрасывать через отладчик или менять URL-параметр.</li></ul> <div style="background:linear-gradient(90deg,rgba(0,160,198,0.16),rgba(12,16,24,0.95)); border:1px solid rgba(0,160,198,0.4); border-radius:12px; padding:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;"> <div><div style="color:#00d4ff; font-family:monospace; font-size:12px;">ПРОФИЛЬНАЯ УСЛУГА PROMO-STAR</div><div style="font-size:17px; font-weight:800; margin-top:4px;">Внедрим «Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях» на вашем сайте по SLA</div></div> <a href="/tehnicheskaya-optimizaciya/" style="background:#00a0c6; color:#000; font-family:Montserrat,sans-serif; font-weight:800; font-size:13.5px; padding:12px 22px; border-radius:8px; text-decoration:none; text-transform:uppercase;">Услуга: Техническая оптимизация сайта →</a> </div> </article> <section style="margin-bottom:36px;"><h2 style="font-family:Montserrat,sans-serif; font-size:20px; margin:0 0 14px;" id="wiki-sec-7">Частые вопросы по теме</h2><details style="background:#0c1018; border:1px solid rgba(0,160,198,0.25); border-radius:10px; padding:16px 20px; margin-bottom:10px;" open><summary style="color:#00d4ff; font-weight:700; cursor:pointer;">Почему превью в Telegram не обновилось после правки тегов?</summary><p style="color:#cbd5e1; font-size:14px; line-height:1.65; margin:10px 0 0;">Telegram кеширует карточку. Сбросьте через бота @WebpageBot, отправив ему ссылку, или добавьте ?v=2 к URL — новый адрес заставит парсер пересобрать превью.</p></details><details style="background:#0c1018; border:1px solid rgba(0,160,198,0.25); border-radius:10px; padding:16px 20px; margin-bottom:10px;" open><summary style="color:#00d4ff; font-weight:700; cursor:pointer;">Нужен ли OG, если есть schema.org?</summary><p style="color:#cbd5e1; font-size:14px; line-height:1.65; margin:10px 0 0;">Да, это разные потребители. schema.org читают поисковики, OG — соцсети и мессенджеры. Для полного покрытия держите оба слоя: OG для шаринга, schema.org для выдачи.</p></details><details style="background:#0c1018; border:1px solid rgba(0,160,198,0.25); border-radius:10px; padding:16px 20px; margin-bottom:10px;" open><summary style="color:#00d4ff; font-weight:700; cursor:pointer;">Что делать с SPA на React, где теги ставятся через helmet?</summary><p style="color:#cbd5e1; font-size:14px; line-height:1.65; margin:10px 0 0;">Краулеры превью не ждут JS. Нужен SSR (Next.js, Nuxt) или пререндер для ботов — тогда og-теги окажутся в первичном HTML. Проверяется через curl без исполнения JS.</p></details></section> <nav style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;"><span style="color:#cbd5e1; font-size:13px;">Смежные узлы /wiki/:</span><a href="/wiki/chpu-filtry/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">ЧПУ-фильтрация и умные фильтры каталога</a><a href="/wiki/eeat-faktory/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Факторы E-E-A-T и YMYL в Яндексе и Google</a><a href="/wiki/kannibalizaciya-zaprosov/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Каннибализация поисковых запросов</a><a href="/wiki/crawling-budget/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Краулинговый бюджет</a><a href="/wiki/core-web-vitals/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Core Web Vitals</a><a href="/wiki/povedencheskie-faktory/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Поведенческие факторы</a><a href="/wiki/multiregionalnoe-seo/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">Мультирегиональное продвижение</a><a href="/wiki/lsi-semantika/" style="padding:7px 14px; background:#0c1018; border:1px solid rgba(0,160,198,0.3); border-radius:20px; color:#e2e8f0; text-decoration:none; font-size:13px;">LSI-семантика и векторная релевантность</a></nav> <aside data-eeat-author="1" style="max-width:1100px;margin:36px auto 20px;padding:22px 24px;background:rgba(11,17,30,0.92);border:1px solid rgba(0,212,255,0.32);border-left:4px solid #00d4ff;border-radius:12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;"><img src="/assets/images/smagin_avatar.webp" alt="Алексей Смагин — Lead SEO Architect Promo-Star" width="64" height="64" loading="lazy" style="width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #00d4ff;flex-shrink:0;"><div style="flex:1;min-width:240px;"><div style="color:#00d4ff;font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:1px;">Verified SEO Engineering Standard</div><div style="color:#fff;font-size:16.5px;font-weight:800;margin:4px 0;">Автор и научный редактор: <a href="/about/" style="color:#4ade80;text-decoration:none;">Алексей Смагин</a></div><p style="color:#cbd5e1;font-size:13.5px;line-height:1.55;margin:0;">Lead SEO Architect агентства Promo-Star, 12+ лет опыта в проектировании высоконагруженных B2B и E-commerce систем, алгоритмической оптимизации под Яндекс YATI и Google.</p></div></aside> </main> <section data-wiki-bridge="1" style="max-width:1000px;margin:36px auto;padding:24px;background:#080c14;border:1px solid #00d4ff44;border-radius:14px;"><div style="color:#4ade80;font-family:monospace;font-size:12px;font-weight:700;margin-bottom:8px;">🛠 ПРАКТИЧЕСКИЕ ИНСТРУМЕНТЫ PROMO-STAR</div><div style="color:#fff;font-size:17px;font-weight:700;margin-bottom:14px;">Проверьте параметры вашего сайта в бесплатных онлайн-утилитах:</div><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:22px;"><a href="/tools/b2b-industrial-gost-catalog-checker/" style="padding:14px;background:#0f172a;border:1px solid #00d4ff66;border-radius:10px;color:#fff;font-weight:700;font-size:14px;text-decoration:none;">⚡ Чек-лист коммерческих факторов для сайта завода и B2B →</a><a href="/tools/excel-csv-to-html-table-generator/" style="padding:14px;background:#0f172a;border:1px solid #4ade8066;border-radius:10px;color:#fff;font-weight:700;font-size:14px;text-decoration:none;">🧮 Онлайн конвертер таблиц Excel / Google Sheets в красивый HTML-код →</a></div><div style="color:#94a3b8;font-size:13px;font-weight:700;text-transform:uppercase;margin-bottom:10px;">Смежные главы SEO-Энциклопедии:</div><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;"><a href="/wiki/paginaciya-stranic-v-seo/" style="display:block;padding:14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#00d4ff;font-weight:700;font-size:13.5px;text-decoration:none;">📘 Пагинация в SEO: правильная индексация страниц каталога и блога →</a><a href="/wiki/pesochnica-poiskovyh-sistem-sandbox/" style="display:block;padding:14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#00d4ff;font-weight:700;font-size:13.5px;text-decoration:none;">📘 Эффект «Песочницы» (Sandbox) в Яндексе и Google для молодых доменов →</a><a href="/wiki/povedencheskie-faktory/" style="display:block;padding:14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#00d4ff;font-weight:700;font-size:13.5px;text-decoration:none;">📘 Поведенческие факторы (ПФ) и Last Click →</a></div></section> <div data-info-hub-ring="1" style="max-width:1000px;margin:20px auto;padding:18px;background:#080c14;border:1px solid #1e293b;border-radius:12px;"><div style="color:#94a3b8;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:10px;">Профильные услуги и отраслевые решения Promo-Star:</div><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;"><a href="/seo-audit/" style="display:block;padding:11px 14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#4ade80;font-weight:700;font-size:13px;text-decoration:none;">🚀 Комплексный SEO-аудит сайта →</a><a href="/seo-avtozapchastey/" style="display:block;padding:11px 14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#4ade80;font-weight:700;font-size:13px;text-decoration:none;">🚀 Продвижение магазина автозапчастей и шин →</a><a href="/seo-dlya-avtoservisa/" style="display:block;padding:11px 14px;background:#0c1322;border:1px solid #1e293b;border-radius:8px;color:#4ade80;font-weight:700;font-size:13px;text-decoration:none;">🚀 Продвижение автосервиса, СТО и детейлинга →</a></div></div> </main> <footer class="glass-footer"> <div class="footer-content" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 15px;"> <div class="footer-col"> <div class="f-title">Promo-Star Engine</div> <p>Инженерное SEO и веб-аналитика. Изолируем случайности, масштабируем результат.</p> </div> <div class="footer-col"> <div class="f-title">SEO по нишам</div> <p><a href="../../seo-dlya-internet-magazinov/">Интернет-магазины</a></p> <p><a href="../../seo-dlya-b2b/">B2B и Производства</a></p> <p><a href="../../meditsinskoe-seo/">Медицинские клиники</a></p> <p><a href="../../seo-dlya-nedvizhimosti/">Недвижимость</a></p> <p><a href="../../seo-dlya-uslug/">Сфера услуг</a></p> </div> <div class="footer-col"> <div class="f-title">CMS и Регионы</div> <p><a href="../../seo-dlya-tilda/">Продвижение на Tilda</a></p> <p><a href="../../seo-dlya-wordpress/">Продвижение WordPress</a></p> <p><a href="../../seo-dlya-bitrix/">SEO для 1С-Битрикс</a></p> <p><a href="../../seo-dlya-opencart/">Оптимизация OpenCart</a></p> <p style="margin-top: 8px;"><a href="../../cities/" style="color: #00d4ff; font-weight: bold;">🌎 Все 66 регионов РФ</a></p> <p><a href="../../tools/" style="color: #4ade80; font-weight: bold;">🛠 SEO-Инструменты</a> <a href="/cases/" style="color:#00e676; text-decoration:none; font-weight:bold; display:block; margin-top:8px;">📊 Кейсы клиентов</a></p> </div> <div class="footer-col"> <div class="f-title">Связь с нами</div> <p><a href="tel:+79919077751"><i class="fa-solid fa-phone" style="width: 20px; color: var(--primary);"></i> +7-991-90-777-51</a></p> <p><a href="mailto:shtalder@ya.ru"><i class="fa-solid fa-envelope" style="width: 20px; color: var(--primary);"></i> shtalder@ya.ru</a></p> <p><a href="https://t.me/+79919077751" rel="noopener nofollow" target="_blank" rel="noopener"><i class="fa-brands fa-telegram" style="width: 20px; color: var(--primary);"></i> Написать в Telegram</a></p> <p><a href="https://max.ru/u/f9LHodD0cOKd020kE7qaPZZze6fRvOn09UvkWxXlfSmMPOkyQMEjPtnjVho" rel="noopener nofollow" target="_blank" rel="noopener"><i class="fa-solid fa-comments" style="color: #00d4ff; width: 20px;"></i> Написать в MAX</a></p> <p><a href="https://vk.com/vochupa" rel="noopener nofollow" target="_blank" rel="noopener"><i class="fa-brands fa-vk" style="color: #00a0c6; width: 20px;"></i> ВКонтакте</a></p> <p><a href="../../contacts/"><i class="fa-solid fa-address-card" style="width: 20px; color: var(--primary);"></i> Все контакты</a></p> </div> </div> <div class="footer-bottom"> © 2019-<span id="cyear">2026</span> Promo-Star. Все права защищены. Разработано на детерминированных алгоритмах. </div> <div style="text-align:center;margin-top:14px;font-size:12px;opacity:0.75;"><a href="/privacy/" style="color:#94a3b8;text-decoration:underline;">Политика конфиденциальности и обработки персональных данных (152-ФЗ)</a></div></footer>  <script> window.addEventListener('load', function() { const canvas = document.getElementById('cyber-network'); if (!canvas) return; const ctx = canvas.getContext('2d'); let width = canvas.width = window.innerWidth || document.documentElement.clientWidth || 1440; let height = canvas.height = window.innerHeight || document.documentElement.clientHeight || 900; const isMobile = width < 768; const count = isMobile ? 28 : Math.min(95, Math.max(65, Math.floor((width * height) / 22000))); const maxDist = isMobile ? 115 : 140; const mouseRadius = 175; const mouse = { x: null, y: null, active: false }; let particles = []; function initParticles() { particles = []; for (let i = 0; i < count; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.55, vy: (Math.random() - 0.5) * 0.55 }); } } initParticles(); function renderScene(stepPhysics) { ctx.clearRect(0, 0, width, height); ctx.lineWidth = 0.6; for (let i = 0; i < particles.length; i++) { let p = particles[i]; if (stepPhysics) { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > width) p.vx *= -1; if (p.y < 0 || p.y > height) p.vy *= -1; if (mouse.active && mouse.x !== null) { let dx = mouse.x - p.x; let dy = mouse.y - p.y; let mDist = Math.hypot(dx, dy); if (mDist < mouseRadius && mDist > 5) { p.x += (dx / mDist) * 0.65; p.y += (dy / mDist) * 0.65; } } } ctx.fillStyle = '#00d4ff'; ctx.beginPath(); ctx.arc(p.x, p.y, 1.6, 0, Math.PI * 2); ctx.fill(); for (let j = i + 1; j < particles.length; j++) { let p2 = particles[j]; let dist = Math.hypot(p.x - p2.x, p.y - p2.y); if (dist < maxDist) { ctx.strokeStyle = `rgba(0, 160, 198, ${(1 - dist / maxDist) * 0.65})`; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); } } if (mouse.active && mouse.x !== null) { let mDist = Math.hypot(p.x - mouse.x, p.y - mouse.y); if (mDist < mouseRadius) { ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - mDist / mouseRadius) * 0.85})`; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); } } } } renderScene(false); let animRunning = false; function loop() { renderScene(true); requestAnimationFrame(loop); } function startAnim() { if (!animRunning) { animRunning = true; loop(); } } window.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; mouse.active = true; startAnim(); }, { passive: true }); window.addEventListener('mouseleave', function() { mouse.active = false; }, { passive: true }); ['scroll', 'touchstart'].forEach(ev => window.addEventListener(ev, startAnim, { once: true, passive: true })); window.addEventListener('resize', function() { let oldW = width, oldH = height; width = canvas.width = window.innerWidth || document.documentElement.clientWidth; height = canvas.height = window.innerHeight || document.documentElement.clientHeight; if (oldW > 0 && oldH > 0) { for (let i = 0; i < particles.length; i++) { particles[i].x = (particles[i].x / oldW) * width; particles[i].y = (particles[i].y / oldH) * height; } } if (!animRunning) renderScene(false); }, { passive: true }); }); </script>  <div id="promo-modal" style="display: flex; visibility: hidden; opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2147483647 !important; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: opacity 0.3s ease, visibility 0.3s ease;"> <div style="position: relative; width: 100%; max-width: 450px; margin: 20px; transform: scale(0.95); transition: transform 0.3s ease; background: #111111; border: 1px solid rgba(0, 160, 198, 0.4); border-radius: 16px; padding: 40px 20px 20px; box-shadow: 0 15px 50px rgba(0, 160, 198, 0.2); text-align: center; overflow: hidden;" id="promo-modal-content"> <button onclick="closePromoModal()" aria-label="Закрыть окно" style="position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: #cbd5e1; font-size: 28px; cursor: pointer; z-index: 2147483647; line-height: 1;">×</button> <div style="color: #ffffff; font-size: 24px; font-weight: 600; text-transform: uppercase; margin: 0 0 10px; position: relative; z-index: 2;">Оставить заявку</div> <div id="promo-modal-context" style="display: none; background: rgba(0, 160, 198, 0.15); border: 1px solid rgba(0, 212, 255, 0.4); color: #00d4ff; font-size: 12px; font-family: monospace; padding: 6px 12px; border-radius: 6px; margin: 0 auto 12px; position: relative; z-index: 2;"></div> <p style="color: #cbd5e1; font-size: 14px; margin-bottom: 25px; position: relative; z-index: 2;">Заполните форму, и наш эксперт свяжется с вами.</p> <div style="position: relative; z-index: 2; overflow: hidden; border-radius: 8px;"> <div style="margin-bottom: -85px;" id="ya-form-holder"> <iframe id="ya-form-iframe" title="Форма заявки Promo-Star" data-src="https://forms.yandex.ru/u/6a35f7dd50569015da0e1919?iframe=1" frameborder="0" name="ya-form-6a35f7dd50569015da0e1919" width="100%" style="display: block; width: 100%; min-height: 360px; border: none; background: transparent;" allowtransparency="true"></iframe> </div> </div> </div> </div> <script> var yaFormLoaded = false; function openPromoModal(contextTitle) { var ifr = document.getElementById('ya-form-iframe'); if (ifr && !yaFormLoaded) { yaFormLoaded = true; var s = document.createElement('script'); s.src = 'https://forms.yandex.ru/_static/embed.js'; s.async = true; document.body.appendChild(s); ifr.src = ifr.getAttribute('data-src'); } var ctxEl = document.getElementById('promo-modal-context'); if (ctxEl) { if (contextTitle) { ctxEl.textContent = contextTitle; ctxEl.style.display = 'inline-block'; } else { ctxEl.style.display = 'none'; } } var modal = document.getElementById('promo-modal'); var content = document.getElementById('promo-modal-content'); if (!modal) return; if (modal.parentNode !== document.body) document.body.appendChild(modal); modal.style.visibility = 'visible'; modal.style.opacity = '1'; modal.style.pointerEvents = 'auto'; content.style.transform = 'scale(1)'; document.body.style.overflow = 'hidden'; } function closePromoModal() { var modal = document.getElementById('promo-modal'); var content = document.getElementById('promo-modal-content'); if (!modal) return; modal.style.opacity = '0'; modal.style.pointerEvents = 'none'; content.style.transform = 'scale(0.95)'; document.body.style.overflow = ''; setTimeout(function() { modal.style.visibility = 'hidden'; }, 300); } document.getElementById('promo-modal').addEventListener('click', function(e) { if(e.target === this) closePromoModal(); }); </script> <script> (function() { var mediaLoaded = false; function loadDeferredMedia() { if (mediaLoaded) return; mediaLoaded = true; document.querySelectorAll('img[data-src]').forEach(function(img) { img.src = img.getAttribute('data-src'); img.removeAttribute('data-src'); }); document.querySelectorAll('[data-bg]').forEach(function(el) { el.style.backgroundImage = "url('" + el.getAttribute('data-bg') + "')"; el.removeAttribute('data-bg'); }); } if (window.innerWidth > 960) { window.addEventListener('DOMContentLoaded', function(){ loadDeferredMedia(); if(typeof loadFA==='function') loadFA(); }); } else { ['scroll', 'touchstart', 'mousemove', 'click'].forEach(function(ev) { window.addEventListener(ev, loadDeferredMedia, { once: true, passive: true }); }); } })(); </script> <div id="seo-regions-footer" style="background: #000; padding: 20px; text-align: center; border-top: 1px solid #111; font-family: sans-serif; width: 100%; position: relative; z-index: 9999; clear: both;"> <div style="max-width: 1200px; margin: 0 auto;"> <details style="cursor: pointer; outline: none;"> <summary style="color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">Показать все города (67)</summary> <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 15px; margin-top: 15px;"> <a href="https://promo-star.ru/barnaul/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Барнаул</a><a href="https://promo-star.ru/chelyabinsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Челябинск</a><a href="https://promo-star.ru/ekaterinburg/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Екатеринбург</a><a href="https://promo-star.ru/irkutsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Иркутск</a><a href="https://promo-star.ru/izhevsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Ижевск</a><a href="https://promo-star.ru/khabarovsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Хабаровск</a><a href="https://promo-star.ru/krasnodar/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Краснодар</a><a href="https://promo-star.ru/krasnoyarsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Красноярск</a><a href="https://promo-star.ru/kazan/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Казань</a><a href="https://promo-star.ru/nizhniy-novgorod/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Нижний Новгород</a><a href="https://promo-star.ru/novosibirsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Новосибирск</a><a href="https://promo-star.ru/omsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Омск</a><a href="https://promo-star.ru/perm/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Пермь</a><a href="https://promo-star.ru/rostov-na-donu/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Ростов-на-Дону</a><a href="https://promo-star.ru/saratov/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Саратов</a><a href="https://promo-star.ru/samara/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Самара</a><a href="https://promo-star.ru/sankt-peterburg/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Санкт-Петербург</a><a href="https://promo-star.ru/tolyatti/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Тольятти</a><a href="https://promo-star.ru/tyumen/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Тюмень</a><a href="https://promo-star.ru/ufa/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Уфа</a><a href="https://promo-star.ru/volgograd/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Волгоград</a><a href="https://promo-star.ru/voronezh/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Воронеж</a><a href="https://promo-star.ru/tula/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Тула</a><a href="https://promo-star.ru/ryazan/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Рязань</a><a href="https://promo-star.ru/tver/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Тверь</a><a href="https://promo-star.ru/kaluga/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Калуга</a><a href="https://promo-star.ru/vladimir/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Владимир</a><a href="https://promo-star.ru/yaroslavl/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Ярославль</a><a href="https://promo-star.ru/belgorod/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Белгород</a><a href="https://promo-star.ru/kaliningrad/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Калининград</a><a href="https://promo-star.ru/sochi/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Сочи</a><a href="https://promo-star.ru/stavropol/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Ставрополь</a><a href="https://promo-star.ru/astrakhan/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Астрахань</a><a href="https://promo-star.ru/penza/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Пенза</a><a href="https://promo-star.ru/lipetsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Липецк</a><a href="https://promo-star.ru/kirov/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Киров</a><a href="https://promo-star.ru/cheboksary/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Чебоксары</a><a href="https://promo-star.ru/kursk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Курск</a><a href="https://promo-star.ru/tomsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Томск</a><a href="https://promo-star.ru/kemerovo/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Кемерово</a><a href="https://promo-star.ru/novokuznetsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Новокузнецк</a><a href="https://promo-star.ru/orenburg/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Оренбург</a><a href="https://promo-star.ru/ivanovo/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Иваново</a><a href="https://promo-star.ru/bryansk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Брянск</a><a href="https://promo-star.ru/magnitogorsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Магнитогорск</a><a href="https://promo-star.ru/makhachkala/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Махачкала</a><a href="https://promo-star.ru/ulan-ude/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Улан-Удэ</a><a href="https://promo-star.ru/chita/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Чита</a><a href="https://promo-star.ru/smolensk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Смоленск</a><a href="https://promo-star.ru/kurgan/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Курган</a><a href="https://promo-star.ru/orel/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Орел</a><a href="https://promo-star.ru/vologda/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Вологда</a><a href="https://promo-star.ru/cherepovets/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Череповец</a><a href="https://promo-star.ru/vladikavkaz/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Владикавказ</a><a href="https://promo-star.ru/murmansk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Мурманск</a><a href="https://promo-star.ru/surgut/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Сургут</a><a href="https://promo-star.ru/tambov/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Тамбов</a><a href="https://promo-star.ru/petrozavodsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Петрозаводск</a><a href="https://promo-star.ru/kostroma/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Кострома</a><a href="https://promo-star.ru/nizhnevartovsk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Нижневартовск</a><a href="https://promo-star.ru/novorossiysk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Новороссийск</a><a href="https://promo-star.ru/taganrog/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Таганрог</a><a href="https://promo-star.ru/syktyvkar/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Сыктывкар</a><a href="https://promo-star.ru/nalchik/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Нальчик</a><a href="https://promo-star.ru/pskov/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Псков</a><a href="https://promo-star.ru/blagoveshchensk/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Благовещенск</a><a href="https://promo-star.ru/" style="color: #cbd5e1; text-decoration: none; font-size: 11px; white-space: nowrap;">Москва</a> </div> </details> </div> </div> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "Organization", "name": "Promo-Star", "url": "https://promo-star.ru/", "telephone": "+7-991-90-777-51", "contactPoint": {"@type": "ContactPoint", "telephone": "+7-991-90-777-51", "contactType": "customer service", "areaServed": "RU", "availableLanguage": "Russian"}}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@graph": [{"@type": "ProfessionalService", "@id": "https://promo-star.ru/wiki/open-graph-mikrorazmetka/#localbusiness", "name": "Веб-студия Promo-Star (Москва)", "url": "https://promo-star.ru/wiki/open-graph-mikrorazmetka/", "telephone": "+7-991-90-777-51", "address": {"@type": "PostalAddress", "addressLocality": "Москва", "addressCountry": "RU"}, "priceRange": "от 55500 RUB"}]}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@graph": [{"@type": "Person", "@id": "https://promo-star.ru/#founder", "name": "Алексей Смагин", "jobTitle": "Lead SEO Architect"}]}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@graph": [{"@type": "DefinedTerm", "@id": "https://promo-star.ru/wiki/open-graph-mikrorazmetka/#term", "name": "Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях", "description": "Open Graph — набор meta-тегов в <head> страницы, по которым соцсети и мессенджеры строят карточку-превью ссылки: заголовок, описание, картинку, домен. Без разметки парсер берёт первые попавшиеся title и текст, часто с мусором из навигации. Задача технической оптимизации — отдать краулеру однозначные og:title, og:description, og:image и og:url, чтобы превью выглядело предсказуемо на всех площадках.", "inDefinedTermSet": "https://promo-star.ru/wiki/"}, {"@type": "TechArticle", "headline": "Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях", "image": "https://promo-star.ru/assets/img/wiki/open-graph-mikrorazmetka.webp", "author": {"@type": "Person", "name": "Алексей Смагин", "jobTitle": "Lead SEO Architect"}, "mainEntityOfPage": "https://promo-star.ru/wiki/open-graph-mikrorazmetka/"}]}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Главная", "item": "https://promo-star.ru/"}, {"@type": "ListItem", "position": 2, "name": "Микроразметка Open Graph: управление превью ссылок в мессенджерах и соцсетях", "item": "https://promo-star.ru/wiki/open-graph-mikrorazmetka/"}]}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Почему превью в Telegram не обновилось после правки тегов?", "acceptedAnswer": {"@type": "Answer", "text": "Telegram кеширует карточку. Сбросьте через бота @WebpageBot, отправив ему ссылку, или добавьте ?v=2 к URL — новый адрес заставит парсер пересобрать превью."}}, {"@type": "Question", "name": "Нужен ли OG, если есть schema.org?", "acceptedAnswer": {"@type": "Answer", "text": "Да, это разные потребители. schema.org читают поисковики, OG — соцсети и мессенджеры. Для полного покрытия держите оба слоя: OG для шаринга, schema.org для выдачи."}}, {"@type": "Question", "name": "Что делать с SPA на React, где теги ставятся через helmet?", "acceptedAnswer": {"@type": "Answer", "text": "Краулеры превью не ждут JS. Нужен SSR (Next.js, Nuxt) или пререндер для ботов — тогда og-теги окажутся в первичном HTML. Проверяется через curl без исполнения JS."}}]}</script> <script> window.addEventListener('message', function(event) { if (event.origin && event.origin.indexOf('forms.yandex') !== -1) { let data = {}; try { data = JSON.parse(event.data); } catch(e) { data = event.data; } if (data === 'form-submit-success' || (data && data.type === 'yandex-form-submit')) { if (typeof ym !== 'undefined') { ym(54521293, 'reachGoal', 'LEAD'); } let ctx = document.getElementById('promo-modal-context'); if (ctx) { ctx.textContent = "✅ Заявка успешно отправлена!"; ctx.style.display = "inline-block"; ctx.style.background = "rgba(16,185,129,0.15)"; ctx.style.color = "#4ade80"; ctx.style.borderColor = "#10b981"; } if (typeof closePromoModal === 'function') { setTimeout(closePromoModal, 2500); } } } }); </script> </body> </html>