Open Graph meta tagy – Co potřebujete vědět

Chcete, aby si lidé všimli vašich příspěvků na sociálních sítích?

Každý den vznikne přes 4 miliony blogových příspěvků, proto je klíčové sdílet svou práci na sociálních sítích. Open Graph je jednou z nejdůležitějších součástí pro oslovení širšího publika.

Ne všichni lidé vědí o důležitosti Open Graph. Co to vlastně je? Jak vám to může pomoci, aby si vás všimli?

Co je Open Graph?

„Open Graph meta tagy, podobně jako meta descriptions a titles, určují, jak se URL adresy zobrazují, když jsou sdíleny na sociálních sítích.“

Díky projektu Open Graph od Facebooku, který standardizuje sociální informace napříč webovými stránkami, je snazší definovat obsah stránky na sociálních sítích.

Tyto tagy poskytují službám sociálních sítí informace, jako je název stránky, description a hlavní obrázek, a to v sekci head webové stránky. Tento proces zachovává konzistenci a autentičnost zobrazených informací.

Proč používat Open Graph?

Open Graph je podporován v různých sociálních sítích, jako jsou:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Podle Googlu protokol zlepšuje „Recommended Content Blocks“.

Co se stane, když se Open Graph nepoužívá?

Protože si Facebook není jistý, co zobrazit v náhledu, může použít jakýkoli obrázek, který najde (může dokonce vzít reklamní banner nebo něco z vaší hlavičky).

V důsledku toho Facebook nedokáže určit, které části náhledu má zobrazit.

• Open Graph vytváří náhledy pro webové stránky související se sociálními médii.
• Open Graph tagy pomáhají jednotlivcům najít materiál v sociálních feedech, což vede ke zvýšené návštěvnosti.

Čím výše se váš materiál objeví, když návštěvníci procházejí stránku vašeho webu, tím více pozornosti získá. Umožňuje uživatelům získat náhled před kliknutím.

Použijte OG tagy, abyste pomohli lidem najít váš materiál na Facebooku a dalších platformách sociálních médií.

OG meta elementy se používají k vytváření úryvků, když jsou URL sdíleny v soukromých konverzacích na webech, které protokol využívají.

Význam protokolu Open Graph pro vaše podnikání

Tento typ interakce je zjednodušen protokolem Open Graph od Facebooku. Open Graph markup je metoda organizace a sledování dat náhledů. Umožňuje vám plnou kontrolu nad tím, jak se váš materiál zobrazuje na sociálních sítích, které nejsou vaše vlastní.

Pro usnadnění integrace byly vytvořeny bohaté grafové objekty, které sdílejí standardní sadu charakteristik Facebooku. Facebook má kontrolu nad tokem informací z externích zdrojů (nebo lajkovaných atd.). Tyto informace jsou poskytovány Open Graph meta tagy, když procházejí hlavičkou webové stránky.

Protože mnoho lidí přistupuje na stránku přes sociální média, jsou Open Graph tagy důležitější než kdy jindy. CTR se může zvýšit, když se zlepší vyhledávání. Open Graph usnadňuje proces sdílení na sociálních sítích. Open Graph je široce podporován napříč sociálními sítěmi. Open Graph tagy Twitteru/X jsou dobrým příkladem; Twitter/X podporuje Open Graph.

Co to přesně znamená?

Proč se obtěžovat označováním obsahu na straně serveru pomocí Open Graph? Existuje potenciál, že dodatečné tagy zlepší výkon vašeho webu a přilákají více návštěvníků? Zde jsou některé z důvodů, proč věříme, že Open Graph může znamenat obrovský rozdíl.

Většina prominentních sociálních sítí využívá Open Graph tagy

Pokud nemáte čas se učit HTML, můžete místo toho využít Facebook Open Graph tagy. Tyto štítky můžete použít k personalizaci názvů, descriptions a fotografií, které se zobrazují na všech hlavních sociálních sítích.

Open Graph tagy jsou skutečně pro sociální média

Open Graph byl navržen tak, aby zobrazoval ukázky informací v rámci sociální sítě. Organizuje informace způsoby, které přesahují pouhé sdílení webové stránky.

Optimalizovaný obrázek

Pomocí Open Graph tagů můžete určit, který obrázek se má zobrazit ve vašem sociálním náhledu. Nemusíte volit výchozí možnost. Lidé jsou více nakloněni klikat na odkazy na váš blogový příspěvek nebo web, pokud vypadají skvěle.

Jde o sociální náhledy, nikoli o náhledy vyhledávání

