Jak používat značky Open Graph

Jak používat značky Open Graph

Používáte značky title a meta description? Samozřejmě, že ano, protože už víte, že meta tagy vám pomohou zvýšit pozice ve vyhledávačích

Ale věděli jste, že meta tagy skutečně ovlivňují návštěvnost sociálních sítí? Jistě, existují autorské značky Googlu, ale co Facebook a Twitter? Ve skutečnosti mají obě sociální média své vlastní meta tagy, které vám mohou pomoci zvýšit návštěvnost na sociálních sítích.

Vídáte někdy ty příspěvky na sociálních sítích, které mají skvěle vypadající obrázky a videa? Možná nevíte, že k tomu, abyste totéž dokázali u svých příspěvků na sociálních sítích, nepotřebujete žádný software ani prémiové účty.

Jmenují se Facebook Open Graph a Twitter Cards. Tady je návod, jak je můžete využít obě:

Facebook Open Graph

Když sdílíte obrázek na Facebooku, jak vypadá?

No, ne vždy to tak vypadá. Facebook se snaží přečíst kód na vaší stránce, ale ne vždy se mu podaří vytáhnout vaše obrázky. Pokud při sdílení adresy URL ze své stránky na Facebooku nepoužíváte značky Open Graph, může to vypadat takto:

Takhle to vypadalo u Quick Sprout, než jsem na své stránce implementoval značky Open Graph. Po implementaci značek Open Graph se mi podařilo zvýšit návštěvnost na Facebooku o 174 % jen proto, že se nyní vedle mých aktualizací stavu Quick Sprout objevil obrázek.

Teď, když jste přesvědčeni, že byste měli používat Open Graph, vám ukážeme, jak jej na svém webu nastavit.

og:title

Tam umístíte název svého obsahu. Představte si to podobně jako běžný html tag title, který by použil vyhledávač. Při vytváření og:title dbejte na to, aby počet znaků nepřesáhl 95.

Příklad: <meta property=“og:title“ content=“11 Creative Ways to Build Links“/>

og:type

Tady popisujete, jaký typ obsahu sdílíte. Jedná se o video, obrázek, příspěvek na blogu atd. Zde je úplný seznam, ze kterého můžete při definování typu obsahu vybírat:

Aktivity

• aktivity
• sport

Podniky

• bar

.

• podnik
• kavárna
• hotel
• restaurace

Skupiny

• příčina
• sportovní_liga
• sportovní_tým

Organizace

• kapela
• vláda
• nezisková organizace
• škola
• univerzita

lidé

• herec
• sportovec
• autor
• režisér
• hudebník
• politik
• veřejná_osobnost

Místa

• město
• země
• zeměpisná značka
• stát_provincie

Produkty a zábava

• album
• kniha
• nápoj
• jídlo
• hra
• výrobek
• píseň
• film
• tv_show

Webové stránky

• blog
• webové stránky
• článek

Příklad: <meta property=“og:type“ content=“article“/>

og:description

Toto je také podobné html meta description tagu, protože se používá k popisu obsahu. Nemělo by vás zajímat, zda je bohatý na klíčová slova, ale místo toho byste měli vymyslet přesvědčivý popis, který povede k většímu počtu kliknutí. Pro tento tag máte k dispozici až 297 znaků.

Příklad: <meta property=“og:description“ content=“Už vás nebaví budovat odkazy starým způsobem? Víte, metody, které vyžadují rozesílání e-mailů tisícům webmasterů s prosbou o odkazy. „/>

og:image

Pamatujete si, jak jsem se zmínil, že se mi podařilo zvýšit návštěvnost Facebooku o 174 %? Bylo to proto, že jsem pomocí Open Graph zajistil, aby se na Facebooku zobrazil obrázek pokaždé, když někdo sdílel adresu URL z Quick Sprout.

Pomocí tagu og:image zajistíte, že se vedle obsahu, který sdílíte, zobrazí obrázek. Tímto způsobem vynikne na pozadí všech ostatních textových aktualizací statusu, které lidé vidí ve svých časových osách.

Než se dostanu k tomu, jak můžete tuto značku použít, provedu vás požadavky Facebooku. Obrázek musí mít rozměry alespoň 50 × 50px, nejlépe však větší než 200 × 200px. Navíc obrázek nesmí mít velikost větší než 5 MB.

