Kontrola Open Graph online: Ako sa odkaz na webovú stránku zobrazuje na sociálnych sieťach a ako to opraviť

Stručná odpoveď: ak chcete skontrolovať Open Graph online, vložte adresu stránky do bezplatného nástroja Open Graph Debugger PromoPilot. Prečíta všetky značky og:* a Twitter Card, skontroluje prítomnosť a veľkosť obrázka, vyhodnotí úplnosť označenia a zobrazí ukážky odkazov pre Facebook, X (Twitter) a LinkedIn – plus odporúčania, čo pridať. Registrácia nie je potrebná. Nižšie nájdete požadované značky, požadovanú veľkosť og:image a ako aktualizovať „zaseknutý“ náhľad.

Webové stránky tvorím už 12 rokov a otázku „Prečo odkaz Telegram nemá obrázok?“ počúvam od klientov častejšie ako otázky ohľadom umiestnenia vo vyhľadávaní. Zvyčajne je to práca na päť minút – ak viete, kde hľadať.

Čo kontroluje Open Graph Debugger?

Keď vložíte odkaz do príspevku alebo správy, platforma prejde na stránku a vyhľadá značky Open Graph. Ak nejakú nájde, nakreslí úhľadnú kartu. Ak nie, vezme si to, čo nájde, alebo zobrazí holú URL adresu. Nástroj kontroluje iba to, čo si prečítajú sociálne siete.

Ako skontrolovať stránky Open Graph online?

1. Otvoriť ladiaci program grafov.
2. Zadajte URL adresu stránky, ktorú chcete zdieľať: článok, produkt alebo reklamná vstupná stránka. Kliknite na tlačidlo „Skontrolovať“.
3. Prejdite si zoznam značiek: ktoré sú nastavené, ktoré sú prázdne a či sa v og:url nachádza cudzia alebo testovacia adresa.
4. Skontrolujte ukážku pre každú sieť: je názov orezaný, je viditeľný obrázok a či sa okolo okrajov nachádza nejaký dôležitý text.
5. Pridajte chýbajúce značky podľa odporúčania a znova skontrolujte stránku.

Stránka s nástrojmi: pole s adresou, tlačidlo „Skontrolovať“, zoznam kontrol a najčastejšie otázky.

Nástroj je nenáročný: hosťovi stačí denný limit na kontrolu všetkých šablón stránky – domovskej stránky, kategórie, produktu a článku. Po bezplatnej registrácii sa limit strojnásobí.

Aké sú najčastejšie chyby v Open Graphe?

Tu je to, čo nachádzam na takmer každej inej stránke a v akom poradí to opraviť.

1. Chýba og:image alebo je zadaný ako relatívna URL adresa. Sociálne siete nerozumejú content="/img/cover.jpg" – vyžaduje sa celá URL adresa začínajúca na https://. Bez obrázka dosah príspevku výrazne klesá.
2. Obrázok je príliš malý. Logo s rozmermi 200x200 zmení kartu na malý štvorec na boku. Je potrebný obrázok s rozmermi 1200x630.
3. Jeden og:image pre celú stránku. Každý článok a každý produkt na sociálnych sieťach by mal vyzerať rovnako – s logom. Pre blog a katalóg by mal byť obrázok prevzatý z hlavnej fotografie stránky.
4. og:url vedie na inú adresu – domovskú stránku, testovaciu doménu alebo verziu http://. Platforma dokáže zlúčiť všetky odkazy do jednej stránky.
5. Neexistuje twitter:card. Bez neho X často zobrazuje malú kartu. Pre väčší obrázok potrebujete summary_large_image.
6. og:title duplikuje nadpis s „kúpiť“ a značkou. V kanáli sociálnych médií to vyzerá ako reklama; živý nadpis, napríklad pre príspevok, je lepší.

Minimálna správna sada vyzerá takto:

<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">

Ako pripraviť obrázok pre og:image?

Obrázok je najviditeľnejšou časťou pohľadnice a práve na ňom ľudia často šetria. Tu je niekoľko pravidiel, ktoré dodržiavam:

• Veľkosť je 1200 × 630 a orientácia je horizontálna. Sociálna sieť oreže hornú a dolnú časť štvorcovej fotografie produktu, čo môže mať za následok, že produktu bude chýbať hlava alebo podrážka.
• Dôležité je, aby bol v strede. Rôzne platformy orezávajú okraje rôzne a v mobilnom feede je karta ešte menšia. Udržujte text veľký a ďalej od okrajov.
• Minimálny text. Názov je už pod obrázkom; na samotnom obrázku postačia 3 – 6 slov alebo žiadne popisky.
• Ľahký súbor. JPG alebo PNG súbor primeranej veľkosti sa načíta rýchlo a platforma sa nezasekne.
• Pre každú kľúčovú stránku samostatný obrázok. Pre články a produkty je vhodné ho vytvoriť automaticky: obálku článku alebo hlavnú fotografiu produktu.

Dobrým testom je otvoriť náhľad v debuggeri na telefóne. Ak odkaz nie je jasný bez priblíženia, je potrebné obrázok prepracovať.

Ako aktualizujem starý náhľad po oprave?

