Co je to Open Graph?

Open Graph Protocol, nebo ve zkratce “Open Graph” je strukturovaný markup, který můžete přidat do vaše HTML kódu. Díky němu lépe vysvětlíte kontext vašeho obsahu a také získáte kontrolu nad úryvky, které se zobrazí při sdílení URL na sociálních sítích, jako jsou Facebook, LinkedIn, Twitter nebo Google+, a v aplikacích jako Slack.

Facebook Open Graph - ilustrace

Zde na příkladu vidíme, jak je zobrazován příspěvek aerolinek KLM s použitím Open Graph markupu.

Facebook Open Graph - příklad

Proč bych se měl o Open Graph zajímat?

Mít zobrazenou atraktivní fotku, která zaujme a také skvěle napsaný titulek s popiskem, který motivuje na příspěvek kliknout, to je základem, pokud chcete posunout svoji návštěvnost ze sociálních sítí na vyšší úroveň.

Open Graph markup vám umožní získat kontrolu nad tím, co bude na sociálních sítích zobrazeno. Ve světě SEO jsme v honbě za větší proklikovostí (CTR) všichni takřka posedlí optimalizací titulků a meta descriptions. Jak ale přijde na sociální média, je to často zapomenuto nebo upozaděno. To je škoda, protože stejná bitva o pozornost jako v SERPu, se odehrává i tam.

Může Open Graph zlepšit můj ranking?

Ne. Open Graph vaše pozice a hodnocení přímo neovlivní. I přesto si myslíme, že Open Graph pomáhá vyhledávačům porozumět vašemu obsahu podobně jako Schema.org. Takže z hlediska výkonu vašeho SEO vám to pomáhá.

Jak jsme zmínili, pokud chcete získat vyšší návštěvnost ze sociálních medií, pak implementaci Open Graph vřele doporučujeme.

Nakonec to nedá o tolik víc práce vyplnit také Open Graph titulek, popis a obrázek, zatímco si hrajete s vylepšením vašeho titulku a meta description.

Jaké platformy podporují Open Graph?

Jako developer Open Graphu je jedním z nich logicky Facebook.

Open Graph je ale podporován také minimálně těmito dalšími platformami:

  • LinkedIn
  • Google+
  • Slack
  • Twitter

Je třeba mít na paměti, že Twitter vyvinul svoji vlastní verzi nazvanou Twitter Cards. Pokud ale Twitter Cards nejsou k dispozici, vytváří úryvky stejně z Open Graph prvků dané URL.

Jak Open Graph implementovat?

Implementace se provádí přidáním Open Graph markupu do HTML kódu stránek v sekci <head>. To můžete udělat manuálně, nebo pokud váš web jede na CMS, pravděpodobně zde pro to bude dostupná i funkce nebo plugin. Pokud ne, poraďte se o tom se svými vývojáři. Není nijak těžké takovou funkcionalitu vytvořit.

Zde jsou vyžadované Open Graph vlastnosti:

  1. og:url
  2. og:title
  3. og:description
  4. og:image

A také dvoje doporučené vlastnosti. Díky nim poskytnete ještě více kontextu o svém obsahu:

  1. og:type
  2. og:locale

Podívejme se na příklad s Open Graph

Když je náš článek o Schema.org sdílen na Facebooku, vypadá následovně:

Open graph na Facebooku - příklad úryvku

Pokud se podíváme do zdrojového kódu, tak implementace Open Graph vypadá takto:

Open Graph - úryvek kódu

og:locale

Vlastnost og:locale popisuje lokalitu, na kterou stránka cílí. V tomto případě je výchozí hodnota en_US. Můžeme říci, že og:locale je podobný jako hreflang atribut, který se v SEO využívá k zacílení na určitě publikum.

Pokud máte obsah dostupný pro další lokality, můžete definovat alternativní verze za pomoci og:locale:alternate.

Příklad úryvku kódu
<meta property="og:locale" content="en_US" />

Požadavky
Použitá hodnota zahrnuje dvoumístný jazykový kód, podtržítko a dvoumístný kód zěmě.

