Русский
Создавайте теги Open Graph и Twitter Card с живым предпросмотром.
Последнее обновление
Рекомендуется 1200×630, до 8 МБ, абсолютный URL (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<title>Learn to code by doing — Coddy</title> <meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <link rel="canonical" href="https://coddy.tech" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Learn to code by doing — Coddy" /> <meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://coddy.tech" /> <meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta property="og:image:alt" content="Coddy — Learn to code by doing" /> <meta property="og:site_name" content="Coddy" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Learn to code by doing — Coddy" /> <meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta name="twitter:image:alt" content="Coddy — Learn to code by doing" /> <meta name="twitter:site" content="@coddy_tech" />
Когда вы делитесь ссылкой в любом современном приложении — пост, личка, канал в Slack — платформа подтягивает URL и достаёт из него небольшой кусок метаданных, чтобы отрисовать *share-карточку*: заголовок, описание, картинку и имя сайта. Эти метаданные берутся не из видимой страницы; они лежат в конкретном наборе <meta>-тегов в <head>. Большую их часть определяет протокол Open Graph, придуманный Facebook ещё в 2010 году. X (бывший Twitter) добавляет к ним свои с префиксом twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp и Pinterest читают те же теги с небольшими отличиями.
Настроить эти теги нужно один раз на страницу, но влияние у них непропорционально большое. Страница без Open Graph картинки в шеринге выглядит сломанной. Слишком длинный заголовок обрезается на середине слова. Неправильное соотношение сторон у og:image приводит к чёрным полям на любой платформе. Этот инструмент позволяет крутить значения с живым предпросмотром, чтобы увидеть обрезку и кропы *до* того, как страница уйдёт в продакшен.
Всё работает локально. Состояние формы, превью и сгенерированный HTML не покидают браузер — можно спокойно вставлять преданонсные URL и неопубликованный текст, не опасаясь утечек.
property (<meta property="og:title">), а стандартные SEO-теги и Twitter Card — name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) и Twitter (twitter:title, twitter:description).og:image должен быть 1200×630, отдаваться по HTTPS и указываться абсолютным URL — относительные пути не работают, когда страницу забирает чужой сервер.Ориентируйтесь на 50–60 символов. Facebook обрезает примерно на 95 символах, X — на 70. На первом месте ставьте ценность, а не бренд — «Как задеплоить через Cloudflare Workers» работает лучше, чем «Блог Coddy · Гайд по деплою».
Целитесь в 120–155 символов. Большинство платформ обрезают примерно на 200. Пишите законченными предложениями — описание появляется под заголовком в каждой карточке, а обрубки выглядят незавершённо.
Используйте абсолютный URL страницы на https://, а не трекинговую или редирект-ссылку. Краулеры Open Graph идут по og:url при дедупликации шеринга — канонический URL держит счётчики и превью согласованными.
1200×630 — оптимальный размер для карточек summary_large_image в X и стандартных карточек в Facebook и LinkedIn. PNG или JPEG, до ~5 МБ. Всегда абсолютный URL — относительные пути не работают, потому что краулер соцсети ходит по URL со своего сервера.
Возьмите блок из панели **Сгенерированные <head>-теги** и вставьте в <head> своей страницы. После деплоя проверьте каждый дебаггером платформы (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) и при смене картинки принудительно запустите рескан.
Теги ниже покрывают всё, что сегодня читают соцплатформы. Теги с property= — это протокол Open Graph; теги с name= — стандартные SEO / Twitter Card. Спецификации: Open Graph, X Cards.
| Тег | Где используется | Рекомендация | Комментарий |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50–60 символов | Если отсутствует, берётся <title> — лучше задать явно. |
og:description | FB, LinkedIn, Slack, Discord | 120–155 символов | Если отсутствует, берётся meta description. |
og:image | Все платформы | 1200×630, < 5 МБ, HTTPS, абсолютный URL | Должен быть абсолютным URL — относительные пути не работают. |
og:image:alt | Доступность | Опишите изображение | Читается скринридерами и некоторыми платформами. |
og:url | FB, LinkedIn | Канонический https://-URL | Используется для дедупликации шеринга при разных query-параметрах. |
og:type | FB, LinkedIn | website или article | article открывает доступ к article:published_time, article:author. |
og:site_name | FB, Discord | Имя бренда | Показывается как мелкая атрибуция над/под карточкой. |
twitter:card | X | summary_large_image | summary — маленький квадратный thumbnail, summary_large_image — баннерная раскладка. |
twitter:title | X | Как og:title | Если отсутствует, X берёт og:title — лучше задать оба. |
twitter:description | X | Как og:description | Если отсутствует, берётся og:description. |
twitter:image | X | Как og:image | Если отсутствует, берётся og:image. |
twitter:site | X | @yourbrand | Аккаунт издателя в X — влияет на часть аналитики. |
Установите **og:type** в article, заполните **Автор** и **Время публикации** в секции для статей и возьмите обложку 1200×630. Превью обновятся и покажут, как карточка будет выглядеть на каждой платформе.
og:type=article открывает доступ к тегам, специфичным для статей (article:published_time, article:author), которые часть платформ (Discord, LinkedIn) использует, чтобы показать атрибуцию. Twitter их игнорирует, но не ругается.
Оставьте **og:type** как website. В заголовок поставьте имя продукта, в описание — одну фразу о ценности, в картинку — герой или скриншот.
Лендингам метаданные статьи не нужны. Самый кликабельный элемент на share-карточке лендинга обычно — изображение, поэтому вложитесь в чистый визуал 1200×630.
Заголовок: "Концепция — Раздел · Docs". Описание: одно предложение, объясняющее концепцию. Картинка: общая обложка документации или скриншот нужного UI.
Доками делятся в каналах Slack и тредах X. Единая обложка документации помогает узнать их в плотной ленте даже до того, как пользователь прочитает заголовок.
og:image вроде /images/cover.png. Соцкраулеры ходят на страницу со *своих* серверов — относительные пути упираются в домен самой платформы и дают 404. Всегда используйте абсолютный https:// URL.twitter:card. Без него X показывает минимальную карточку без картинки. Добавьте twitter:card=summary_large_image, чтобы получить баннерную раскладку, которую обычно и хотят бренды.og:image:alt. Он ничего не стоит, помогает пользователям скринридеров, а часть платформ показывает его как alt-текст готовой карточки.<meta>-тегов: заголовок, описание, картинка, тип и так далее. Сегодня его читает каждая крупная социальная и мессенджер-платформа, поэтому он стал де-факто стандартом для метаданных share-карточек.twitter:-тегов фолбэкается на эквивалентные og:-теги, так что технически можно обойтись только Open Graph. Но twitter:card, twitter:site и twitter:creator дают более тонкий контроль над тем, как карточка отрисуется в X.<title> и meta description. Иногда Google подхватывает og:image для поиска по картинкам и поверхностей Discover, но это не сигнал ранжирования.