Bežný scenár: opravili ste tagy, ale sociálna sieť tvrdohlavo zobrazuje starý obrázok. Dôvodom je vyrovnávacia pamäť: platforma si pamätala ukážku z prvého zdieľania. Na Facebook pomáha opätovné zhromažďovanie údajov v Sharing Debuggeri, na LinkedIn pomocou Post Inspectoru a na Telegram pomocou bota @WebpageBot, ktorému posielate odkaz. Ak všetko ostatné zlyhá, pridajte k adrese neškodný parameter, napríklad ?v=2: pre platformu je to nový odkaz.

Porovnanie: Open Graph Debugger a alternatívy

Záver: na vymazanie vyrovnávacej pamäte sú potrebné oficiálne ladiace programy platformy, ale každá platforma zobrazuje iba svoju vlastnú sieť. Na zobrazenie všetkých ukážok a zoznamu chýbajúcich značiek naraz je pohodlnejší univerzálny ladiaci program.

Mimochodom, PromoPilot má 87 bezplatných SEO nástrojov. Ak ste ešte nepísali tagy, v našej sérii máme článok o generátore meta tagov, ktorý vytvorí blok Open Graph s náhľadom.

Aký je rozdiel medzi Open Graph Debugger a analýzou metaznačiek?

Analýza metaznačiek sa pozerá na stránku očami vyhľadávača: názov, popis, kanonický výraz, hreflang a Open Graph sú len jednou skupinou. Ladiaci program sa zameriava na sociálne médiá: vytvára karty pre rôzne platformy, kontroluje veľkosť obrázkov a poskytuje odporúčania konkrétne na základe ukážok. Ak sa odkazy na vašu stránku aktívne zdieľajú na sociálnych sieťach a v aplikáciách na odosielanie správ, ladiaci program je užitočnejší.

Oba majú jedno obmedzenie: čítajú HTML kód vrátený serverom. Ak sú značky vložené skriptom prehliadača, mnohé sociálne siete ich neuvidia – to je potrebné opraviť na strane webovej stránky. Ďalší detail: debugger kontroluje značky, ale nie samotné zdieľanie. Ak je stránka chránená heslom, geoblokovaná alebo chránená pred botmi, sociálna sieť k nej nemusí mať prístup, aj keď sú prítomné všetky značky.

Kedy bezplatný nástroj nestačí?

Ladiaci program ukáže, že stránka nemá og:image. Ak však existujú tisíce stránok, manuálne vkladanie obrázkov nie je možné. Špecialista je potrebný, keď:

• každý produkt alebo článok by mal mať svoj vlastný ukážkový obrázok, ktorý sa zhromažďuje automaticky;
• stránka vracia značky pomocou skriptu a sociálne siete ich nevidia;
• Spúšťate reklamy a rozosielate e-maily, kde každý náhľad ovplyvňuje cenu za kliknutie;
• Potrebujeme kombináciu „webovej stránky + Telegram kanála + automatického publikovania“ so správnymi kartami.

Čo môžem urobiť pre vašu webovú stránku?

Volám sa Valerij Danjuk, vývojár a SEO špecialista s 12-ročnými skúsenosťami a viac ako 200 klientmi. Krásny náhľad odkazu je dostupný zadarmo a prispôsobujem ho pre každý projekt.

SEO a propagácia

• SEO audit webových stránok na kľúč: Skontrolujem všetky tagy šablón, nastavím automatické náhľady obrázkov a opravím kód.

Webové stránky a internetové obchody

• Presun vášho obchodu z Instagram na vašu webovú stránku – produkty s vhodnými ukážkami pre jednoduché zdieľanie.
• Úvodná stránka pre nový produkt vytvorená za jeden večer – prípadová štúdia NordHarvest s hotovou vizitkou pre sociálne siete.
• Webová stránka kliniky plastickej chirurgie s umelou inteligenciou a aplikáciami cez Telegram.
• Webová stránka na 1001site: ukážky pre sociálne siete a automatické publikovanie v Telegram sú konfigurované automaticky.

Boti a automatizácia

• Telegram bot s umelou inteligenciou pre online obchod s omáčkami.
• QuestFlow je SaaS nástroj Telegram botov s umelou inteligenciou.
• Agenti elektronického obchodu namiesto chatbotov.

Pošli mi odkaz, ktorý v programe Messenger na Telegram vyzerá zle, a ja ti poviem, ktorá značka chýba.

Výsledok

1. Online kontrola Open Graph ukazuje, ako odkaz vyzerá na Facebook, X a LinkedIn a ktoré značky chýbajú.
2. Minimálne požadované údaje sú og:title, og:type, og:image (1200×630, úplná adresa) a og:url plus twitter:card.
3. Po oprave resetujte vyrovnávaciu pamäť stránok: Sharing Debugger, Post Inspector, @WebpageBot.
4. Pre katalóg a blog by sa mali obrázky ukážok zhromažďovať automaticky, podobne ako na 1001site.

Skontrolujte stránku, ktorú sa chystáte zdieľať, v bezplatnom nástroji Open Graph Debugger skôr, ako vaši sledovatelia uvidia príspevok.

Zdroje

• Stránka nástroja Open Graph Debugger od PromoPilot – zoznam kontrol a najčastejšie otázky.
• Open Graph Protocol (ogp.me) - povinné a voliteľné vlastnosti.
• Oficiálnymi nástrojmi platformy sú Meta Sharing Debugger a LinkedIn Post Inspector.