Посмотрите, как выглядит ваша страница, когда ссылкой делятся
Посмотрите карточку, которую строят шесть платформ, когда кто-то делится ссылкой на вашу страницу.
Когда ссылкой делятся, платформа не просто печатает адрес. Она загружает страницу, читает несколько тегов из head и строит карточку: изображение, заголовок, строка текста. Какие теги она прочитает, зависит от того, где опубликована ссылка. X сначала ищет собственные теги и только потом переходит к Open Graph, тогда как Facebook и LinkedIn читают исключительно Open Graph. Если тега нет, пустоты не остаётся: платформа берёт что-то другое со страницы, чаще всего первый попавшийся текст. Введите адрес ниже, чтобы прочитать теги страницы, или напишите их сами, и карточка будет нарисована так, как её строит каждая из шести платформ.
Какие теги читает каждая платформа
X сначала смотрит собственные теги и переходит к Open Graph, только если их нет. Facebook и LinkedIn читают исключительно Open Graph, поэтому тег X там не даёт вообще ничего. Slack и Discord принимают и те и другие. Одна страница может таким образом дать шесть карточек, не похожих друг на друга, а заголовок, который вы точно задали, может отсутствовать на половине из них. Каждый предпросмотр здесь следует тому порядку, который платформа использует на самом деле.
Facebook и LinkedIn запоминают прочитанное
Обе платформы сохраняют копию того, что нашли при первой загрузке вашей страницы, и держат её долго. Вы исправляете теги, а карточка не меняется, и это самая частая причина, по которой правильное исправление выглядит неудачным. Нужно попросить платформу прочитать страницу заново, и у каждой есть для этого инструмент: Sharing Debugger у Facebook и Post Inspector у LinkedIn. Ни один инструмент не очистит эти кэши за вас, включая этот. Здесь вы видите то, что теги говорят сейчас, а не то, что Facebook всё ещё показывает.
Отсутствующий тег не оставляет пустоты
Платформы подставляют что-то вместо того, чтобы оставить дыру. Без тега описания они берут строку со страницы, обычно первый попавшийся текст, а на многих сайтах это пункт меню или уведомление о файлах cookie. Без изображения карточка сжимается до строки текста рядом с фавиконом. Предпросмотры показывают и эти подстановки.
Размер и место обрезки
При ширине меньше примерно 600px большинство платформ перестаёт показывать карточку с большим изображением и переходит на маленькую миниатюру рядом с текстом, а это заметно более слабая карточка. 1200 на 630 — размер, на который ориентируется большинство. Обрезка идёт от центра, поэтому всё, что расположено у верхнего, нижнего или боковых краёв, может исчезнуть: номер телефона внизу фотографии, имя вверху афиши. Изображение здесь загружается и измеряется в вашем браузере, так что показанный размер настоящий, а не тот, что заявляет тег ширины.
Один набор тегов, шесть карточек, потому что платформы читают их по-разному.
- В макете каждой из них
- В том порядке тегов, который использует каждая
- Рядом друг с другом
- Измеряется в вашем браузере
- Реальные пиксели, а не тег
- Обрезано так, как будет обрезано
- Заголовок и описание
- Где обрезается каждый
- Из какого тега взят каждый
- Какие теги там есть
- Каждый запасной вариант учтён
- Ничего не сохраняется