Кароткі адказ: каб праверыць Open Graph онлайн, устаўце адрас старонкі ў бясплатны Open Graph Debugger PromoPilot. Ён прачытае ўсе тэгі og:* і Twitter Card, праверыць наяўнасць і памер карцінкі, ацэніць паўнату разметкі і пакажа прэв'ю спасылкі для Facebook, X (Twitter) і LinkedIn - плюс рэкамендацыі, што дадаць. Рэгістрацыя не патрэбна. Ніжэй - якія тэгі абавязковыя, які патрэбен памер og:image і як абнавіць «якая захрасла» прэв'ю.
Я 12 гадоў раблю сайты, і пытанне "чаму спасылка ў Telegram без карцінкі" чую ад кліентаў часцей, чым пытанні пра пазіцыі. Звычайна гэта пяць хвілін працы - калі ведаць, дзе глядзець.
Што правярае Open Graph Debugger?
Калі вы ўстаўляеце спасылку ў пост ці паведамленне, пляцоўка заходзіць на старонку і шукае тэгі Open Graph. Знайшла - малюе акуратную картку. Не знайшла - бярэ што патрапіла або паказвае голы адрас. Інструмент правярае роўна тое, што прачытаюць сацсеткі.
| Што правярае | Што глядзіць | Навошта гэта бізнэсу |
|---|---|---|
| Усе тэгі og:* | og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale | З іх пляцоўкі збіраюць загаловак, апісанне і карцінку карткі. |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) чытае свае тэгі, а пры іх адсутнасці - часткова og |
| Малюнак OG | ці ёсць карцінка і якога яна памеру | Дробная карцінка ператварае картку ў малюсенькі абразок збоку. |
| Ацэнка паўнаты | колькі рэкамендуемых тэгаў запоўнена | Хуткі арыенцір: ці ўсё на месцы |
| папярэдні прагляд | карткі для Facebook, X і LinkedIn | Відаць, як пост будзе выглядаць да публікацыі |
| Рэкамендацыі | што дадаць ці выправіць | Гатовы спіс задач для распрацоўніка ці для вас |
Як праверыць Open Graph старонкі анлайн?
- Адкрыйце Open Graph Debugger.
- Устаўце адрас старонкі, якой збіраецеся дзяліцца: артыкулы, тавара, лендынгу пад рэкламу. Націсніце "Праверыць".
- Прайдзіце па спісе тэгаў: якія зададзены, якія пустыя, ці няма ў og:url чужога ці тэставага адрасу.
- Паглядзіце прэв'ю для кожнай сеткі: ці абрэзаны загаловак, ці бачная карцінка, ці няма на ёй важнага тэксту па краях.
- Дадайце якія адсутнічаюць тэгі па рэкамендацыях і праверце старонку зноў.
Старонка інструмента: поле для адраса, кнопка "Праверыць", спіс праверак і FAQ.
Інструмент лёгкі: госцю хапае дзённага ліміту, каб праверыць усе шаблоны сайта - галоўную, катэгорыю, тавар і артыкул. Пасля бясплатнай рэгістрацыі ліміт у тры разы большы.
Якія памылкі ў Open Graph сустракаюцца часцей за ўсё?
Вось што я знаходжу амаль на кожным другім сайце, і ў якім парадку гэта рабіць.
- Няма og:image ці ён паказаны адносным адрасам.
content="/img/cover.jpg"сацсеткі не зразумеюць — патрэбен поўны адрас зhttps://. Без карцінкі ахоп паста прыкметна падае. - Малюнак занадта маленькая. Лагатып 200×200 ператварае картку ў маленькі квадрат узбоч. Патрэбна карцінка 1200×630.
- Адна og:image на ўвесь сайт. Кожны артыкул і кожны тавар у сацсетках выглядаюць аднолькава - з лагатыпам. Для блога і каталога карцінка павінна падстаўляцца з галоўнага фота старонкі.
- og:url вядзе на іншы адрас - на галоўную, на тэставы дамен або на версію з
http://. Пляцоўка можа склеіць усе спасылкі ў адну картку. - Няма twitter:card. Без яго X часта паказвае маленькую картку. Для буйной карцінкі патрэбен
summary_large_image. - og:title дублюе 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 – Open Graph Debugger | Усе og- і twitter-тэгі, памер og:image, папярэдні прагляд для Facebook, X і LinkedIn, рэкамендацыі | Не скідае кэш сацсетак | Праверыць старонку да публікацыі ў любых сацсетках адразу |
| Sharing Debugger (Meta) | папярэдні прагляд для Facebook і паўторны збор дадзеных | Толькі Facebook, патрэбен уваход у акаўнт | Скінуць старое прэв'ю ў Facebook |
| LinkedIn Post Inspector | папярэдні прагляд для LinkedIn і абнаўленне кэша | Толькі LinkedIn, патрэбен уваход | Тым, хто прасоўваецца ў LinkedIn |
| Бот @WebpageBot у Telegram | Абнаўленне папярэдні прагляд спасылкі ў Telegram | Толькі Telegram, тэгі не разбірае | Уладальнікам Telegram каналаў |
Выснова: афіцыйныя адладчыкі пляцовак патрэбны, каб скінуць кэш, але кожны паказвае толькі сваю сетку. Каб за адзін заход убачыць усе прэв'ю і спіс якія адсутнічаюць тэгаў, зручней універсальны адладчык.
Дарэчы, у PromoPilot 87 бясплатных SEO-інструментаў. Калі вы яшчэ не напісалі тэгі - у нашай серыі ёсць артыкул пра генератар мета-тэгаў, ён збярэ блок Open Graph з прэв'ю.
Чым адладчык Open Graph адрозніваецца ад аналізу мета-тэгаў?
Аналіз мета-тэгаў глядзіць старонку вачыма пошукавіка: title, description, canonical, 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 Debugger" PromoPilot - спіс праверак і FAQ.
- Пратакол Open Graph (ogp.me) - абавязковыя і дадатковыя ўласцівасці.
- Sharing Debugger ад Meta і LinkedIn Post Inspector - афіцыйныя інструменты пляцовак.
