Open Graph a meta tagy pro sdílení

00:00:00

Pokaždé, když někdo sdílí tvou stránku na Facebooku, X (Twitteru) nebo WhatsAppu, sociální síť si ji „přečte\" a zobrazí náhled – název, popis a obrázek. Bez správně nastavených meta tagů se zobrazí náhodný text nebo vůbec nic. Tato lekce tě naučí, jak to napravit.

Co je Open Graph?

Open Graph (OG) je protokol vyvinutý Facebookem, který dnes používají všechny hlavní sociální sítě. Funguje přes speciální meta tagy v sekci <head>. Pomocí nich říkáš sociálním sítím, jak má náhled tvé stránky vypadat.

Bez těchto tagů si sociální síť obsah „odhadne\" sama – výsledek je nepředvídatelný a obvykle ošklivý. S tagy máš plnou kontrolu.

Základní Open Graph tagy

Tato čtveřice tagů by měla být na každé stránce:

<meta property="og:title" content="Učebna programování HTML – Crazy-Mac.cz">
<meta property="og:description" content="Praktický průvodce pro začátečníky: HTML, CSS a JavaScript.">
<meta property="og:image" content="https://crazy-mac.cz/images/web-og.jpg">
<meta property="og:url" content="https://crazy-mac.cz/doc/web.html">
  • og:title – název stránky zobrazený v náhledu. Nemusí být totožný s tagem <title>, ale obvykle je.
  • og:description – krátký popis, 1–2 věty. Zobrazí se pod nadpisem náhledu.
  • og:image – URL obrázku náhledu. Musí být absolutní adresa (začínat https://). Doporučená velikost je 1200 × 630 px.
  • og:url – kanonická URL stránky.

Další užitečné Open Graph tagy

<meta property="og:type" content="website">
<!-- Typ obsahu: website, article, video.movie, music.song… -->

<meta property="og:locale" content="cs_CZ">
<!-- Jazyk stránky -->

<meta property="og:site_name" content="Crazy-Mac.cz">
<!-- Název webu (ne konkrétní stránky) -->

Twitter / X Card tagy

X (dříve Twitter) má vlastní sadu meta tagů, tzv. Twitter Cards. Jsou podobné Open Graph, ale nejsou totožné. Hodí se přidat obě sady:

<meta name="twitter:card" content="summary_large_image">
<!-- Typ karty: summary (malý obrázek), summary_large_image (velký obrázek) -->

<meta name="twitter:title" content="Učebna programování HTML">
<meta name="twitter:description" content="Praktický průvodce pro začátečníky.">
<meta name="twitter:image" content="https://crazy-mac.cz/images/web-og.jpg">

Pokud jsou přítomné Open Graph tagy a Twitter Card tagy chybí, X obvykle použije hodnoty z OG. Pro jistotu je ale lepší mít obě sady.

Meta tagy pro vyhledávače (SEO)

Vedle sociálních sítí jsou důležité i meta tagy pro vyhledávače:

<meta name="description" content="Praktický průvodce pro začátečníky: HTML, CSS a JavaScript.">
<!-- Zobrazí se jako popisek ve výsledcích Googlu (160 znaků max) -->

<meta name="author" content="Zdeněk Doležal">
<!-- Autor stránky -->

<meta name="robots" content="index, follow">
<!-- index = zahrň do indexu, follow = sleduj odkazy -->
<!-- Pokud nechceš stránku indexovat: noindex, nofollow -->

<link rel="canonical" href="https://crazy-mac.cz/doc/web.html">
<!-- Kanonická URL – zabraňuje duplicitnímu obsahu -->

Kompletní šablona meta tagů pro head

Toto je doporučená sada meta tagů, kterou lze použít jako šablonu pro každou stránku:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <meta name="description" content="Krátký popis stránky, max 160 znaků.">
  <meta name="author" content="Tvoje jméno">

  <!-- Open Graph -->
  <meta property="og:title" content="Název stránky">
  <meta property="og:description" content="Krátký popis pro sdílení.">
  <meta property="og:image" content="https://tvujweb.cz/images/nahled.jpg">
  <meta property="og:url" content="https://tvujweb.cz/stranka.html">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="cs_CZ">

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Název stránky">
  <meta name="twitter:description" content="Krátký popis pro sdílení.">
  <meta name="twitter:image" content="https://tvujweb.cz/images/nahled.jpg">

  <title>Název stránky | Název webu</title>
  <link rel="stylesheet" href="styl.css">
</head>

Jak ověřit správnost tagů

Než stránku zveřejníš, ověř, jak bude náhled vypadat:

  • Facebook Sharing Debugger – nástroj na developers.facebook.com/tools/debug, který zobrazí náhled a upozorní na chyby.
  • LinkedIn Post Inspector – linkedin.com/post-inspector
  • OpenGraph.xyz – univerzální náhled pro různé sítě najednou.

Tyto nástroje zároveň vynutí znovu načtení cache – pokud jsi tagy opravil a výsledek se ještě nezměnil, použij debugger pro obnovení.

Tip od Zdeňka

Zdeněk radí: Open Graph tagy jsou na každé stránce tohoto webu – a je to jedna z prvních věcí, které přidávám při tvorbě nové stránky. Příprava OG obrázku ve správné velikosti (1200 × 630 px) se vyplatí: náhled na sociálních sítích pak vypadá profesionálně. Obrázek by měl mít čitelný název stránky nebo logo i při malém zobrazení – nepiš tam drobný text, který nebude čitelný. A nezapomeň: absolutní URL jsou povinné, relativní cesty nefungují.