Проверьте карточки шеринга, прежде чем публиковать
Последнее обновление:
Карточка шеринга — это небольшой предпросмотр, заголовок, описание и изображение, который социальная сеть или чат-приложение строит, когда кто-то вставляет ссылку на вашу страницу. Для большинства людей, которые вообще встретят эту страницу, карточка — единственная её версия, которую они увидят: они встречают её посреди прокрутки, судят о ней примерно за секунду и решают, заслуживает ли страница за ней касания. Неудобная часть в том, что сбои карточки бесшумны. Ваша страница может выглядеть идеально в вашем собственном браузере, в то время как её карточка показывает отсутствие изображения, заголовок прошлого месяца или описание, оборванное посреди слова, — потому что карточка строится не из того, что вы видите на экране, а из горстки мета-тегов в head страницы, один раз забранных скрапером, за которым вы никогда не наблюдаете. Поэтому, прежде чем публиковать то, чем вы собираетесь делиться, прогоните черновой URL через проверку Open Graph и посмотрите на свою страницу так, как её увидят ваши читатели: как четыре маленькие карточки.
Ссылка — это и есть реклама
Когда ссылку вставляют в социальную ленту или ветку чата, ни один человек не посещает вашу страницу первым. Платформа отправляет скрапер — маленького, нетерпеливого краулера, — который забирает страницу один раз и строит карточку из мета-тегов, найденных в head. Никто в этой цепочке не видит вашу вёрстку, вашу типографику, вашу тщательно настроенную главную секцию или скриншот, размещённый над сгибом. Они видят ровно три поля и картинку: og:title, og:description и og:image. Если эти три неверны, отсутствуют или устарели, то, насколько это касается вашей аудитории, ваша страница и есть неверная, отсутствующая или устаревшая — красивая страница за карточкой никогда не получает шанса поправить впечатление.
Карточка ещё и упряма. Платформы кэшируют этот забор, обычно привязывая его к точному URL, поэтому первая версия, которую строит скрапер, часто оказывается той, что продолжают распространять неделями или месяцами, долго после того, как вы отредактировали страницу. Вот почему карточка шеринга заслуживает того же уважения, что и рекламный креатив: для публикации, вся цель которой — чтобы ею делились, ссылка и есть реклама, а мета-теги — её текст. Писать их задним числом — или позволить генератору сайта заполнить их тем текстом, что случайно окажется рядом, — значит запускать кампанию, креатив которой никто не просматривал.
Что на самом деле читает каждая платформа
Начните с базы. Facebook и LinkedIn читают Open Graph: og:title, og:description, og:image, og:url и og:type, как их определяет протокол Open Graph. Если эти пять присутствуют и разумны, две крупнейшие профессиональные поверхности шеринга покрыты. X сначала читает собственные теги Twitter Card — twitter:card, twitter:title, twitter:description, twitter:image — и откатывается к эквивалентам Open Graph, когда тегов Twitter нет. Slack читает сначала Open Graph, а теги Twitter Card служат его запасным вариантом. Иными словами, платформы согласны в ингредиентах и слегка расходятся в том, к какой полке тянутся первой.
Везде последний резерв один и тот же: обычный элемент <title> и мета-описание, призванные на службу, когда не существует ни Open Graph, ни тегов Twitter. Этот откат важен для того, как вы читаете любую проверку, включая нашу. Когда инструмент показывает вам заголовок карточки, честный вопрос — откуда взялось значение: из выделенного тега, который вы написали намеренно, или из отката, спасённого из элемента title, написанного для страницы результатов поиска и бюджета символов, которого у вашей карточки нет. Проверка, которая тихо подставляет откаты и представляет их как теги, лжёт вам умолчанием — вот почему проверка Open Graph помечает каждый откат как откат, а не притворяется, что тег существует.
Сбои, из-за которых карточки выглядят сломанными
Классика — относительный og:image. Тег говорит content="/images/share.png" — путь, а не URL, — и в вашем браузере это работает, потому что браузер знает, на каком сайте он находится. Скрапер его не разрешит: ему нужен полный, абсолютный URL, начинающийся с https://, а когда он его не получает, он просто строит карточку без изображения, мимо которой читатели пролистывают, так и не узнав, что пропустили. Сразу за ним — изображение, которое существует, но не подходит: намного меньше рекомендованных платформами 1200×630 пикселей или в пропорции, которую обрезка по центру превращает в бессмыслицу. Относитесь к 1200×630 как к тому, чем это является, — широко опубликованному руководству платформ, а не стандарту, который кто-либо ратифицировал, — но проигнорированное руководство всё равно означает карточку с заголовком, вырезанным из картинки.
Остальное тише. Отсутствующий тег twitter:card означает, что X откатывается к маленькой сводной карточке — миниатюра рядом с текстом — даже когда вы дали большое, красивое изображение и ожидали полноширинной обработки summary_large_image. Пустые значения тегов хуже отсутствующих тегов: og:title с content="" не запускает откат, а перезаписывает его пустотой. А неверная og:url — указывающая на staging-домен, главную страницу или статью прошлой недели, как так часто делают скопированные шаблоны, — говорит каждой платформе, что каноническая страница находится в другом месте, расщепляя шеры, счётчики и записи кэша прочь от страницы, которую вы действительно опубликовали.
Почему старая карточка продолжает показываться после исправления тегов
Вы исправили теги, передеплоили, вставили ссылку снова — а старый заголовок всё ещё там, улыбается вам. Ничего не сломано. Каждая платформа кэширует карточку, построенную для вашего URL, и этот кэш не следит за вашим сайтом на предмет изменений; с точки зрения платформы, она уже знает, как выглядит ваша страница, а повторный забор каждого URL при каждом шере был бы огромным объёмом краулинга ради очень малой пользы. Устаревшая карточка — не доказательство того, что ваше исправление не удалось. Это доказательство того, что кэшу ещё не сказали посмотреть снова — и пока не скажут, каждый коллега и читатель, который делится ссылкой, заново подаёт старый забор.
Так скажите ему. Каждая крупная платформа предлагает способ форсировать свежий забор одного URL: отладчик шеринга Facebook и Post Inspector LinkedIn оба заново забирают страницу и показывают вам карточку, которую они перестроили, — X исторически предлагал валидатор карточек для той же работы. Прогоните свой URL через соответствующий инструмент после любого исправления тегов и подтвердите новую карточку, прежде чем анонсировать публикацию. Там, где инструмента повторного забора нет, смена URL меняет ключ кэша: добавление строки запроса вроде ?v=2 заставляет платформу обращаться со ссылкой как с той, которую она никогда не видела, — вполне уважаемый приём для разового шера. И сохраните немного терпения в запасе — кэши могут отпускать не сразу даже после повторного забора, поэтому проверяйте, ждите и проверяйте ещё раз, прежде чем начинать редактировать теги, которые уже были верны.
Двухминутная рутина перед публикацией
Сделайте это рутиной, а не расследованием. Раз: вставьте черновой URL в проверку Open Graph — staging- или preview-URL подойдёт, лишь бы это была страница, которую заберут скраперы. Два: подтвердите, что все четыре карточки — Facebook, X, LinkedIn и Slack — показывают заголовок, описание и изображение, которые вы задумали, и отметьте всё, помеченное как откат, потому что выбранный откат — нормально, а откат, в который вы споткнулись, — это тег, ожидающий, чтобы его написали. Три: подтвердите, что URL изображения абсолютен, а само изображение — не меньше 1200×630. Четыре: подтвердите, что twitter:card равен summary_large_image всюду, где вы хотите крупный формат в X, и что og:url называет каноническую страницу, которую вы собираетесь опубликовать.
Пять: опубликуйте — а затем сами вставьте ссылку куда-нибудь один раз, чтобы форсировать первый забор, пока вы ещё смотрите, и взгляните на карточку, которая вернётся. Если она устарела или неверна, перезаберите её инструментом самой платформы, а не редактируйте в панике. Две минуты, пять шагов — и версия вашей страницы, которую увидит большинство людей, это версия, которую вы действительно одобрили. Для более широкого предпубликационного прохода — TLS, заголовки безопасности, редиректы, остаток рутинных проверок, которых страница заслуживает перед выходом, — запустите рядом проверку здоровья сайта; карточки — парадная дверь, но не весь дом.