Перевірка прев’ю посиланьПобачте картку до того, як опублікуєте посилання.
Вставте URL і побачте картку такою, якою її покажуть Facebook, X, LinkedIn, WhatsApp, Discord, Slack, Telegram та iMessage, у світлій і темній темі, а також список того, чого бракує, і теги, які треба вставити, щоб це виправити.
URL завантажує наш сервер, бо браузер не може прочитати інший сайт за вас. Ми ніколи не записуємо його в журнали, не зберігаємо й не передаємо третім особам.
Вставте URL, щоб побачити картки для поширення
Ви побачите картку такою, якою її покажуть Facebook, X, LinkedIn, WhatsApp, Discord, Slack, Telegram та iMessage, а також список того, чого бракує.
Чому прев’ю посилання показує не те зображення?
Майже завжди причина в одному з п’яти пунктів, і ця перевірка Open Graph називає, у якому саме, а не радить «додати og:image», коли він у вас уже є.
На сторінці кілька og:image
Один додає тема, інший плагін, а платформи здебільшого беруть перший, який трапиться в head. Зображення, яке ви очікували, зазвичай стоїть нижче. Таблиця тегів вище показує всіх кандидатів і позначає того, який переміг.
Зображення вказане відносним шляхом
og:image="/img/card.png" не є URL, який бот може завантажити. Адреса має бути абсолютною і мусить працювати від кінцевої адреси після перенаправлень, а не від тієї, яку ви ввели. Якщо ваш сайт перенаправляє на www, шлях, що працює локально, у продакшені може вести в нікуди.
Зображення захищене від хотлінкінгу
У вашому браузері воно відкривається без проблем, бо у вас є сесія і правильний referer. У бота немає ні того, ні іншого: він отримує 403, і картка лишається без зображення. Цей інструмент завантажує зображення так, як це зробив би сторонній відвідувач, тож збій видно тут, а не після публікації.
Платформа досі показує кеш
Ви виправили тег годину тому, а старе зображення досі на місці. Кожна платформа кешує прев’ю окремо, і деякі тримають його тижнями. Жодні зміни на вашому боці його не очистять: потрібно повторно просканувати URL власним інструментом платформи.
На сторінці ніколи й не було цих тегів
Якщо ваш сайт рендериться на клієнті, теги є в інспекторі, але їх немає в HTML, який повернув сервер. Жоден бот не чекає на JavaScript. Це найпоширеніша причина на сучасних стеках, і саме в неї люди вірять найнеохочіше.
Які теги Open Graph вам справді потрібні?
Картку тримають чотири. Решта лише уточнює, а перегляд мета-тегів, який позначає всі двадцять як однаково термінові, вам не допомагає.
og:title та og:description
Заголовок і два рядки під ним. Без og:title платформа бере <title>, який зазвичай пишуть для пошукової видачі, і як заголовок картки він читається погано. Без опису тіло картки просто порожнє.
og:image, абсолютний і щонайменше 1200px завширшки
Facebook вказує 200x200 як мінімум і 1200x630 як рекомендацію. LinkedIn вказує 1200x627 і зазначає, що зображення, вужчі за 401px, показуються як маленька мініатюра замість банера. Одне зображення 1200x630 підходить усім платформам одразу.
twitter:card
Єдиний тег, який X справді потребує від вас. Встановіть значення summary_large_image, а решту візьмуть ваші теги Open Graph: якщо відповідників twitter: немає, X використовує og:title, og:description та og:image, тож дублювати їх не потрібно.
og:url і теги, що лише наводять лад
og:url не дає одній сторінці рахуватися як кілька, коли нею діляться з різними параметрами відстеження. og:image:width і height дозволяють платформі розмітити картку ще до завантаження зображення. og:type, og:site_name, og:locale та og:image:alt належать уже до шліфування.
Чи потрібні теги Twitter, якщо вже є Open Graph?
Здебільшого ні, і саме звідси береться чимало дубльованої розмітки. Два блоки, які варто зрозуміти, перш ніж копіювати з блогу фрагмент на п’ятнадцять рядків.
X сам переходить на Open Graph
Якщо немає twitter:title, twitter:description або twitter:image, X читає натомість og:title, og:description та og:image. Тож єдиний тег, який справді треба додати, це twitter:card: він визначає, малювати маленьку квадратну картку summary чи великий банер. Решту варто додавати лише тоді, коли ви хочете, щоб у X картка відрізнялася від усіх інших платформ.
property= проти name=, і чому працюють обидва
Специфікація Open Graph розміщує свої теги в property=, а специфікація карток X свої в name=. На практиці обидві платформи читають обидва варіанти, тому перевірка, яка розпізнає лише один запис, повідомляє, що половини ваших тегів бракує. Ця розбирає обидва й підказує, який запис ви використали, у вигляді примітки, а не помилки.
Чому прев’ю досі показує старе зображення?
Бо платформа дивиться не на вашу сторінку. Вона дивиться на копію, зроблену того разу, коли хтось уперше поширив посилання, і робитиме так, доки щось не змусить її подивитися знову.
Кожна платформа кешує окремо
Виправлення тегу нікого не сповіщає. Facebook, LinkedIn і X тримають власні копії, тож посилання може одночасно виглядати правильно в одному місці й застаріло у двох інших.
Повторне сканування офіційними інструментами
Facebook Sharing Debugger, X Card Validator і LinkedIn Post Inspector мають кнопку, яка примусово завантажує сторінку заново. Це єдиний надійний спосіб очистити кеш, і він спрацьовує миттєво.
Месенджери здебільшого не кешують
WhatsApp, Telegram, Discord і Slack зазвичай завантажують сторінку для кожного нового повідомлення, тож це найшвидший спосіб перевірити виправлення, нікого не чекаючи.
Новий URL як запасний вихід
Якщо платформа відмовляється оновлюватися, поширте URL, якого вона ще не бачила: так кеш обходиться повністю. Зазвичай досить додати параметр запиту.
Не знаєте, куди насправді веде скорочене посилання? Розгорніть його декодером QR-кодів
Потрібне охайне посилання, щоб поширити його після виправлення тегів? Створіть його безкоштовним скорочувачем посилань
Прев’ю лише легша половина справи. Друга: знати, що дав клік.
Гарна картка приносить клік. Після цього звичайний URL нічого вам не каже: ні звідки прийшов візит, ні яка платформа насправді спрацювала, і після публікації його вже не перенаправиш деінде. Саме для цього й існує LinkScale.
Дізнайтеся, яка платформа спрацювала
Кліки за джерелом, країною та пристроєм, щоб знати, що дало результат: допис у LinkedIn чи розсилка.
Змінюйте призначення пізніше
Перенаправте вже опубліковане посилання, не просячи нікого поширювати його знову.
Збережіть картку
Посилання LinkScale має власні теги для поширення, тож скорочення не позбавить вас прев’ю, яке ви щойно виправили.
Запитання про прев’ю посилань
Залишилися питання?
ОнлайнЖиві люди, зазвичай відповідаємо за кілька хвилин.
Так, безкоштовна, без акаунта й без суттєвих обмежень. URL завантажує наш сервер, бо браузер не може прочитати інший сайт за вас, і це єдине, що робить ендпоінт: завантажує сторінку, витягує теги й повертає їх. URL не записується в журнали, не потрапляє в жодну базу даних і не передається третім особам. Якщо хочете, щоб узагалі нічого не залишало ваш пристрій, режим вставлення HTML виконує весь аналіз у браузері.
Більше можливостей з LinkScale
Картку виправлено. Тепер дізнайтеся, чого вартий клік.
LinkScale показує, звідки прийшов кожен клік, і дає змінити, куди веде посилання, вже після публікації.
Free 14-day trial on every plan