Náhled článku pro Facebook, Twitter a Google+

    • Každému tvůrci webu je asi jasné, k čemu je hlavička stránky. Mám na mysli tag <head> a v něm obsažené <title> pro text v záhlaví stránky, <link> pro vložení designové stylopisu a základní <meta> tagy pro nastavení kódování, ale také popisu a klíčových slov, které dnes už přestávají ztrácet význam (SEO experti do mě). Těch, kdo znají více tagů je už méně, což je škoda, protože právě tyhle tagy mohou výrazně ovlivnit, jak budou lidé sdílet vaše články a jak moc tohle sdílení zaujme lidi, kteří je na sociálních sítích spatří.

    Tento článek je tu v důsledku minulého článku o timemanagementu neboť jsem si lépe zorganizoval čas, takže jsem ho napsal dříve a zároveň se mi při minulém sdílení stalo, že jsem článek sdílel na Facebooku bez náhledu a lajky pod tímto sdílením se tak nepřipočetly k článku a vypadá to, že článek se nikomu nelíbil … Ano, i počítadlo sdílení můžete špatným nastavením tagů minimalizovat, což může negativně ovlivnit, kolik lidí si váš článek přečte.

    Facebook a jeho Open Graph

    Facebook svůj systém určený nejen pro sdílení nazývá Open Graph, což je důvod, proč názvy jeho metatagů začínají zkratkou og. Facebook doporučuje u náhledových obrázků velikost 1200 x 630, minimální velikost je 600 x 315, ale ta se prý u velkých displejů nemusí zobrazovat ideálně. Tahle doporučení se však mohou často měnit a aktuální by měly být vždy na webu https://developers.facebook.com/docs/sharing/best-practices

    Náhledový obrázek na Facebooku
    <meta property="og:title" content="TITULEK" />
<meta property="og:url" content="URL_ADRESA_ČLÁNKU" />
<meta property="og:type" content="article" /> //TEnhle řádek určuje, že jde o článek.
<meta property="og:description" content="POPISEK" />
<meta property="og:site_name" content="NÁZEV_STRÁNKY" />
<meta property="og:image" content="NÁHLEDOVÝ_OBRÁZEK" />

    Facebook aktualizuje náhledy jednou za čas a tak se může v době, kdy upravujete tagy hodit jejich opětovné načtení, pomocí jeho speciálního nástroje.

    Twitter Card a náhled ve stylu Twitteru

    Náhledový obrázek na Twitteru
    <meta name="twitter:card" content="summary_large_image"> //Tohle je možnost s velkým obrázkem, ale jsou i další možnosti.
<meta name="twitter:site" content="@ÚČET NA TWITTERU ODPOVÍDAJÍCÍ WEBU">
<meta name="twitter:title" content="TITULEK ČLÁNKU">
<meta name="twitter:description" content="ČÁST ČLÁNKU, NEBO JEHO KRÁTKÝ POPISEK">
<meta name="twitter:creator" content="@ÚČET AUTORA ČLÁNKU NA TWITTERU">
<meta name="twitter:image:src" content="NÁHLEDOVÝ OBRÁZEK">

    I u Twitteru si můžete vyzkoušet, jaký náhled se při sdílení přípěvku zobrazí: https://cards-dev.twitter.com/validator

    Je třeba řešit Google+?

    Z moji zkušenosti nemá Google s náhledy problémy, a když tam sdílíte článek, který nemá jeho nastavení pro sdílení, nabídne všechny obrázky na stránce. Pro jistotu ovšem můžete na stránku vložit jeho kód.

    <meta itemprop="name" content="TITULEK">
<meta itemprop="description" content="POPISEK">
<meta itemprop="image" content="OBRÁZEK">

    Automatické vložení obrázků do náhledu

    Může se Vám stát, že chcete, aby se nabídli uživateli Facebooku a Googlu+ všechny obrázky na stránce a on si mohl vybrat, který z nich se u příspěvku zobrazí. V případě Twitteru zobrazit na náhledové kartě první obrázek, který se na stránce objeví. A v případě, že v daném článku obrázek není, nabídnout jako náhledový nějaký univerzální obrázek, který značí, že článek pochází z vašeho blogu. To zařídí následující kód.

    <?php

$twitter_image = true;
$cely_text = "CELÝ TEXT ČLÁNKU V HTML";


//Zbavení se mezer pro případ, že někde bude <img src = "..." a jinde <img src="..." 
$text_deleni_img_priprava = explode(" ", $cely_text);
$text_deleni_img_priprava = implode ("", $text_deleni_img_priprava);

//nalezení obrázků
$text_deleni_img = explode("<img", $text_deleni_img_priprava); 

$i = 1;
$j = count($text_deleni_img);
while ($i<$j)
{
//zjištění url obrázků
$text_deleni_img_2 = explode('src="', $text_deleni_img[$i]);
$text_deleni_img_3 = explode('"', $text_deleni_img_2[1]);

if($i==1)
{
//v případě twitteru nastavení prvního obrázku jako náhledového a zapsání, že už byl vložen do proměnné
$twitter_image = false;
echo '<meta name="twitter:image:src" content="' . $text_deleni_img_3[0] . '">';
}

//v případě FB a G+ přidání náhledových obrázků na výběr
echo '<meta property="og:image" content="' . $text_deleni_img_3[0] . '" />';
echo '<meta itemprop="image" content="' . $text_deleni_img_3[0] . '">';

$i++;
}

//pokud na stránce není žádný obrázek, dá se do náhledu Twitter card obrázek identifikující stránku
if ($twitter_image)
{ 
echo '<meta name="twitter:image:src" content="OBRÁZEK IDENTIFIKUJÍCÍ STRÁNKU">';
}
?>

//U FB a G+ se obrázek indentifikující stránku přidá jako poslední možnost, i když jsou jiné obrázky, ať si může sdílející uživatel vybrat
<meta property="og:image" content="OBRÁZEK IDENTIFIKUJÍCÍ STRÁNKU" />
<meta itemprop="image" content="OBRÁZEK IDENTIFIKUJÍCÍ STRÁNKU">
    Scroll to top