Co se stane pokud není definován:
Pokud není og:locale definován nebo vyplněn, je výchozí hodnotou en_US.

Více o og:locale
Dokumentace Facebooku pro vývojáře.

og:type

Vlastnost og:type popisuje typ obsahu - v tomto případě článek. Tento tag má vliv, jak se vaše stránka zobrazuje ve feedu facebooku. Typů, mezi kterými můžete vybírat je mnoho, například: product, book, place, profile nebo video.movie. Vlastnost og:type je srovnatelná se Schema typy.

Příklad úryvku kódu
<meta property="og:type" content="article" />

Požadavky
Pro stránku může být definovaný pouze jeden typ.

Co se stane pokud není definován
Pokud nedefinujete og:type, je výchozím typem website.

Více o og:type
Dokumentace Facebooku pro vývojáře.

og:title

Vlastnost og:title je určena pro Open Graph titulek, který uvádí název stránky. Vlastnost og:title je podobná <title> tagu v SEO.

Příklad úryvku kódu
<meta property="og:title" content="Structured data using Schema.org: the Ultimate Guide" />

Požadavky
Titulek by neměl zahrnovat žádný brand. Měl by popisovat název obsahu. Při optimalizaci úryvků pro Facebook mějte navíc napaměti:

  • Váš titulek se nevejde na jeden řádek, pokud je delší než 55- 60 znaků.
  • Váš og:description se nezobrazí, pokud titulek zabírá dva řádky.

Co se stane, když není definován
Platforma použije váš <title> tag nebo twitter:title jako náhradu.

og:description

Vlastnost og:description se používá pro Open Graph popis. Jedná se o krátký popis, o čem stránka je.

Příklad úryvku kódu
<meta property="og:description" content="Get more clicks and outsmart your competitors with Schema.org!" />

Požadavky
Při optimalizaci mějte na paměti, že váš titulek se nevejde na jeden řádek, pokud je delší než 55- 60 znaků.

Co se stane, když není definován
Platforma místo toho použije meta description nebo twitter:description.

og:url

Vlastnost og:url popisuje kanonickou verzi URL, tedy verzi bez parametrů.

Příklad úryvku kódu:
<meta property="og:url" content="https://www.contentkingapp.com/academy/schema/" />

Požadavky
Je nezbytné, abyste zde definovali kanonickou verzi URL. To proto, aby lajky a sdílení byly přiřazeny této URL namísto nekanonické verze.

Co se stane, když není definován
Protože se jedná o vyžadovanou vlastnost, vaše Open Graph implementace neprojde ověřením.

og:site_name

Vlastnost og:site_name popisuje název stránky - ale nyní již není vyžadovanou vlastností.

Příklad úryvku kódu
<meta property="og:site_name" content="Real-time SEO Auditing and Content Tracking" />

article:section

Vlastnost article:section je vlastností og:type, která popisuje část webu, ke které stránka náleží. V našem případě je article:section kategorie, ve které se nacházejí články z naší Akademie.
Příklad úryvku kódu:
<meta property="article:section" content="Structured Data" />

Požadavky
Žádné

Co se stane, když není definován
Platformy nebudou schopné poznat k jaké části vašeho webu tato stránka patří.

Více o article:section
Dokumentace Facebooku pro vývojáře.

og:image

Vlastnost og:image definuje obrázek, který by měl být zobrazen v úryvku. Ujistěte se, že výběru těchto obrázků věnujete dostatek pozornosti, protože na velikosti, kvalitě i správných rozměrech prostě záleží.

Příklad úryvku kódu:
<meta property="og:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Požadavky
Když přijde na og:image, mějte na paměti následující požadavky:

  • Pokud chcete, aby byl v úryvku zobrazen velký obrázek, ujistěte se, že má alespoň 600 x 315 pixelů. Ideálně však 1200 x 630 pixelů pro zobrazení na obrazovkách s vysokou hustotou pixelů (jako např. retina obrazovky Apple)
  • Pokud je definován obrázek menší než 600 x 315, váš úryvek bude obsahovat také menší obrázek.
  • Absolutní minimum pro velikost je 200 x 200 pixelů. Menší obrázky neprojdou přes ověření.
  • Maximální velikost souboru je 8 MB pro obrázek.
  • Abyste měli jistotu, že vaše obrázky nebudou oříznuty, držte se poměru stran 1.91:1.

