Při sdílení odkazu na webovou stránku na sociálních sítích, jako je Facebook nebo LinkedIn, očekáváme, že se zobrazí náhled s titulkem, popisem a hlavně obrázkem. Pokud se ale obrázek nezobrazí, problém často spočívá v chybějících nebo nesprávně nastavených tzv. Open Graph meta tagů. Tento článek vás provede nejčastějšími příčinami a ukáže, jak problém vyřešit, konkrétně v redakčním systému Joomla.
Co jsou Open Graph meta tagy
Open Graph (OG) tagy jsou speciální HTML značky v hlavičce webu, které definují, jak se má stránka zobrazit při sdílení na sociálních sítích. Klíčové tagy jsou:
<meta property="og:title" content="Titulek stránky">
<meta property="og:description" content="Popis stránky">
<meta property="og:image" content="https://example.com/cesta-k-obrazku.jpg">
<meta property="og:url" content="https://example.com/aktualni-stranka">
Nejčastější příčiny nezobrazování obrázku při sdílení
-
Chybějící og:image – stránka vůbec neobsahuje odkaz na náhledový obrázek.
-
Nesprávná cesta k obrázku – relativní URL, špatné oprávnění, nebo obrázek fyzicky neexistuje.
-
Obrázek nesplňuje technické požadavky – Facebook vyžaduje obrázky o minimální velikosti 1200×630 px a poměru stran 1.91:1.
-
Facebook má stránku v cache – stará verze stránky může být uložená, a změny se tak neprojeví.
Jak problém vyřešit v Joomle
Joomla nativně Open Graph tagy nepodporuje, ale existují tři možnosti jejich doplnění:
1. Přidání OG tagů pomocí rozšíření
Doporučené pluginy:
Tato rozšíření umožňují snadné nastavení og:image, og:title i dalších tagů pro každou stránku zvlášť.
2. Ruční vložení OG tagů do šablony
V souboru index.php aktivní šablony (obvykle v /templates/nazev_sablony/index.php) vložte následující kód do části <head>:
<?php
$doc = JFactory::getDocument();
$img = 'https://vasweb.cz/images/og-image.jpg'; // Vlastní cesta k obrázku
$doc->addCustomTag('<meta property="og:image" content="'.$img.'" />');
$doc->addCustomTag('<meta property="og:title" content="'.$this->title.'" />');
$doc->addCustomTag('<meta property="og:description" content="Popis stránky." />');
$doc->addCustomTag('<meta property="og:type" content="website" />');
$doc->addCustomTag('<meta property="og:url" content="'.JURI::current().'" />');
?>
3. Ověření pomocí Facebook Sharing Debuggeru
Po provedení úprav navštivte nástroj Facebook Sharing Debugger, vložte URL vaší stránky a klikněte na Scrape Again. Tím Facebook znovu načte obsah stránky a aktualizuje náhled.
Doporučení pro og:image
-
Minimální rozlišení: 1200 × 630 px
-
Formát: JPG nebo PNG
-
Umístění: obrázek musí být veřejně přístupný, ideálně na stejném doménovém jméně jako stránka
-
Nepoužívejte obrázky chráněné heslem, ve složkách typu /administrator nebo za firewallem
Pokud chcete, aby vaše stránky vypadaly reprezentativně i na sociálních sítích, přidání správně nastavených Open Graph tagů je zásadní. V Joomle to lze vyřešit jak rozšířeními, tak úpravou šablony. Nezapomeňte ověřit výsledek pomocí Facebook Debuggeru a vybrat vhodný obrázek pro og:image. Tím výrazně zlepšíte dojem při sdílení a zároveň podpoříte návštěvnost svých stránek.