Příklad: <meta property=“og:image“ content=“https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg“/>

og:url

V tomto tagu byste měli umístit adresu URL stránky, kterou sdílíte. Tento tag se může zdát nepodstatný, ale je důležitý, protože někdy budete mít více než jednu adresu URL pro stejný obsah. Použitím tohoto tagu zajistíte, že všechna sdílení půjdou na jednu adresu URL oproti více adresám URL, což by mělo pomoci vašemu Edgeranku na Facebooku.

Příklad: <meta property=“og:url“ content=“https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/“/>

og:site_name

Tento tag sděluje společnosti Facebook název vaší webové stránky. Tento tag ve skutečnosti nepotřebujete, ale není na škodu ho zahrnout.

Příklad: <meta property=“og:site_name“ content=“Quick Sprout“/>

fb:admins

Pokud máte fanouškovskou stránku na Facebooku a chcete získat více údajů v aplikaci Facebook Insights, pak musíte použít tento tag. Řekne Facebooku, že jste vlastníkem stránky, a propojí vaši fanouškovskou stránku na Facebooku s vaší webovou stránkou.

Příklad: <meta property=“fb:admins“ content=“500013011″/>

Teď, když máte zavedené metaznačky Facebook Open Graph, přejděme ke kartám Twitter.

Karty Twitteru

Viděli jste někdy takový tweet?“

Tak tyto podrobné tweety se zobrazují pouze tehdy, když využíváte karty Twitteru. Nechtěli byste je mít i pro své stránky? Pomůže vám to vyniknout z davu.

Tady je návod, jak využít Twitter Cards:

Pokud používáte doplněk SEO pro WordPress od Yoast, stačí postupovat podle následujících kroků. Všichni ostatní postupujte podle následujících kroků:

twitter:card

Tato metaznačka popisuje typ obsahu, který sdílíte. U Twitteru máte tři možnosti: fotografie (pro obrázky), přehrávač (pro videa) a shrnutí (pro vše ostatní). Pokud kartu nedefinujete, Twitter ve výchozím nastavení zvolí shrnutí.

Příklad: <meta name=“twitter:card“ content=“summary“>

twitter:url

Toto je stránka, kterou sdílíte na Twitteru. Podobně jako Facebook požaduje adresu URL, dělá to i Twitter, protože stejný obsah můžete mít na své stránce vícekrát. Tím zajistíte, že se na jednu adresu URL dostanou všechny tweety. V opačném případě budou vaše tweety rozděleny do více URL.

Příklad: <meta name=“twitter:url“ content=“https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/“>

twitter:title

Podobně jako u názvu Open Graph na Facebooku by tento název neměl být naplněn klíčovými slovy. Udělejte ho přesvědčivý, aby na něj lidé chtěli kliknout. Opět, stejně jako u Facebooku, budete chtít omezit počet znaků na 70.

Příklad: <meta name=“twitter:title“ content=“11 kreativních způsobů, jak budovat odkazy“>

twitter:description

Toto je podobný tag jako meta description, který byste použili pro Google. Nenapěchujte ho však klíčovými slovy. Vaším cílem by mělo být vytvořit přesvědčivou větu, která přiměje lidi kliknout na váš web. Váš popis je omezen na 200 znaků.

Příklad: <meta name=“twitter:description“ content=“ Už vás nebaví budovat odkazy postaru? Víte, metody, které vyžadují rozesílání e-mailů tisícům webmasterů s prosbou o odkazy. „>

twitter:image

Aby váš tweet vynikl, potřebujete obrázek. Velikost vašeho obrázku musí být menší než 1 MB a nesmí být menší než 60 × 60px. Obrázky větší než 120px na 120px budou zmenšeny.

Příklad: <meta name=“twitter:image“ content=“ https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg“>

Po použití metaznaček Twitter Card na webu je třeba se přihlásit do programu Twitter Card. Jakmile budete přijati, adresy URL z vašeho webu se budou zobrazovat ve formátu karty.

Závěr

Meta tagy nejsou určeny pouze pro vyhledávače. Využívají je také weby sociálních médií. Stejně jako byste optimalizovali meta tagy pro pozice v Googlu a míru prokliku, musíte totéž udělat pro Facebook a Twitter.