Zpět na blog
Přemýšleli jste někdy nad tím, proč vaše odkazy sdílené na Facebooku nebo Twitteru vypadají občas divně? Víte, jak ovlivnit vzhled sdílených blogových příspěvků na sociálních sítích?
Pokud si nejste jistí, zda jste udělali vše pro optimalizaci informací o vašem článku nebo stránce, které se zobrazují na Facebooku a Twitteru, čtěte dál. Ukážeme vám, jak používání správných social media meta tags pomůže vylepšit celkový look & feel vašich náhledů příspěvků.
Při sdílení odkazu na článek chcete, aby váš post po publikování na sociálních sítích vypadal skvěle. Měl by obsahovat kvalitní obrázek, správný název, description a URL. Facebook, Twitter a další platformy si tyto parametry berou přímo z vašeho webu.
To, co si z příspěvku vytáhnou, můžete sami ovládat pomocí social media meta tags (například Open Graph tagů) v HTML kódu svých stránek.
Pokud jsou Facebook meta tagy (= Open Graph meta tagy) přítomny, určujete vy, co se v příspěvku na Facebooku zobrazí. Pokud tyto Open Graph (og) vlastnosti nezahrnete, Facebook sice informace o článku zobrazí, ale pravděpodobně ne tak, jak byste si přáli. Analogicky to funguje i u Twitter meta tagů. Pojďme si to ukázat na příkladu sdílení odkazu na Facebooku.
Sdílení webového obsahu na Facebooku
Facebook je skvělá platforma pro sdílení nového obsahu. Vytvoření postu z článku na webu je jednoduché – stačí vložit link do pole pro nový příspěvek.
Podívejme se na tento proces blíž. Jako příklad použijeme náš článek o Facebook Marketing Strategy.
Po vložení URL do pole pro nový příspěvek si Facebook vytáhne data z cílové adresy a vytvoří nám pěkně formátovaný post. Formát se okamžitě ukáže v náhledu – jak pro desktop, tak pro mobil. Pokud k organizaci obsahu používáte Kontentino, náhled (preview) se vám okamžitě zobrazí přímo v Kontentino kalendáři.
Jak pochopit meta tagy v HTML kódu stránky
Meta tagy pro vyhledávače
Úplně nahoře vidíme několik vlastností definujících parametry článku, kterým se říká meta tagy. Některé z nich používají vyhledávače, aby pochopily, o čem obsah webu je, a to díky doplňujícím informacím, které se přímo na stránce nezobrazují. Mezi ně patří například:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Obrázek níže ukazuje HTML kód pro tento post od Kontentina. Tyto meta tagy jsou vyznačeny zelenou barvou.
Identifikace meta tagů v HTML kódu příspěvku Facebook Ads Target Audiences 101: The Ultimate Guide
Tip: Nevíte, jak zobrazit HTML kód webu? Jednoduše stiskněte CTRL+U v prohlížeči na Windows nebo Option + Command + U na Macu.
Díky těmto tagům vyhledávače vědí, že indexování této stránky a jejích parametrů má být nastaveno na “follow” (dofollow). Zadaný meta title a meta description vyhledávače používají k zobrazení odkazu ve výsledcích vyhledávání (SERP). Jako příklad vidíte, že meta title a meta description jsou nastaveny takto:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
Víme, že tyto meta tagy nemají optimální délku, ale dnes tu nejsme kvůli SEO nebo Googlu. Pojďme tedy rovnou na tagy níže, které obsahují text „og:“.
Tyto vlastnosti se označují jako social meta tags, social media meta tags nebo prostě og meta vlastnosti.
Jak vidíte, v HTML kódu našeho blogu je 7 různých og meta vlastností. Jsou to:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Kromě toho existují další Facebook meta tagy spojené s vlastností og:image, které zahrnují:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Kromě výše uvedených najdete v HTML kódu také speciální social meta tagy pro Twitter, jako jsou:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Vraťme se k našemu příkladu se sdílením na Facebooku. Abychom ovlivnili vzhled nového postu s vloženým odkazem, musíme pochopit a upravit obsah „og:“ meta vlastností.
Čtěte dál a zjistěte více o: i) Dekódování og: meta vlastností; ii) Tipech pro psaní obsahu pro social meta tagy; a iii) Úpravě těchto vlastností v CMS vašeho webu.
Publikování na Facebook a Twitter s Kontentinem
Zaregistrujte se k 14denní zkušební verzi Kontentina a ovládněte social media meta tags s námi. Prohlédněte si náhled příspěvku v Kontentinu ještě před jeho publikováním.
Zkratka „og:“ v kódu vašeho webu znamená „Open Graph“. Jde o protokol, který umožňuje Facebooku říct, jak má sdílený obsah vypadat. Jak jsme už zmínili (a Facebook to uvádí ve svých pokynech pro vývojáře), „bez těchto Open Graph tagů používá Facebook Crawler interní heuristiku k nejlepšímu odhadu názvu, popisu a náhledového obrázku vašeho obsahu“. Explicitní definování těchto informací pomocí Open Graph tagů pomáhá zajistit maximální kvalitu příspěvků na Facebooku.
Jak vidíte, tyto og meta tagy jsou pro Facebook extrémně důležité. Pokud jste o nich ještě neslyšeli nebo si myslíte, že jsou novinkou, možná vás překvapí, že Open Graph protokol spustil Facebook už před 10 lety (v roce 2010). Dnes jej spravuje Open Web Foundation.
Open Graph protokol staví na různých existujících technologiích a schématech, aby pomohl vývojářům bohatě reprezentovat jakoukoli webovou stránku v rámci sociálního grafu. Historie už bylo dost; pojďme na detaily jednotlivých og meta tagů. Podíváme se podrobně na 4 z nich – ty, které jsou zodpovědné za vzhled našeho vloženého příspěvku na Facebooku: og:title, og:image, og:url a og:description.
Vlastnost og:title
Tato meta vlastnost patří mezi čtyři základní metadata v rámci protokolu Open Graph (spolu s og:type, og:image, og:url). Zadáním og:title nastavujeme nadpis našeho objektu (v tomto případě blogového postu), jak se má v sociálním grafu zobrazovat. Facebook si tento og:title vytáhne a zobrazí ho jako titulek příspěvku.
Vlastnost og:image
Sem vložíme URL obrázku, který má náš objekt (článek) reprezentovat. V tomto případě by zde měl být odkaz na náhledový obrázek (featured image). Specifikací og:image zajistíme, že se na Facebooku zobrazí přesně tento obrázek.
V opačném případě by si Facebook mohl vybrat jiný obrázek z webu; mohl by to být hlavní obrázek z výpisu článků, obrázek z horní části textu nebo jakýkoli jiný grafický prvek z blogu.
Vlastnost og:url
Tento meta tag obsahuje kanonickou (hlavní) URL našeho objektu, která bude sloužit jako jeho trvalé ID v sociálním grafu. V našem případě je URL v og:url https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Vlastnost og:description
Specifikace meta tagu og:description nám pomůže zajistit zobrazení popisku při sdílení. Jak vidíte u kódu v obrázku, je to: „Find out how to reach the right people with Facebook Ads target audiences.“
Twitter meta tags
Twitter meta tagy fungují analogicky k Open Graph tagům a určují obsah, který si Twitter vytáhne při sdílení webové stránky na této platformě.
Jak ovládnout og meta tagy
Facebook a Twitter nabízejí pokyny k využití výše zmíněných meta tagů. V naší tabulce níže shrnujeme základní informace o nich spolu s příslušnými doporučeními.
Teď, když známe různé typy social meta tagů a jejich vliv, je čas jít do CMS vašeho webu a zjistit, kde a jak je upravit. Ukážeme si to na příkladech z WordPressu, který je zdaleka nejpoužívanějším CMS na světě.
Pokud používáte SEO plugin, jako je Yoast SEO, Rank Math, All in One SEO a podobně, budou se vám při upravování těchto metadat hodit. Téměř každý kvalitní SEO plugin umožňuje změnit meta tagy pro Facebook a Twitter zvlášť. V následujícím textu si ukážeme, jak na to v pluginu Rank Math.
Začneme úpravou příspěvku a kliknutím na kartu SEO. Tam je potřeba otevřít záložku „Social“.
Hledání místa pro úpravu social media meta tags ve vašem CMS
Rank Math obsahuje živý náhled, který vám umožní vidět, jak změny ovlivní zobrazení příspěvku na Facebooku nebo Twitteru. Klikněte na tlačítko „Preview & Edit Social Media“.
Úprava Facebook meta tagů
Nejdříve uvidíme náhled příspěvku na Facebooku a pod ním social media meta tagy, které lze přizpůsobit.
Náhled sdílení odkazu generovaný vaším CMS – v tomto případě pluginem RankMath
V našem případě nebyly vlastnosti og:image, og:title a og:description dosud specifikovány. Jak vidíte, simulátor (preview snippet editor) ukazuje hodnoty ze základních metadat používaných pro vyhledávače.
Úprava social media meta tags: tagy og:title a og:description vašeho příspěvku
Na našem úplně prvním obrázku v tomto článku vidíme, že největším problémem je chybějící titulek. Vyplníme tedy titulek i popis.
Dále bychom se po uložení změn měli podívat, jak bude aktualizovaný příspěvek vypadat při sdílení na Facebooku.
Nové social media meta tags vyplněné pro daný příspěvek
Ačkoli Facebook doporučuje pro og:description 2 až 4 věty, pro tuto ukázku zůstaneme u jedné věty. Chceme vědět, zda ji Facebook vůbec zobrazí poté, co jsme na kartě vytvořili místo zkrácením parametru og:title.
Než zkontrolujeme výsledek, měli bychom zmínit i další řešení pro úpravu Open Graph parametrů ve WordPressu. Pokud nepoužíváte SEO plugin, můžete využít specializovaný plugin jako OG nebo vložit metadata manuálně do HTML kódu. To bude užitečné i pro jiná CMS. WIX má vestavěné řešení pro vkládání og meta vlastností, stejně jako další velké redakční systémy.
Jakmile máte úpravy hotové, je čas vyzkoušet sdílení. K náhledu upravených příspěvků na Facebooku můžeme použít Facebook Debugger (oficiálně Facebook Sharing Debugger). Předtím si nezapomeňte vymazat mezipaměť (cache) nebo dočasné soubory prohlížeče, pokud se nevymazaly automaticky po uložení postu.
Open Graph meta tagy v nástroji Facebook Link Sharing Debugger
Náhled odkazu ve Facebook Sharing Debugger ukazuje vaše social media meta tags v akci
Jak vidíte výše, vše vypadá dobře a změny v meta tagách se projevily.
Časté mýty o social media meta tagách
Mýtus 1: Meta tagy jsou jen pro SEO účely.
Meta tagy nejsou jen pro vyhledávače – hrají kritickou roli v tom, jak se váš obsah zobrazuje na sociálních sítích. Tagy jako og:image a og:title optimalizují vaše příspěvky pro platformy jako Facebook a Twitter, čímž zvyšují engagement.
Mýtus 2: Všechny obrázky se na sociálních sítích zobrazí perfektně.
Ne každý obrázek z vašeho článku se při sdílení zobrazí správně. Bez specifikace og:image nebo použití Twitter karty mohou platformy vybrat náhodný obrázek nebo vizuál špatně naformátovat.
Mýtus 3: Meta tagy jsou důležité jen pro jednostránkové weby.
Meta tagy jsou zásadní pro weby s mnoha stránkami. Ať už máte blog nebo e-shop, používání og:type a dalších tagů zajišťuje konzistentní a optimalizované zobrazení napříč platformami.
Mýtus 4: Můžete se spolehnout, že sociální sítě zobrazí váš obsah správně samy.
Spoléhat se na to, že Facebook nebo Twitter automaticky správně naformátují váš post, je přinejmenším riskantní. Bez manuálního nastavení tagů jako og:url a og:description mohou platformy vykreslit nesprávná nebo neúplná data.
Mýtus 5: Implementace tagů je bez programování obtížná.
Pluginy pro WordPress a nástroje jako Rank Math proces přidávání meta tagů zjednodušují. Nemusíte být vývojář, abyste zajistili, že vaše posty budou pro sdílení optimalizované.
Mýtus 6: Twitter karty fungují jen se statickými obrázky.
Twitter karty podporují různé formáty médií, včetně GIFů a videí. Ke své souhrnné kartě (summary card) můžete přiložit různé typy obsahu, aby byly vaše posty dynamičtější.
Mýtus 7: Meta tagy jsou jen pro váš vlastní obsah.
Meta tagy nejsou jen o vašem webu; pomáhají, i když je váš obsah sdílen na jiných stránkách. Správně nastavené og:image a og:title zajistí profesionální vzhled obsahu bez ohledu na to, kde se objeví.
Závěr
Doufáme, že vám tento článek pomohl pochopit og meta vlastnosti a jejich důležitost pro sdílení odkazů na Facebooku a Twitteru. Pokud chcete svůj social media marketing posunout na další úroveň, určitě vyzkoušejte Kontentino. Je to intuitivní nástroj pro tvorbu obsahu, který podporuje efektivní týmovou spolupráci a schvalování obsahu.
Náš Content Calendar má integrovanou funkci preview, takže nemusíte nikam jinam, abyste viděli, jak bude váš link post vypadat. Šetříme tak váš drahocenný čas při optimalizaci social media meta tags.
A co může být lepšího než nastavit UTM tagy pro sledování výkonu v analytice, naplánovat datum publikace nebo rovnou přidělit rozpočet na boosting pro širší dosah?
FAQ
Co je social media meta tag?
Social media meta tag poskytuje sociálním sítím klíčová data, jako jsou nadpisy, obrázky a popisky, při sdílení webových stránek. Je nezbytný pro zvýšení engagementu uživatelů na hlavních platformách.
Jaké jsou příklady meta tagů?
Příklady zahrnují meta property=”og:title”, meta property=”og:image” a meta property=”og:url”, které optimalizují sdílení na Facebooku a Twitteru a zajišťují správnou reprezentaci obsahu.
Co jsou social media metadata?
Social media metadata zahrnují Open Graph data, jako je výstižný nadpis, popis a kvalitní obrázky, které vylepšují vzhled příspěvků na sítích jako Twitter a Facebook.
Co jsou social media tagy?
Jsou to identifikátory jako Twitter card tagy nebo og tagy vložené v HTML souboru, které ovlivňují zobrazení webových stránek při sdílení a zvyšují jejich viditelnost.
Jak vytvořit meta tagy?
Pro vytvoření meta tagů vloží vývojář několik řádků kódu do HTML souboru stránky, včetně parametrů jako title tag, description tag a unikátní obrázek reprezentující daný obsah.
Které sítě používají meta tagy?
Meta tagy používají hlavní platformy jako Facebook, Twitter a LinkedIn k optimalizaci vzhledu stránek a příspěvků při sdílení, což pomáhá zvyšovat zapojení uživatelů.
Je meta tag nutný?
Ano, pro online marketing jsou klíčové, protože kontrolují, jak váš obsah vypadá, zajišťují zobrazení správného obrázku a nadpisu, což vede k častějšímu sdílení a vyššímu engagementu.
Jak najdu meta tagy?
Meta tagy najdete v HTML kódu webu. Nástroje jako Facebook Debugger nebo různé online služby vám také pomohou zobrazit konkrétní vlastnosti jako og:image nebo og:type.
Kolik meta tagů mám používat?
Používejte základní tagy jako og:title, og:image, og:url a Twitter card tagy. Upřednostněte kvalitu před kvantitou a zaměřte se na tagy s největším dopadem na vzhled.
Co je Facebook meta tag?
Jde o součástí Open Graph protokolu, například meta property=”og:title”. Pomáhá určit, jak se vaše stránky nebo posty zobrazí na Facebooku pro lepší interakci s uživateli.
Co je obsah og:title?
Vlastnost og:title definuje nadpis vaší stránky, který se zobrazí při sdílení na sociálních sítích, jako je Facebook.
Co je obsah og:image?
Vlastnost og:image určuje URL adresu obrázku, který se má vykreslit při sdílení vašeho obsahu na digitálních platformách.
Co je obsah og:type?
Vlastnost og:type definuje typ sdíleného obsahu (např. článek, web), což pomáhá platformám obsah lépe kategorizovat a správně zobrazit.
Co jsou metadata? 3 příklady?
Příklady metadat zahrnují description tag, session variables pro identifikaci uživatele a tag meta property=”og:image”, který pomáhá vybrat ten správný obrázek pro sdílení.