Optimalizace pro vyhledávače (SEO) i marketing na sociálních sítích jsou klíčové, ale mají odlišné požadavky. Komponenty Open Graph vyřešily starý problém SEO: skutečnost, že náhledy příspěvků na sociálních sítích měly neatraktivní názvy a descriptions.

Název stránky, meta descriptions a Open Graph title, description, URL a picture tagy musí být jedinečné, aby byl obsah optimalizován pro vyhledávače a sociální sítě.

Máte kontrolu nad svým materiálem

Ať už svůj materiál zveřejníte sami, nebo to udělá někdo jiný, máte plnou kontrolu nad tím, jak se zobrazí na sociálních sítích.

I když si každý příspěvek na sociálních sítích přizpůsobíte, většina vašich klientů náhled ignoruje. Návštěvníci, kteří se rozhodnou sdílet váš materiál, tak učiní s dobře zvoleným obrázkem, názvem a description, pokud jsou vaše Open Graph tagy co nejlepší. To je velmi důležité, protože máte plnou kontrolu nad informacemi, které se o vašem podnikání šíří.

Typy Open Graph tagů

Open Graph tagy jako og:title, og:image, og:type a og:url umožňují platformám sociálních sítí zobrazovat vaše informace. Tyto kritické tagy musíte použít, ale můžete použít i jiné.

Snímek obrazovky Facebooku obsahující propojení s komponentami og:image, og:url, og:title a og:description.

og:site_name

Tag og:site_name by měl obsahovat doménu, kde se váš obsah nachází. V důsledku toho nahrazuje název značky, který by byl v meta title (a proto by byl zakázán v og:title tagu).

Tag og:site_name by měl obsahovat název vašeho webu nebo značky, zatímco tag og:title by měl obsahovat název vašeho článku.

og:site_name Kód <meta property="og:site_name" content="Your Site Name" />

Použijte stejný site name tag na celém svém webu.

og:title

Tag og:title je doporučen pro nastavení názvu stránky. Je to podobné, jako se meta titles používají v SEO. Při použití existujícího meta title se ujistěte, že pole og:title neobsahuje žádný obsah, který je specifický pro vaši značku nebo web.

og:title Kód <meta property="og:title" content="Title" />

Tento tag by se měl objevit na každé stránce vašeho webu, kterou by uživatel mohl chtít sdílet na Facebooku, Twitteru/X nebo jiné sociální síti.

Udržujte název mezi 40 a 50 znaky; jinak bude zkrácen.

Pokud chcete, aby více lidí navštívilo váš web, název musí dělat víc než jen popisovat.

Na rozdíl od meta titles pro vyhledávače byste neměli zahrnovat název své domény ani žádné jiné informace, které by mohly být použity k vaší identifikaci.

og:type

Použijte tag og:type k určení typu odesílaného materiálu. To informuje sociální síť o typu obsahu, který sdílíte, například blogový příspěvek, webová stránka, video nebo zvukový soubor.

og:type Kód <meta property="og:type" content="article" />

Použijte typ objektu article pro informace, které vyžadují vysvětlení, jako jsou blogové příspěvky.

Přidejte typ website na ostatní stránky webu.

Musíte použít správný formát souboru, pokud chcete přenést soubor, který obsahuje text i audio nebo video. Tato stránka obsahuje seznam všech kategorií objektů.

og:locale

Tag og:locale poskytuje informace o jazyce, ve kterém je přenášený materiál napsán. Uživatelé sociálních sítí by měli být informováni, že obsah zveřejněný na webových stránkách může být zobrazen v řadě jazyků.

og:locale Kód <meta property="og:locale" content="en_GB" />

Protože Facebook předpokládá, že vše, co postrádá tag og:locale, je napsáno v americké angličtině, pokud provozujete web ve Spojených státech, který je zcela složen z anglického materiálu, můžete tento tag (en_US) ignorovat.

Pokud je obsah, který poskytujete, napsán v jiném jazyce než americké angličtině, ujistěte se, že používáte správný OG tag.

og:url

Jednoduše použijte tag og:url k určení, kam chcete obsah publikovat.

og:url Kód <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Tento tag musí poskytovat kanonickou URL stránky.

og:description

Prohlášení, které je zahrnuto v tagu og:description, musí být stručné, nekomplikované a co nejvíce poutavé, aby povzbudilo čtenáře k návštěvě webové stránky.

Informace můžete volně znovu použít, pokud jsou relevantní, vzhledem k tomu, že tento tag je podobný tomu, který používají vyhledávače.

og:description Kód <meta property="og:description" content="Your description." />

Bylo by užitečné, kdybyste svůj description udrželi mezi 50 a 100 znaky. Příspěvky na Facebooku by měly mít maximálně dvě až čtyři slova; příspěvky delší než čtyři slova jsou pravděpodobněji smazány.

