Генератор тегов Open Graph 🔒 Работает локально в браузере — ничего не загружается.
Генерируйте мета-теги Open Graph с живой карточкой предпросмотра ссылки.
Превью ссылки
![]()
Нет изображения Сгенерированные метатеги
Об этом инструменте
Теги Open Graph — это небольшой блок дополнительных ``-тегов в `
` страницы, которые сообщают Facebook, LinkedIn, Discord, Slack и большинству других платформ, как отрисовать превью ссылки, когда кто-то делится URL — какой заголовок, описание и изображение показывать вместо голой ссылки. Без них большинство платформ угадывают на основе собственного `` страницы и первого изображения, что часто выглядит неверно или неполно.</p><p data-astro-cid-zpu62n3h>Этот генератор строит за вас теги `og:title`, `og:description`, `og:url`, `og:image`, `og:type` и опциональный `og:site_name`, с живым превью, приближённо показывающим, как обычно отрисовывается карточка. Поскольку детали отрисовки (обрезка изображения, лимиты символов, поведение кеша) немного различаются между платформами, перед широкой публикацией всё равно стоит проверить итоговый результат с помощью собственного отладчика или инструмента превью целевой платформы — всё здесь выполняется локально в вашем браузере, ничего не загружается.</p> <h2>Частые вопросы</h2> <div class="faq-item"> <h3>Какой размер изображения использовать для og:image?</h3> <p>1200×630px — широко рекомендуемый размер: он хорошо отображается в виде крупной карточки в Facebook, LinkedIn и на большинстве поверхностей предпросмотра ссылок без неудачной обрезки.</p> </div><div class="faq-item"> <h3>Почему мой заголовок/описание показывает предупреждение?</h3> <p>Инструмент помечает заголовки длиннее 60 символов или описания длиннее 200 символов, поскольку большинство платформ обрезают более длинный текст в карточке предпросмотра. Это не блокирующая рекомендация, а не ошибка.</p> </div> </article> <nav class="related" aria-label="Похожие инструменты"> <h2>Похожие инструменты</h2> <div class="tool-grid"> <a class="tool-card" href="/ru/css-gradient-generator/"> <span class="icon">▧</span> <h3>Генератор CSS-градиентов</h3> <p>Создавайте линейные, радиальные и конические градиенты и копируйте CSS.</p> </a><a class="tool-card" href="/ru/box-shadow-generator/"> <span class="icon">❏</span> <h3>Генератор box-shadow</h3> <p>Создавайте многослойные CSS box-shadow с живым превью.</p> </a><a class="tool-card" href="/ru/border-radius-generator/"> <span class="icon">⌒</span> <h3>Генератор border-radius</h3> <p>Создавайте скруглённые углы и органические формы, затем копируйте CSS.</p> </a><a class="tool-card" href="/ru/flexbox-generator/"> <span class="icon">⧉</span> <h3>Генератор Flexbox</h3> <p>Экспериментируйте со свойствами flex и копируйте CSS макета.</p> </a><a class="tool-card" href="/ru/css-variables-generator/"> <span class="icon">🎨</span> <h3>Генератор CSS-переменных</h3> <p>Создайте блок пользовательских CSS-свойств :root из пар имя/значение.</p> </a><a class="tool-card" href="/ru/svg-blob-generator/"> <span class="icon">🫧</span> <h3>Генератор SVG-блобов</h3> <p>Создавайте органичные, случайные формы-блобы как переиспользуемые SVG-контуры.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Какой размер изображения использовать для og:image?","acceptedAnswer":{"@type":"Answer","text":"1200×630px — широко рекомендуемый размер: он хорошо отображается в виде крупной карточки в Facebook, LinkedIn и на большинстве поверхностей предпросмотра ссылок без неудачной обрезки."}},{"@type":"Question","name":"Почему мой заголовок/описание показывает предупреждение?","acceptedAnswer":{"@type":"Answer","text":"Инструмент помечает заголовки длиннее 60 символов или описания длиннее 200 символов, поскольку большинство платформ обрезают более длинный текст в карточке предпросмотра. Это не блокирующая рекомендация, а не ошибка."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Всё работает на стороне клиента. Ваши данные никогда не загружаются.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>