Худшее время для обнаружения превью сломанной ссылки после запуска твит Вы проводите неделю на странице, вы пишете объявление, вы нажимаете отправить - и карта, которая появляется серый прямоугольник с усеченным заголовком и без изображения, потому что og:image направленный на /images/og.png вместо https://yoursite.com/images/og.png, йо- Пост уже вышел. Карта уже заквашалась. Вы можете исправить это, а затем просить всех пересказать.
выше открытый график предварительный просмотр решает, что, перемещая чек раньше. вместо публикации и надежд, вы смотрите на то, что будет карта, пока теги еще редактируются. это вся предпосылка Открыть предварительный просмотр графика Инструмент: введите свои теги или вставьте те, которые у вас уже есть, и см. приблизительные карты Facebook, X, LinkedIn, Slack и Discord, отображаемые вместе с вердиктом «Преход/предупреждение/неудача» по каждому полю.
Причина, по которой одного предварительного просмотра недостаточно, заключается в том, что каждая платформа читает одни и те же теги и отображает их по-разному. x Уселяет описания примерно 110 символов, Facebook показывает ближе к 155. LinkedIn часто полностью отбрасывает описание и показывает только изображение, заголовок и домен. Slack сворачивает все это в компактное навесное оборудование с цветной рейкой. Discord встраивает описание на видно, но сжимает изображение. Заголовок, который прекрасно вписывается в карточку Facebook, может быть вырезан на середине слова на X, и вы никогда не заметите, пока не посмотрите на оба.
я строю Toolz.dev и отправлять страницы постоянно, и мне надоел цикл публикации-проверки-исправления. инструмент полностью работает в браузере и вообще не делает сетевых вызовов - он никогда не получает ваш URL-адрес - а это значит, что он также работает для страниц, которые еще не развернуты, сидят за логином или живут на промежуточном домене, до которого не могут добраться официальные отладчики платформы.
TL;DR: Теги Open Graph управляют тем, как выглядит ваша ссылка, когда она используется. Каждая платформа читает одинаково
og:Теги, но усечиваются и излагают их по-разному, поэтому предварительный просмотр одной платформы ничего не говорит вам о других. выше Открыть предварительный просмотр графика Инструмент рендерит пять карт платформы из одного набора тегов, проверяет каждое поле в соответствии с текущими ограничениями платформы, анализирует существующий блок тегов, если он у вас уже есть, и вручает вам копию-готовую<meta>блок - все на стороне клиента, без царапин и загрузки.
Основные характеристики
Пять превью платформы из одного набора тегов
Инструмент отображает приблизительные карты для Facebook, X в обоих summary_large_image а summary стили, LinkedIn, Slack, и Discord. все они читают из одних полей, поэтому, когда вы обрезаете заголовок вы смотрите, как он обновляется везде сразу. дело не в идеальной для пикселей точности - платформы перепроектируют свои карты без предупреждения - но относительной точности: правильные пропорции, правильные точки усечения, правильный порядок полей, так что вы можете видеть, какая платформа является той, которая ломается.
Вставьте и разберите теги, которые у вас уже есть
Если страница существует, редко хочется перепечатать девять полей Вставить необработанный HTML - целое <head>, дамп источника представления или Свободный блок <meta> линии - в ящик для разбора и встроенный парсер вытаскивает каждый og: а twitter: Tag its распознает и загружает их в форму. Парсер основан на регулярных выражениях, а не на базе DOM, что позволяет тому же коду работать в браузере, в узле и в сборке рабочего стола без изменений.
Валидация за полем с реальными ограничениями
Каждое поле получает статус пропуска, предупреждения или сбоя. Заголовок более 60 символов не удался. Описание предупреждает, что оно полностью читается на Facebook и LinkedIn, но на X. og:image путь проваливается вчистую - скребки их не разрешают. ан og:image подается над равниной http Предупреждает, потому что несколько платформ отказываются от рендеринга изображений, не связанных с HTTPS. равняется twitter:site Значение, которое не является допустимым дескриптором, не работает. Вердикты достаточно специфичны, чтобы действовать, а не обычные «выглядят нормально».
Правила изображения, которым вы можете следовать
Карты с большим изображением на каждой крупной платформе принимают изображение 1,91:1; 1200x630 пикселей - это размер, который удовлетворяет всем из них одновременно. Инструмент заявляет, что цель явно, отмечает режимы сбоя, которые заставляют изображения молча исчезать, и - поскольку карта с разбитым изображением является единственной наиболее распространенной ошибкой Open Graph - отображает вашу действительную информацию og:image URL-адрес в каждом предварительном просмотре, возвращаясь к прозрачному заполнителю, если изображение не может загрузиться.
Копируемый, правильно избежавшийся мета-блок
Сгенерированный вывод представляет собой полный блок тега, а не фрагмент. в него входит og:image:width а og:image:height, что важнее, чем большинство людей: без них некоторые скребки отрисовывают только текстовую карту на первой выборке и показывают изображение только после того, как они скачали и измерили его, что может быть через несколько часов. Значения изменяются в формате HTML, поэтому амперсанд или цитата в вашем описании не могут выйти из атрибута и повредить вашу разметку.
100% клиентская, без соскальзывания
Инструмент никогда не запрашивает ваш URL-адрес. Это намеренно, и стоит понять, почему: браузер не может получить произвольную стороннюю страницу из-за политики одного и того же происхождения, а выборка на стороне сервера будет означать отправку ваших неизданных URL-адресов кому-то другому. Журналы 's. Работа с предоставленными вами тегами устраняет как проблемы, так и открывает случай, который официальные отладчики не могут обслуживать - проверка страницы, которая еще не существует. См Конфиденциальность данных в онлайн-инстру для более широкого рассуждения.
Как использовать инструмент предварительного просмотра Open Graph
Шаг 1: Загрузите теги
У вас есть два пути. Если вы пишете метаданные с нуля, заполните форму: og:title, og:description, og:image, og:url, og:site_name, затем выбрать og:type и а twitter:card стиль и добавьте свой twitter:site а twitter:creator ручки.
Если на странице уже есть теги, вставьте их вместо.Откройте страницу, просмотрите исходный код (не инспектор браузера - подробнее об этом различии ниже), скопируйте <head>, и поместите его в поле Parse. Нажмите «Теги синтаксического анализа», и все, что распознаваемое, загружается в форму. Парсер тоже понимает псевдонимы: og:image:secure_url а og:image:url Оба передают поле изображения и twitter:title, twitter:description, и twitter:image используются в качестве резервных, когда их og: эквиваленты отсутствуют, что отражает то, как сами платформы разрешают теги.
Шаг 2: Прочитайте панель проверки
Список проверки упорядочивается так, как имеют значение поля. Сначала исправьте сбои: отсутствует og:image, относительный путь изображения, название на 20 символов выше лимита. Затем посмотрите на предупреждения, которые в основном касаются разрыва между платформами - описание, которое подходит для Facebook, но длинное для X, отсутствует og:site_name Это означает, что ваша карта показывает голое имя хоста вместо вашего бренда.
Счетчики в верхней части панели дают вам быстрое чтение. Ноль не удается, а пара предупреждений — это состояние, которое можно доставить, предупреждения — это компромиссы, а не ошибки.
Шаг 3: Сравните карты
Это шаг люди пропускают, и это тот, который улавливает реальные проблемы Сканировать все шесть превью Является ли название вырезано на X сводной карточке? исчезает ли описание в LinkedIn (обычно это так - это ожидается)? выглядит ли изображение прямо на 1.91:1, или ваш логотип обрезается, потому что вы разработали квадратную графику и карта делает его широким?
Обрезайте и повторно проверяйте, пока каждая карта не прочитает чисто. Полезная дисциплина: пишите в самое жесткое ограничение. Если ваше описание полностью читается на 110 символов, оно читается полностью везде. Если ваш заголовок работает на 55, он выживет на каждой карте и в каждой мобильной макете.
Шаг 4: Скопируйте мета-блок и отправьте его
Скопируйте созданный блок на свою страницу. <head>. В рамках - Next.js, Nuxt, SvelteKit, Astro - вы не будете вставлять сырое <meta> tags, но блок по-прежнему является вашим источником истины, в каких именно полях заполняться в метаданных API фреймворка.
Затем сделайте шаг, о котором все забывают: переснимите URL-адрес в отладчике каждой платформы. Доставка исправления не очищает кэшированную карту. выше Генератор метатегов является ли сопутствующим инструментом здесь, если вам также нужны стандартные теги SEO - название, описание, канонические, роботы - которые живут рядом с социальными тегами.
Как на самом деле работает протокол Open Graph
Open Graph начат в Facebook в 2010 году как способ превратить веб-страницу в узел в социальном графе. Амбиции исчезли, словарный запас тегов застрял, и теперь это де-факто стандарт, который читает Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal и большинство других программ.
Механизм прост Когда ссылка является общей, платформа отправляет бота на ваш URL - facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot, йо- Этот бот запрашивает необработанный HTML, читает <head>, извлекает og: а twitter: Мета-теги и строит карту. Это один HTTP Get и Parse. Бот не браузер: большинство этих крауальных версий не запускают JavaScript, что является основной причиной целого жанра багов.
сами теги
Четыре тега описаны в соответствии с протоколом: og:title, og:type, og:image, и og:url, йо- на практике og:description а og:site_name одинаково несущие, потому что без них карта либо голая, либо падает обратно к любому тексту, который скребок может найти на странице. Теги используют property атрибут, не name-- <meta property="og:title" content="..." />- что сбивает людей с толку, потому что теги Twitter делают обратное и используют name, йо- Большинство парсеров прощают об этом, но собственные валидаторы платформы не всегда, поэтому стоит правильно поправиться.
OG: против Твиттера: приоритет
X сначала читает теги карты Twitter и возвращается к открытому графику, когда они отсутствуют. это означает страницу только с og:title, og:description, и og:image по-прежнему производит рабочую X-карту - запасной вариант по замыслу.
Итак, что на самом деле нужно twitter: метка? три вещи. twitter:card Решает макет, и нет эквивалента открытого графа: без него X выбирает стиль карты на основе того, что находит, что не является решением, которое вы хотите делегировать. twitter:site Приписывает карту счету бренда. twitter:creator кредиты автора. Все остальное может смело поступать с открытого графика.
Практическое правило: напишите полные теги открытого графа, затем добавьте ровно эти три twitter: теги. дублирующий twitter:title а twitter:description это безобидно, но бессмысленно, если вы действительно не хотите другой копии X, чем где-либо еще, что иногда является законным выбором, поскольку более узкое усечение X' иногда оправдывает более короткое и резкое описание.
Размеры изображения, соотношения и проблема с обрезкой
Соотношение сторон 1,91:1 — это число, которое нужно усвоить. 1200x630 пикселей поражает его, достаточно велик для дисплеев Retina, и это то, что Facebook, LinkedIn и X без искажений для карт с большими изображениями.
Режим отказа незаметен: платформы обычно не отвергают образ вне соотношения, они обрезают его. Загрузите квадратную графику 1000x1000, и Facebook обрезает его до 1,91:1, что нарезает примерно треть сверху и снизу. Если ваш текст заголовка был вертикально центрирован, он сохранится; если вы поместите логотип вверху, то нет. Храните значимое содержание внутри безопасной зоны и вдали от краев, потому что разные поверхности обрезают немного разными количествами.
Компактный х summary карта является исключением. Он хочет квадратное изображение, минимум 144x144, и он будет центрировать 1.91:1 баннер в квадрат - который обычно разрушает его. Если вы намеренно используете summary, предоставьте квадратное изображение; если вы предоставите баннер, используйте summary_large_image, йо-
Храните размер файла ниже примерно 5 МБ (задокументированный потолок Facebook и #39; другие платформы на практике более строгие), выполняйте функции PNG, JPEG или webp, и всегда используйте абсолютный URL HTTPS. Относительные пути и протокол-относительный // URL-адреса являются двумя наиболее распространенными способами, которыми изображение не отображается.
Почему кэш скребков и как разорвать кэш
Каждая платформа кэширует результат очистки вашей страницы - обычно в течение примерно семи дней, иногда дольше. это не упрямство: популярной ссылкой можно делиться тысячи раз в час, а повторная выборка вашей страницы для каждой доли будет атакой типа "отказ в обслуживании", проводимой платформой. поэтому они один раз соскребают и используют повторно.
Следствием этого является то, что исправление ваших тегов не исправляет карту. Старое предварительный просмотр сохраняется для каждой существующей и для новых ресурса, пока не истечет срок действия кэша. Чтобы принудительно обновить:
- Facebook: Отладчик совместного использования, используя кнопку "Скачать снова". Это также очищает кэш, используемый Instagram и WhatsApp.
- LinkedIn: Почтовый инспектор. Ввод URL вызывает новую осквернение.
- х: Валидатор карты устарело, и доступ несовместим. На практике размещение ссылки является единственным надежным обновлением.
- слабый: Срок действия кэша Unfurl истекает самостоятельно; добавление безобидного параметра запроса сразу же создает новый разверточный файл.
- Разногласие: похоже: измененная строка запроса является практическим обходным путем.
Этот трюк с запросом-строкой является универсальным люком для спасения: https://example.com/page?v=2 для скребка другой URL-адрес без кэшированной записи. Используйте его для тестирования, а не для канонической ссылки, которую вы фактически публикуете, и сохраняйте og:url указывая на чистый канонический адрес, чтобы доли правильно закреплялись параметризованными вариантами. выше кодер/декодер URL удобно, когда эти параметры становятся сложными.
Что происходит, когда теги отсутствуют
Скребки отступают, и запасные части хуже, чем вы надеетесь.
нет og:title И они используют <title> тег - который обычно пишется для результатов поиска и часто заканчивается в трубе и вашей торговой марке, читается неловко как заголовок карты. Нет og:description И они используют метаописание или очищают основной текст, который может вытаскивать баннер cookie или навигацию. нет og:image И большинство платформ показывают только текстовую карту, хотя некоторые ищут любое изображение на странице и могут найти логотип, аватар или пиксель отслеживания. нет og:url И общий адрес используется как есть, поэтому ?utm_source=twitter Варианты рассматриваются как отдельные страницы, а ваш фрагмент подсчета общего доступа.
Есть еще один класс неудач, который стоит назвать, потому что он невидим в обычной отладке: Теги, введенные клиентским JavaScript, йо- Если ваши метатеги установлены React после гидратации, инспектор браузера показывает их идеально, и скребок ничего не видит, потому что скребок никогда не запускал ваш JavaScript. Всегда проверяйте с помощью источника представления или curl, которые показывают необработанный HTML сервер фактически вернул - не DOM после загрузки вашего приложения То же самое относится к страницам, которые возвращают 401, перенаправление входа или блокировку ботов 403 к неаутентифицированным запросам: скребок получает страницу ошибки, а не ваш контент.
Общие варианты использования
Проверка перед запуском
Основной случай. Перед тем как запустится страница, вставьте теги, которые вы собираетесь отправить, и подтвердите каждую карту. Это единственное, что не могут сделать официальные отладчики платформы, потому что они должны получить живой URL. Проверка перед запуском стоит тридцать секунд и экономит переделку дня запуска.
Отладка сломанной карты
Ссылка неверна, и вам нужно знать, почему. Вставьте текущие теги страницы, считайте панель проверки, и причина обычно непосредственная: относительный путь изображения, http Изображение, описание вдвое предела, пропавший twitter:card, йо- Исправить, перескрапывать в отладчике платформы, готово.
Аудит метаданных сайта в масштабе
Работаем по странице за страницей, вставляя каждый <head> И, читая приговор, выходит на стек, который накапливается на любом мультивкладчике: на одной странице есть теги Twitter, а на другой нет, одно описание 300 символов, три страницы имеют один и тот же общий og:image, йо- Инструмент становится быстрой проверкой согласованности, а не догадкой на страницу.
Разработка изображения «Поделиться»
Когда вы выбираете или вводите в эксплуатацию og:image, предварительный просмотр показывает вам, что на самом деле делает с ней кроп в широкой карте, а не в квадратной. Дизайнеры обычно сдают красивую квадратную графику, которую убивают урожая 1,91:1; видя, что перед отправкой это дешевле, чем видеть его после.
Написание копии до самого жесткого ограничения
Поскольку в превью показаны усечение X рядом с Facebook, они превращают абстрактный лимит символов во что-то видимое. Написание описания, которое полностью читается на 110 символов, — это дисциплина, которую гораздо легче держать, когда вы можете видеть, как вы видите многоточие, когда вы печатаете. выше генератор пуль охватывает соседнюю работу по созданию чистого URL-адреса, который og:url должен указать на.
Работа над постановкой или за логином
Внутренние инструменты, клиентская работа в соответствии с NDA и страницы за стеной аутентификации недоступны для отладчиков платформы. Поскольку инструмент работает с тегами, а не с выбором, он обрабатывает их одинаково, как общедоступную страницу.
Сравнение платформы
Текущее самое известное руководство. платформы изменяют эти числа без объявления, и точки усечения измеряются в пикселях, а не символах - заголовок, полный широких буквенных клипов раньше, чем заголовок, полный узких. Относитесь к ним как к безопасным целям, а не к спецификациям.
| площадка | Рекомендуемое | отношение | Название показано | Описание показано | банкноты |
|---|---|---|---|---|---|
| фейсбук | 1200x630 | 1.91:1 | ~60 символов | ~155 символов | Минимум 200x200, средняя обрезка нестандартных изображений |
| Х / Твиттер (большой) | 1200x628 | ~1.91:1 | ~60 символов | ~110 символов | требователь twitter:card=summary_large_image |
| Х / Твиттер (Резюме) | 800x800 | 1:1 | ~50 символов | ~90 символов | Минимум 144x144, требуется квадратное изображение |
| 1200x627 | ~1.91:1 | ~ 100 символов | Часто скрытый | Описание часто выпадает с карты | |
| небрежный | 1200x630 | 1.91:1 | ~60 символов | ~140 символов | Компактное вложение; Unfurl Cache истекает самостоятельно |
| раздор | 1200x630 | 1.91:1 | ~60 символов | ~160 символов | Отрисовывает описание заметно, изображение меньше |
Вывод со стола — это цель дизайна: изображение 1200x630, заголовок с 55-60 символами или описание, которое находится под 110, дает вам карту, которая правильно отображается везде без каждой платформы.
часто задаваемые вопросы
Каков правильный размер изображения открытого графа?
Используйте 1200x630 пикселей - соотношение 1,91:1. Это удовлетворяет Facebook, LinkedIn, X, Slack, и Discord одновременно для карт с большим изображением, и достаточно большой, чтобы оставаться резким на дисплеях высокой плотности. храните файл ниже примерно 5 МБ, обслуживайте его через HTTPS по абсолютному URL-адресу и держите важный текст подальше от краев, так как поверхности обрезаются немного на разные количества. для компактной карточки сводки X вместо этого предоставьте квадратное изображение размером не менее 144x144.
Почему мой предварительный просмотр ссылок все еще показывает старое изображение после того, как я исправил теги?
Потому что платформа кэшировала результат своего более раннего царапин, обычно около недели.Обновление тегов не делает этот кэш недействительным. принудительная новая выборка через платформу's отладчик - Facebook Sharing Debugger's Scrape Again кнопка, или LinkedIn Post Inspector.For Slack and Discord, добавление параметра запроса к URL-адресу производит некэшированный предварительный просмотр немедленно, что является самым быстрым способом проверить исправление.
Нужны ли мне и og: и twitter: теги?
x возвращается к открытому графику, когда отсутствуют эквиваленты Twitter, поэтому страница с завершением og: Теги производит рабочую X-карту. То, что Open Graph не может выразить, — это макет карты, поэтому вы все равно должны добавить twitter:card Выбор между большим баннером и компактным сводкой, плюс twitter:site а twitter:creator приписать карту. Эти три плюса теги открытого графа являются эффективной комбинацией.
Какой длины должно быть og:title и og:description?
защищать og:title при 60 символах или ниже. в связи с og:description Платформы расходятся: X показывает примерно 110 символов, Facebook и LinkedIn показывают ближе к 155-200. Запись в более жесткое ограничение по X означает, что описание полностью читается везде. Текст за пределами предела не теряется, просто спрятанный за многоточием, так что вперед загрузите важные слова.
Почему мой предварительный просмотр пуст или отображает только URL-адрес?
Обычные причины, в приблизительной последовательности частоты: og:image является относительным путем, а не абсолютным URL-адресом; изображение подается по простому http; теги находятся за пределами <head>; теги вводятся клиентским javascript, который скребок никогда не выполняет, или страница возвращает статус 200 или переадресацию входа в бот. Проверьте необработанный HTML с помощью источника представления или curl вместо инспектора браузера - инспектор показывает DOM после запуска JavaScript, что не тот, что видит скребок.
Этот инструмент извлекает мой URL для чтения тегов?
Нет. Он не делает никаких запросов сети вообще. Он работает от тегов, которые вы вводите или вставляете, и все анализируется и визуализируется в вашем браузере. браузеры не могут получить произвольные сторонние страницы из-за CORS, а выборка на стороне сервера будет означать отправку ваших неизданных URL-адресов куда-то еще. Компромисс заключается в том, что вы предоставляете теги - и преимущество в том, что страницы на локальном хосте, на этапе или за входом в систему работают точно так же, как общедоступные.
Могу ли я просмотреть страницу, которая еще не была опубликована?
Да, и это основная причина использовать это, а не отладчик платформы.Официальные отладчики должны получить живой URL, поэтому они бесполезны перед развертыванием. Здесь вы вставляете теги, которые собираетесь отправить - из вашего шаблона, объекта метаданных вашей платформы или локальной сборки - и предварительные просмотры отображаются немедленно.
Помогают ли теги Open Graph моему поисковому рейтингу?
Не прямо. Они читаются социальными и чат-платформами, а не используются поисковыми системами в качестве фактора ранжирования. На них влияют коэффициент кликов по каждой доле вашей ссылки, которая стимулирует трафик и, косвенно, на сигналы, которые имеют значение. Думайте о них как об оптимизации конверсий для общих ссылок, а не как о SEO-рычаге. Для тегов, которые влияют на ваш поисковый фрагмент, используйте Генератор метатегов, йо-