Abyste získali co nejvíce kliknutí a pozornosti k materiálu, který poskytujete, měl by být váš description co nejpodrobnější a nejpřesvědčivější.

og:image

Pomocí elementu og:image zadejte URL obrázku, který se má použít v sociálním úryvku. Použijte obrázek, který je zajímavý a přímo relevantní k obsahu článku, abyste zvýšili pravděpodobnost, že lidé prokliknou na váš web.

Tento OG element funguje podobně jako image schema markup, který je využíván vyhledávači k poskytování bohatých výsledků.

og:image Kód <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Pokud chcete, aby se sdílené stránky vašeho webu umístily výše v optimalizaci obrázků pro vyhledávače, použijte inovativní fotografie, které odpovídají vaší značce. I když se stránka pravděpodobně nebude často sdílet, je chytré ji označit svým logem pro případ, že ji někdo v budoucnu sdílí.

Aby se zabránilo pixelizaci nebo nízké kvalitě, vaše původní grafika by měla mít poměr stran 1.91:1 a rozlišení minimálně 1200 x 630 pixelů.

Tagy og:image:width a og:image:height zajišťují, že dříve sdílené obrázky se zobrazují správně. Nainstalujte si Yoast na svůj WordPress web, pokud jste tak ještě neučinili, abyste je měli přidány automaticky. Pokud jste tak ještě neučinili, zde je kód:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Přidání Open Graph do WordPressu

Přidání OG tagů do WordPressu je nejsnadnější, nejběžnější a nejjednodušší způsob, jak toho dosáhnout pomocí pluginu Yoast SEO. Tento plugin by již měl být nainstalován, pokud je váš web nastaven tak, aby jej vyhledávače snadno nalezly.

Aktualizujte stránku nebo článek, kam má být Open Graph vložen, pomocí možnosti „social“ v Yoast SEO.

Vyplňte pole og:image, og:title a og:description v sekci Facebook.

Yoast za vás nakonfiguruje váš og:url tag, Twitter/X Card a velikosti obrázků. Pokud Yoastu neřeknete, aby použil konkrétní obrázek, použije hlavní obrázek z příspěvku.

Když je váš web sdílen, ve výchozím nastavení se nezobrazí žádný obrázek. To můžete změnit poskytnutím snímku celé stránky. K této chybě dochází, když URL obrázku postrádá tag og:image.

Na hlavní stránce nastavení Yoastu můžete vybrat og:image pro celý web.

Přidání OG tagů do vašeho WordPress blogu je opravdu snadné. Stačí jít na:

Boční panel WordPressu: Yoast>Social>Facebook.

Přepněte přepínač a poté uložte existující obrázek. Věříme, že byste měli vybrat logo. Totéž můžete udělat i pro Twitter/X a Pinterest.

Přidání Open Graph ručně

Pokud umíte kódovat a nepoužíváte jeden z předchozích systémů, OG tagy se snadno instalují.

Níže uvedený obsah můžete zkopírovat a vložit na svůj web, ale prosím upravte jej podle svých potřeb.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testování vašich Open Graph meta tagů

Předpokládejme, že jste pochopili, jak zahrnout Open Graph na svůj web.

Pokud je váš web správně klasifikován, měl by vypadat skvěle, když je sdílen na sociálních sítích. Vždy otestujte svou práci, než ji zveřejníte.

Než sdílíte URL, dvakrát zkontrolujte, zda se vaše OG tagy správně načítají a zobrazují.

Tyto nástroje mohou být užitečné pro testování vašich OG tagů:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Jednoduše zadejte URL do kterékoli z těchto služeb, abyste získali původní meta tagy. Když ji sdílíte, získáte představu o tom, jak se bude jevit ostatním.

Před pokračováním zkontrolujte obrázek, název a description náhledu. Můžete obdržet upozornění na tagy, které nepotřebujete, a které můžete buď přidat, nebo ignorovat.

Pokud test URL selže, měli byste to zkusit znovu s jiným tagem. Zkontrolujte, zda každý nástroj funguje, navštívením jeho URL. Můžete o tom diskutovat, až to bude hotové.

Závěr

Je klíčové udržet si kontrolu nad tím, co sdílíte na sociálních sítích. Návštěvnost a konverzní poměry se zvyšují, když jsou bohaté položky zobrazeny v Open Graph. Začněte s jedním blogovým příspěvkem. Jakmile uvidíte výsledek, bude mnohem snazší aplikovat Open Graph tagy ve vašich dalších příspěvcích v budoucnu.

Často kladené otázky