Перегляд поширення в соцмережах

Як користуватися

1. Введіть адресу сторінки, наприклад example.com/blog/launch, і натисніть Перевірити. Немає сторінки під рукою? Спробуйте один зі зразків.
2. Перегляньте картку, яку для неї створює кожен застосунок: X, Facebook, LinkedIn, Slack, Discord, WhatsApp та iMessage. Зелена крапка означає, що картка має правильний вигляд; жовта або червона — що під карткою описано проблему.
3. Відкрийте Показати виправлення й теги, щоб переглянути кожен перевірений тег окремо. Відсутні теги вже готові для вставлення у <head>: скопіюйте їх, заповніть значення, опублікуйте зміни й перевірте ще раз.

Адреса перевірки міститься в адресному рядку браузера, тож ви можете надіслати її тому, хто відповідає за сторінку.

Як працює попередній перегляд посилань

Коли ви вставляєте посилання в допис або чат, сканер застосунку один раз завантажує сторінку й читає теги в її <head>. Він не виконує JavaScript, не входить в обліковий запис і не приймає банери cookie, тому теги, додані скриптом після завантаження сторінки, для нього невидимі. Засіб перевірки завантажує сторінку так само: один запит, без JavaScript, із переходами за перенаправленнями, як у сканера.

Кожен застосунок читає кілька тих самих тегів і має власні запасні варіанти:

• Open Graph (og:title, og:description, og:image, og:url, og:site_name) читають Facebook, LinkedIn, Slack, Discord, WhatsApp та iMessage.
• X спочатку читає twitter:card, twitter:title, twitter:description і twitter:image, а за їх відсутності використовує теги Open Graph. Без twitter:card він показує невелику підсумкову картку, навіть якщо є зображення.
• Якщо og:title відсутній, більшість застосунків використовують <title>. Якщо немає og:description, деякі беруть метаопис, а інші взагалі не показують текст.
• Discord забарвлює край своєї картки за допомогою theme-color.

Попередній перегляд тут дотримується цих правил. Кожен застосунок також час від часу змінює дизайн, тому вважайте цей перегляд наближеним, а не точним.

Зображення для попереднього перегляду

Одне зображення підходить усюди: 1200 × 630 пікселів (1,91:1), PNG або JPEG, за повною адресою https://.

• За ширини менше ніж 600 пікселів Facebook і LinkedIn показують маленьку мініатюру замість великої картки. Якщо розмір менший за 200 × 200, Facebook не показує зображення.
• X приймає зображення до 5 МБ, а Facebook — до 8 МБ. WhatsApp часто пропускає зображення розміром понад приблизно 600 КБ, тому добре стиснений JPEG — надійний вибір.
• Жоден із великих застосунків не підтримує SVG.
• Відносна адреса на кшталт /og.png працює не з кожним сканером. Указуйте повну URL-адресу.
• Часто зображення обрізають до квадрата (WhatsApp, iMessage для невеликих посилань), тому тримайте важливу частину ближче до середини.

Засіб перевірки також завантажує зображення, визначає його розміри за заголовком файлу й показує в попередньому перегляді.

Чому попередній перегляд досі застарілий

Застосунки кешують завантажене від кількох хвилин до приблизно тижня. Після виправлення тегів засіб перевірки одразу показує нову версію, але вже поширене посилання зберігає старий вигляд, доки застосунок не завантажить його знову. Sharing Debugger у Facebook і Post Inspector у LinkedIn повторно завантажують сторінку за запитом. У Slack посилання, надіслане повторно через деякий час, отримує новий попередній перегляд. Додавання рядка запиту, наприклад ?v=2, змушує будь-який застосунок сприймати його як нове посилання.

Поширені запитання

Чому в попередньому перегляді немає зображення?

Звичайні причини, за порядком: немає тегу og:image, адреса зображення відносна або повертає помилку, зображення замале чи завелике або тег додається JavaScript після завантаження сторінки. Рядок під кожною карткою вказує відповідну причину.

Які теги потрібні щонайменше?

og:title, og:description, og:image із зображенням 1200 × 630, og:url і twitter:card зі значенням summary_large_image. Генератор метатегів створить їх за вас.

Чи можна перевірити сторінки, що потребують входу?

Ні. Сканери не входять в облікові записи, тому сторінка за формою входу ніде не матиме попереднього перегляду. Засіб перевірки бачить те саме, що й вони, і завантажує лише загальнодоступні адреси: приватні та внутрішні мережі відхиляються.

Чи зберігає засіб перевірки завантажені сторінки?

Ні. Він завантажує сторінку та її зображення після натискання «Перевірити» й надсилає вам знайдене. Результат зберігається дві хвилини, щоб повторна перевірка тієї самої адреси була миттєвою, а потім видаляється. Він читає до 2 МБ HTML і до 8 МБ на зображення та припиняє спробу через 8 секунд.

Чому він каже, що сторінка повертає 403, хоча в моєму браузері вона відкривається?

Деякі сайти й брандмауери блокують запити, які надходять не від браузера або не від відомих великих сканерів. Якщо засіб перевірки отримує 403, Facebook або LinkedIn також можуть його отримати: перевірте налаштування ботів у своєму брандмауері.

Чи є обмеження?

Двадцять перевірок на хвилину з однієї адреси. Кожен сайт також завантажується не частіше ніж 60 разів на хвилину сумарно для всіх користувачів засобу перевірки, тому його не можна використати для перевантаження сайту. Результати зберігаються дві хвилини, тож повторна перевірка тієї самої адреси невдовзі повертає відповідь миттєво; повторне натискання Перевірити на відкритій сторінці завжди завантажує її заново.