Co se stane, když není definován
Vaše Open Graph implementace nebude platná a social media platformy budou na vašich stránkách hledat jiný obrázek k zobrazení. A je zde velká šance, že to bude vypadat … řekněme, že nepěkně, protože pro obrázky jsou stanoveny poměrně striktní požadavky.

Další volitelná pole pro og:image
Více informací o obrázku mohou doplnit další volitelná pole pro og:image:

  • og:image:url: to je alternativa k og:image
  • og:image:width a og:image:height: specifikuje šířku a výšku obrázku, umožňující při sdílení načítat obrázek správně.
  • og:image:type: vám umožní definovat typ obrázku. Podporované hodnoty jsou:
    • image/jpeg
    • image/gif
    • image/png

og:image:secure_url

og:image:secure_url definuje HTTPS verzi og:image.

Příklad úryvku kódu:

<meta property="og:image:secure_url" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Požadavky
URL obrázku musí být dostupné přes HTTPS.

Co se stane, když není definován
Není úplně jasné, co se v takovém případě stane.

Další Open Graph vlastnosti

Zde najdete dostupných mnoho dalších Open Graph vlastností. Tady je pár z nich, které stojí za zmínku:

  • og:video: využívá se ke specifikování videa. Přečtěte si o tom více v Dokumentaci Facebooku pro vývojáře.
  • og:updated_time: říká, kdy byl obrázek naposledy aktuálizován.
  • og:ttl: udává počet sekund, předtím než může být stránka znovu načtena Facebookem. Je to způsob, jak limitovat procházení Facebooku.

Ověřte svoji Open Graph implementaci pomocí nástrojů

K ověření své implementace můžete použít Facebook Open Graph debugger.

Každopádně tento nástroj vás nechá ověřit najednou pouze jednu URL. Dává tedy smysl mít řešení, které vám dovolí kontrolovat stránky hromadně. A právě to je práce pro ConentKing - poskytnout vám kompletní audit vaší Open Graph implementace v reálném čase na celém webu.

Contentking - open graph problém

Osvědčené postupy

Pokud řešíte Open Graph, myslete na dodržení následujících postupů:

  1. Ujistěte se, že definujete alespoň všechny požadované vlastnosti pro Open Graph. Ale ideálně také ty doporučené.
  2. Mějte svůj og:title kratší než 55–60 znaků.
  3. Mějte svůj og:description kratší, než 60–65 znaků.
  4. Pro og:image použijte obrázky ve vysoké kvalitě, alespoň 1200 x 630 pixelů a s velikostí menší než 8 MB.
  5. Během příprav Open Graph markupu na stránce, ji vždy projeďte skrze Open Graph debugger, abyste zobrazili svůj úryvek a ujistili se, že všechna data jsou vyplněná. Upravujte a vylepšujte, dokud vše nebude v pořádku. Další výhodou je, že tento úryvek je už “před-načten”. To znamená, že bude také správně zobrazen i v moment, kdy bude poprvé sdílený.
  6. Pokud jste udělali nějakou chybu, opravili ji a chcete, aby Facebook vygeneroval nový úryvek, jděte do Open Graph debuggeru a klikněte na “Fetch new scrape information”, čímž se znovu načte cache. Problém je, že to automaticky neaktualizuje také obrázek - pro to musíte definovat novou og:image URL a teprve pak opět kliknout na “Fetch new scrape information.”
  7. Použijte og:image:width a og:image:height, abyste umožnili Facebooku apod. načíst obrázek správně ihned potom, co je poprvé sdílen.

Získejte zkušební verzi na 14 dní zdarma

Začněte během 20 vteřin

Vložte platnou doménu, prosím (www.priklad.cz).
  • Platební karta není potřeba
  • Není třeba žádná instalace
  • Bez závazků