Späť na blog
Premýšľali ste niekedy nad tým, prečo vaše linky zdieľané na Facebooku alebo Twitteri niekedy vyzerajú zvláštne? Viete, ako ovplyvniť vzhľad zdieľaných blogových príspevkov na sociálnych sieťach?
Ak si nie ste istí, či ste urobili všetko pre optimalizáciu informácií o vašom príspevku alebo stránke, ktoré sa zobrazujú na Facebooku a Twitteri, čítajte ďalej. Ukážeme vám, ako používanie správnych social media tagov pomôže zlepšiť look & feel náhľadov vašich príspevkov.
Pri zdieľaní odkazu na článok chcete, aby váš post po uverejnení na sociálnych sieťach vyzeral dobre. Mal by obsahovať kvalitný obrázok, správny názov, description a URL. Facebook, Twitter a ďalšie platformy získavajú tieto parametre priamo z vášho webu.
To, čo si platformy z príspevku vytiahnu, môžete kontrolovať zahrnutím meta tagov pre sociálne siete (napríklad open graph tagy) do HTML kódu vašich príspevkov.
Ak sú prítomné Facebook meta tagy (= Open Graph meta tagy), vy určujete, čo sa v príspevku zobrazí. Ak tieto Open Graph (og) vlastnosti nenastavíte, Facebook síce informácie o článku zobrazí, ale pravdepodobne nie tak, ako by ste si priali. Analogicky to funguje aj pri Twitter meta tagoch. Poďme si to ukázať na príklade zdieľania linku na Facebooku.
Zdieľanie webového obsahu na Facebooku
Facebook je skvelá platforma na zdieľanie nového obsahu. Vytvorenie nového postu z článku na webe je také jednoduché, ako vloženie linku do okna pre nový príspevok.
Pozrime sa na tento proces zblízka. Ako príklad použijeme náš článok o Facebook marketingovej stratégii.
Po vložení URL do okna pre nový príspevok Facebook natiahne dáta z cieľovej adresy a vytvorí formátovaný post. Formát sa okamžite zobrazí v náhľade – pre desktop aj mobil. Ak na správu obsahu používate Kontentino, preview máte okamžite k dispozícii v kalendári.
Pochopenie meta tagov v HTML kóde stránky
Meta tagy pre vyhľadávače
Úplne navrchu môžeme vidieť vlastnosti definujúce parametre článku, nazývané meta tagy. Niektoré z nich používajú vyhľadávače, aby pochopili obsah webu pomocou dodatočných informácií, ktoré sa bežne na stránke nezobrazujú. Patria sem napríklad:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Obrázok nižšie ukazuje HTML kód pre tento príspevok od Kontentina. Tieto meta tagy sú označené zelenou farbou.
Identifikácia meta tagov v HTML kóde príspevku Facebook Ads Target Audiences 101: The Ultimate Guide
Tip: Neviete, ako zobraziť HTML kód vášho webu? Stačí stlačiť CTRL+U v prehliadači na Windowse alebo Option + Command + U na Macu.
Vďaka týmto meta tagom vyhľadávače vedia, že indexovanie tejto stránky a jej parametrov sú nastavené na „follow“ (dofollow). Zadaný meta title a meta description používajú vyhľadávače na zobrazenie odkazu vo výsledkoch vyhľadávania (SERP). Tu sú nastavené nasledovne:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow‘
- Meta description: ‘Zistite, ako zasiahnuť správnych ľudí pomocou cieľových skupín Facebook Ads.‘
Vieme, že tieto meta tagy nemajú optimálnu dĺžku, ale nie sme tu preto, aby sme riešili SEO alebo Google. Poďme rovno na meta tagy nižšie, ktoré obsahujú text „og:“.
Tieto tagy sa označujú ako sociálne meta tagy, social media meta tags alebo jednoducho og vlastnosti.
V HTML kóde nášho blogu nájdete 7 rôznych og vlastností:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Okrem toho existujú ďalšie Facebook meta tagy – og vlastnosti priradené k obrázku (og:image):
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Okrem toho nájdete v HTML kóde aj špeciálne meta tagy pre Twitter, ako napríklad:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Vráťme sa k nášmu príkladu s Facebookom. Aby sme ovplyvnili vzhľad nášho príspevku, musíme pochopiť a upraviť obsah „og:“ vlastností.
Čítajte ďalej a zistite viac o: i) Dekódovaní og: meta vlastností; ii) Odporúčaniach pre písanie obsahu pre sociálne meta tagy; a iii) Úprave týchto vlastností v CMS vášho webu.
Publikovanie na Facebook a Twitter s Kontentinom
Zaregistrujte sa na 14-dňový trial Kontentina a ovládnite meta tagy pre sociálne siete. Pozrite si náhľad príspevku v Kontentine ešte pred uverejnením.
„og:“ v HTML kóde znamená „Open Graph“. Je to protokol, ktorý umožňuje povedať Facebooku, ako má zobraziť zdieľaný obsah. Ako sme už spomenuli (a Facebook to uvádza vo svojich inštrukciách pre vývojárov), „bez týchto tagov používa Facebook Crawler internú heuristiku, aby najlepšie odhadol názov, popis a náhľadový obrázok pre váš obsah.“ Explicitné definovanie týchto informácií pomáha zabezpečiť najvyššiu kvalitu príspevkov na Facebooku.
Tieto og meta tagy sú pre Facebook kľúčové. Možno vás prekvapí, že Open Graph protokol spustil Facebook už pred 14 rokmi (v roku 2010). Dnes ho však spravuje Open Web Foundation.
Open Graph protokol stavia na existujúcich technológiách a schémach, aby pomohol vývojárom reprezentovať akúkoľvek webovú stránku v rámci sociálneho grafu. Dosť bolo histórie, poďme na detaily. Pozrieme sa na 4 hlavné tagy, ktoré zodpovedajú za vzhľad príspevku: og:title, og:image, og:url a og:description.
Vlastnosť og:title
Tento meta tag patrí medzi štyri základné metadáta Open Graphu. Určuje nadpis vášho objektu (v tomto prípade blogového príspevku), ako sa má objaviť v sociálnom grafe. Facebook si tento og:title vytiahne a zobrazí ho ako názov príspevku.
Vlastnosť og:image
Sem vložíte URL obrázka, ktorý má reprezentovať váš článok. V ideálnom prípade by tu mal byť odkaz na featured image. Definovaním og:image zabezpečíte, že sa na Facebooku zobrazí presne ten obrázok, ktorý chcete.
V opačnom prípade by si Facebook mohol vybrať iný obrázok z článku, napríklad logo alebo akúkoľvek inú grafiku, ktorá sa nachádza na podstránke.
Vlastnosť og:url
Tento meta tag obsahuje kanonickú URL vášho objektu, ktorá slúži ako jeho trvalé ID v sociálnom grafe. V našom prípade je to https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Vlastnosť og:description
Špecifikovaním og:description určíte popis, ktorý sa zobrazí pri zdieľaní. Ako vidíte na obrázku HTML kódu, v našom prípade je to: „Zistite, ako zasiahnuť správnych ľudí pomocou cieľových skupín Facebook Ads.“
Twitter meta tags
Twitter meta tagy fungujú analogicky k Open Graph tagom a určujú obsah, ktorý Twitter natiahne pri zdieľaní webovej stránky na tejto platforme.
Ovládnutie og meta tagov
Facebook aj Twitter ponúkajú odporúčania, ako tieto meta tagy využívať. V tabuľke nižšie sumarizujeme základné informácie a odporúčania.
Keď už rozumieme typom sociálnych meta tagov, je čas ísť do CMS vášho webu a zistiť, kde ich upraviť. Ukážeme si to na príklade WordPressu, ktorý je svetovou jednotkou medzi CMS.
Ak používate SEO plugin ako Yoast SEO, Rank Math alebo All in One SEO, úprava týchto metadát bude hračka. Väčšina kvalitných pluginov umožňuje nastaviť meta tagy pre Facebook a Twitter samostatne. My si ukážeme nastavenie v Rank Math.
Začneme úpravou príspevku a kliknutím na kartu SEO. Tam treba otvoriť záložku „social“.
Kde nájsť editáciu social media meta tagov vo vašom CMS
Rank Math obsahuje live previewer, kde vidíte, ako zmeny ovplyvnia zobrazenie na Facebooku alebo Twitteri. Kliknite na tlačidlo „Preview & Edit Social Media“.
Úprava Facebook meta tagov
Najprv sa zobrazí náhľad Facebook postu a pod ním meta tagy, ktoré môžete prispôsobiť.
Náhľad zdieľania odkazu generovaný vaším CMS – v tomto prípade pluginom Rank Math
V našom prípade vlastnosti og:image, og:title a og:description ešte neboli špecifikované. Simulátor (preview editor) preto ukazuje hodnoty zo základných metadát pre vyhľadávače.
Úprava meta tagov pre sociálne siete: og:title a og:description vášho príspevku
Na prvom obrázku v tomto blogu vidíme, že najproblematickejší je chýbajúci nadpis. Vyplníme preto Title aj Description.
Po uložení zmien sa pozrieme, ako bude aktualizovaný príspevok vyzerať pri zdieľaní na Facebooku.
Novo vyplnené meta tagy pre sociálne siete
Hoci Facebook odporúča použiť 2 až 4 vety pre og:description, pre túto ukážku zostaneme pri jednej. Chceme vidieť, či ju Facebook vôbec zobrazí po tom, čo sme skrátili og:title a vytvorili tak viac miesta na karte.
Predtým, než skontrolujeme výsledok, spomeňme ďalšie riešenia pre WordPress. Ak nepoužívate SEO plugin, môžete siahnuť po špecializovanom plugine ako OG alebo vložiť metadáta manuálne do HTML kódu. To sa hodí aj pre iné CMS. WIX má zabudované riešenie na vkladanie og vlastností, podobne ako iné veľké systémy.
Keď skončíte s úpravami, otestujte zdieľanie. Môžete použiť Facebook Debugger (oficiálne Facebook Sharing Debugger), niekedy nazývaný aj FB preview tool. Predtým si nezabudnite vymazať cache alebo dočasné súbory v prehliadači, ak sa nevymazali automaticky.
Open Graph meta tagy vo Facebook Link Sharing Debugger
Náhľad odkazu vo Facebook Sharing Debugger ukazuje meta tagy v akcii
Ako vidíte vyššie, všetko vyzerá dobre a zmeny v meta tagoch sa prejavili.
Časté mýty o meta tagoch pre sociálne siete
Mýtus 1: Meta tagy sú len pre SEO.
Meta tagy nie sú len pre vyhľadávače – hrajú kľúčovú úlohu v tom, ako sa váš obsah zobrazuje na sociálnych sieťach. Tagy ako og:image a og:title optimalizujú vaše príspevky špeciálne pre Facebook a Twitter, čím zvyšujú engagement.
Mýtus 2: Každý obrázok sa na sociálnych sieťach zobrazí dokonale.
Nie každý obrázok z vášho článku sa pri zdieľaní zobrazí správne. Bez definovania og:image alebo Twitter card môžu platformy vybrať náhodný obrázok alebo zle orezať vizuál, čo poškodí vzhľad vášho postu.
Mýtus 3: Meta tagy sú dôležité len pre jednostránkové weby.
Práve naopak, sú nevyhnutné pre weby s viacerými podstránkami. Či už ide o blogy alebo produktové karty, používanie og:type a ďalších tagov zabezpečuje konzistentné a optimalizované zobrazenie naprieč platformami.
Mýtus 4: Sociálne siete si váš obsah sformátujú správne samy.
Spoliehať sa na automatiku Facebooku alebo Twitteru je riskantné. Bez manuálneho nastavenia og:url a og:description môžu platformy natiahnuť nesprávne alebo neúplné dáta, čo odradí ľudí od kliknutia.
Mýtus 5: Implementácia meta tagov je náročná bez programovania.
WordPress pluginy ako Rank Math výrazne zjednodušujú správu meta tagov. Nemusíte byť developer, aby ste zaistili, že vaše príspevky budú pri zdieľaní vyzerať profesionálne.
Mýtus 6: Twitter Cards fungujú len so statickými obrázkami.
Twitter Cards podporujú rôzne formáty vrátane GIFov a videí. K súhrnnej karte môžete priložiť rôzne médiá, vďaka čomu budú vaše príspevky dynamickejšie a pútavejšie.
Mýtus 7: Meta tagy sú dôležité len pre váš vlastný obsah.
Meta tagy pomáhajú aj vtedy, keď váš obsah zdieľajú iní ľudia na svojich weboch alebo profiloch. Správne nastavenie og:image a og:title zaručí profesionálny vzhľad bez ohľadu na to, kto a kde váš link zdieľa.
Záver
Dúfame, že vám tento článok pomohol lepšie porozumieť og meta vlastnostiam a ich významu pre zdieľanie na Facebooku a Twitteri. Ak chcete posunúť svoj marketing na sociálnych sieťach na vyššiu úroveň, vyskúšajte Kontentino. Je to intuitívny nástroj na tvorbu obsahu, ktorý podporuje efektívnu tímovú spoluprácu a schvaľovanie obsahu.
Náš Content Calendar obsahuje funkciu náhľadu, takže nemusíte nikam chodiť, aby ste videli, ako bude váš nový link post vyzerať. To vám ušetrí čas pri kontrole a optimalizácii vašich meta tagov.
A čo môže byť lepšie ako rovno nastaviť UTM tagy na sledovanie výkonu v analytike, naplánovať publikáciu alebo priradiť budget na boosting príspevku pre širší reach?
FAQ
Čo je meta tag pre sociálne siete?
Tento meta tag poskytuje kľúčové údaje ako nadpisy, obrázky a popisy pre platformy sociálnych sietí pri zdieľaní webových stránok. Je nevyhnutný pre zvyšovanie engagementu používateľov.
Aké sú príklady meta tagov?
Príkladmi sú meta property=“og:title“, meta property=“og:image“ a meta property=“og:url“, ktoré optimalizujú zdieľanie na platformách ako Facebook a Twitter a zabezpečujú dobrú reprezentáciu vášho obsahu.
Čo sú metadáta pre sociálne siete?
Tieto metadáta zahŕňajú open graph dáta, ako sú stručný nadpis, popis a kvalitné obrázky, ktoré zlepšujú vzhľad príspevkov na platformách Twitter a Facebook.
Čo sú social media tagy?
Sú to identifikátory ako twitter card tagy alebo og tagy vložené do HTML súboru, ktoré ovplyvňujú, ako sa stránky zobrazujú pri zdieľaní a čím zvyšujú sociálnu expozíciu.
Ako vytvoriť meta tagy?
Webový vývojár vloží niekoľko riadkov kódu do HTML súboru stránky, vrátane parametrov ako title tag, description tag a unikátny obrázok reprezentujúci obsah.
Ktoré sociálne siete používajú meta tagy?
Používajú ich hlavné platformy ako Facebook, Twitter a LinkedIn na optimalizáciu vzhľadu stránok a príspevkov pri zdieľaní v rámci sietí.
Je meta tag nevyhnutný?
Áno, meta tagy sú kľúčové pre online marketing, pretože kontrolujú vzhľad vášho obsahu na platformách, zabezpečujú správny obrázok a nadpis, čo zvyšuje zdieľanie a engagement.
Ako nájsť meta tagy?
Môžete si pozrieť HTML kód webu alebo použiť nástroje ako Facebook Debugger a ďalšie online služby, ktoré vám zobrazia konkrétne vlastnosti ako og:image alebo og:type.
Koľko meta tagov by som mal používať?
Používajte základné tagy ako og:title, og:image, og:url a Twitter card tagy. Uprednostnite kvalitu pred kvantitou a zamerajte sa na tagy s najväčším vplyvom na zdieľanie.
Čo je Facebook meta tag?
Facebook meta tag, napríklad meta property=“og:title“, je súčasťou Open Graph protokolu. Pomáha určiť, ako sa vaše stránky alebo príspevky zobrazia na Facebooku.
Čo je meta property og:title content?
Definuje nadpis vašej webovej stránky tak, ako sa zobrazí pri zdieľaní na platformách sociálnych sietí, napríklad na Facebooku.
Čo je meta property og:image content?
Určuje URL obrázka, ktorý sa zobrazí pri zdieľaní vášho obsahu na sociálnych sieťach.
Čo je meta property og:type content?
Definuje typ obsahu (napr. článok, webová stránka), čo pomáha platformám správne ho kategorizovať a zobraziť.
Čo sú metadáta? Uveďte 3 príklady.
Príkladmi sú description tag, tag meta property=“og:image“ pre výber správneho obrázka a tagy pre roboty určujúce indexáciu stránky.
