Краткият отговор: за да проверите Open Graph онлайн, поставете адреса на страницата в безплатния Open Graph Debugger PromoPilot. Той ще прочете всички тагове og:* и Twitter Card, ще провери наличието и размера на изображението, ще оцени пълнотата на маркирането и ще покаже визуализации на връзки за Facebook, X (Twitter) и LinkedIn – плюс препоръки какво да добавите. Не се изисква регистрация. По-долу ще намерите необходимите тагове, необходимия размер og:image и как да актуализирате „заседнал“ преглед.
Правя уебсайтове от 12 години и чувам въпроса „Защо линкът Telegram няма изображение?“ от клиенти по-често, отколкото въпроси за класирането. Обикновено е работа за пет минути – стига да знаете къде да търсите.
Какво проверява Open Graph Debugger?
Когато вмъкнете линк в публикация или съобщение, платформата отива на страницата и търси Open Graph тагове. Ако намери такъв, тя рисува чиста карта. Ако не го намери, тя взема каквото намери или показва гол URL адрес. Инструментът проверява само това, което социалните мрежи ще прочетат.
| Какво проверява? | Какво гледа той? | Защо бизнесът се нуждае от това? |
|---|---|---|
| Всички тагове og:* | og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale | От тях сайтовете събират заглавието, описанието и изображението на картата. |
| Карта в Туитър | twitter:карта, twitter:заглавие, twitter:описание, twitter:изображение | X (Twitter) чете етикетите си и ако те липсват, частично og |
| OG изображение | Има ли снимка и какъв е размерът ѝ? | Малкото изображение превръща картата в мъничка икона отстрани |
| Оценка на пълнотата | Колко препоръчителни етикета са попълнени? | Бърза справка: всичко ли е на мястото си? |
| Преглед на мрежата | карти за Facebook, X и LinkedIn | Можете да видите как ще изглежда публикацията преди публикуването ѝ. |
| Препоръки | Какво трябва да добавя или коригирам? | Готов списък със задачи за разработчик или за вас |
Как да проверя Open Graph страниците онлайн?
- Отворете дебъгера на графи.
- Въведете URL адреса на страницата, която искате да споделите: статия, продукт или рекламна целева страница. Кликнете върху „Провери“.
- Прегледайте списъка с тагове: кои са зададени, кои са празни и дали има чуждестранен или тестов адрес в og:url.
- Проверете визуализацията за всяка мрежа: дали заглавието е отрязано, дали изображението е видимо и дали има важен текст по краищата.
- Моля, добавете липсващите тагове, както е препоръчано, и проверете страницата отново.
Страница с инструменти: поле за адрес, бутон „Проверка“, списък с проверки и ЧЗВ.
Инструментът е лек: дневен лимит е достатъчен, за да може гостът да провери всички шаблони на сайта – началната страница, категорията, продукта и статията. След безплатна регистрация лимитът се утроява.
Кои са най-често срещаните грешки в Open Graph?
Ето какво намирам на почти всеки друг сайт и в какъв ред да го поправя.
- Няма og:image или е посочен като относителен URL адрес. Социалните мрежи няма да разберат
content="/img/cover.jpg"— изисква се пълният URL адрес, започващ сhttps://. Без изображение, обхватът на публикацията намалява значително. - Изображението е твърде малко. Логото с размери 200x200 превръща картата в малък квадрат отстрани. Необходимо е изображение с размери 1200x630.
- Едно og:image за целия сайт. Всяка статия и всеки продукт в социалните мрежи трябва да изглеждат по един и същи начин – с логото. За блога и каталога изображението трябва да е взето от основната снимка на страницата.
- og:url води към друг адрес — началната страница, тестов домейн или
http://версията. Платформата може да консолидира всички връзки в една страница. - Няма twitter:card. Без него X често показва малка карта. За по-голямо изображение ви е необходим
summary_large_image. - og:title дублира заглавието с „купи“ и марката. В социалните медии това изглежда като реклама; оживено заглавие, например за публикация, е по-добро.
Минималният правилен набор изглежда така:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">Как да подготвим изображение за og:image?
Изображението е най-забележимата част от картичката и именно там хората често пестят. Ето няколко правила, които спазвам:
- Размерът е 1200×630, а ориентацията е хоризонтална. Социалната мрежа ще изреже горната и долната част на квадратна снимка на продукта, което може да доведе до липса на глава или подметка на продукта.
- Важното е в центъра. Различните платформи изрязват краищата по различен начин, а в мобилния фийд картата е още по-малка. Дръжте текста голям и далеч от краищата.
- Минимален текст. Заглавието вече е под изображението; 3-6 думи или никакви надписи са достатъчни на самото изображение.
- Лек файл. JPG или PNG файл с разумен размер ще се зареди бързо и платформата няма да има изчакване.
- Специално изображение за всяка ключова страница. За статии и продукти е удобно да се създаде автоматично такова: корица на статията или основна снимка на продукта.
Добър тест е да отворите предварителния преглед в дебъгера на телефона си. Ако връзката не е ясна без увеличаване, изображението трябва да се преработи.
Как да актуализирам стар преглед след корекция?
Често срещан сценарий: поправили сте етикетите, но социалната мрежа упорито показва старото изображение. Причината е кешът: платформата е запомнила прегледа от първото споделяне. Във Facebook помага повторното събиране на данните в Sharing Debugger, в LinkedIn - с Post Inspector, а в Telegram - с бота @WebpageBot, към който изпращате линка. Ако всичко друго се провали, добавете безобиден параметър към адреса, например ?v=2: за платформата това е нов линк.
Сравнение: Open Graph Debugger и алтернативи
| Инструмент | Какво е безплатно? | Ограничения | За кого е подходящо? |
|---|---|---|---|
| PromoPilot - Дебъгер за отворени графики | Всички тагове в og и Twitter, размер на изображението в og, визуализации за Facebook, X и LinkedIn, препоръки | Не изчиства кеша на социалните мрежи | Проверете страницата си незабавно, преди да я публикувате в социалните мрежи |
| Споделяне на дебъгер (Meta) | Преглед Facebook и повторно събиране на данни | Само Facebook, изисква се вход в профила | Нулиране на стария преглед във Facebook |
| Инспектор на публикации в LinkedIn | Преглед на LinkedIn и обновяване на кеша | Само за LinkedIn, изисква се вход | За тези, които рекламират в LinkedIn |
| @WebpageBot в Telegram | Актуализиране на прегледа на връзките в Telegram | Само Telegram, не анализира тагове | За собственици Telegram канали |
Заключение: необходими са официални дебъгери на платформата, за да се изчисти кешът, но всяка платформа показва само собствената си мрежа. За да видите всички визуализации и списък с липсващи тагове наведнъж, универсалният дебъгер е по-удобен.
Между другото, PromoPilot разполага с 87 безплатни SEO инструмента. Ако все още не сте писали тагове, в нашата поредица имаме статия за генератор на мета тагове, който ще създаде Open Graph блок с предварителен преглед.
По какво Open Graph Debugger се различава от анализа на мета тагове?
Анализът на мета таговете разглежда страницата през очите на търсачка: заглавие, описание, каноничен код, hreflang и Open Graph са само една група. Дебъгерът се фокусира върху социалните медии: той създава карти за различни платформи, проверява размера на изображенията и прави препоръки, базирани специално на визуализации. Ако връзките към вашия сайт се споделят активно в социалните медии и приложенията за съобщения, дебъгерът е по-полезен.
И двата имат едно ограничение: те четат HTML кода, върнат от сървъра. Ако таговете са вмъкнати от скрипт на браузър, много социални мрежи няма да ги видят – това трябва да се поправи от страната на уебсайта. Друг детайл: дебъгерът проверява таговете, но не и самото споделяне. Ако страницата е защитена с парола, геоблокирана или защитена от ботове, социалната мрежа може да не е в състояние да получи достъп до нея, дори ако всички тагове са налични.
Кога един безплатен инструмент не е достатъчен?
Дебъгер ще покаже, че страницата няма og:image. Но ако има хиляди страници, ръчното вмъкване на изображения не е възможно. Специалист е необходим, когато:
- всеки продукт или артикул трябва да има собствено изображение за предварителен преглед, събрано автоматично;
- сайтът връща тагове с помощта на скрипт, а социалните мрежи не ги виждат;
- Стартирате реклами и изпращате имейли, където всеки преглед влияе върху цената на клик;
- Нуждаем се от комбинация от „уебсайт + Telegram канал + автоматично публикуване“ с правилните карти.
Какво мога да направя за вашия уебсайт?
Аз съм Валерий Данюк, разработчик и SEO специалист с 12 години опит и над 200 клиенти. Красив преглед на линкове е безплатен и го персонализирам за всеки проект.
SEO и промоция
- SEO одит на уебсайт „до ключ“: Проверявам всички тагове на шаблоните, настройвам автоматичен преглед на изображенията и коригирам кода.
Уебсайтове и онлайн магазини
- Прехвърляне на магазина ви от Instagram към уебсайта ви — продукти с подходящи визуализации за лесно споделяне.
- Целева страница за нов продукт, създадена за една вечер – казус на NordHarvest с готова визитка за социални медии.
- Уебсайт на клиника за пластична хирургия с изкуствен интелект и приложения чрез Telegram.
- Уебсайт на 1001site: прегледите за социални мрежи и автоматичното публикуване в Telegram се конфигурират автоматично.
Ботове и автоматизация
- Telegram бот с изкуствен интелект за онлайн магазин за сосове.
- QuestFlow е SaaS конструктор Telegram ботове с изкуствен интелект.
- Агенти за електронна търговия вместо чатботове.
Изпрати ми линк, който изглежда зле в месинджър в Telegram, и ще ти кажа кой таг липсва.
Резултат
- Онлайн инструмент за проверка на Open Graph показва как изглежда дадена връзка във Facebook, X и LinkedIn и кои тагове липсват.
- Изискваният минимум е og:title, og:type, og:image (1200×630, пълен адрес) и og:url плюс twitter:card.
- След отстраняване на проблеми, нулирайте кеша на сайтовете: Sharing Debugger, Post Inspector, @WebpageBot.
- За каталога и блога, изображенията за предварителен преглед трябва да се събират автоматично, както е в 1001site.
Проверете страницата, която ще споделите, в безплатния Open Graph Debugger, преди последователите ви да видят публикацията.
Източници
- Страница с инструмента за дебъгване на Open Graph на PromoPilot — списък с проверки и ЧЗВ.
- Open Graph Protocol (ogp.me) - задължителни и незадължителни свойства.
- Meta's Sharing Debugger и LinkedIn Post Inspector са официалните инструменти на платформите.
