Menu

Prečo vyzerá môj web tak zle pri zdieľaní na FB, Twitteri a LinkedIn?

Ako získať kontrolu nad obsahom, ktorý pri zdieľaní zobrazujú sociálne siete o vašich stránkach? Vyhnite sa príspevkom s deformovaným alebo žiadnym obrázkom a priraďte k nim relevantný popis. Stačí pridať pár riadkov kódu alebo urobiť zopár kliknutí vo vašom CMS. Čo konkrétne je teda potrebné urobiť?

Vložte meta údaje (nielen) pre Facebook

Na určenie zobrazeného obsahu na Facebooku slúžia Open Graph meta údaje. Okrem Facebooku ich využíva aj väčšina ďalších sociálnych sietí ako LinkedIn, či Pinterest a čiastočne aj Twitter a Google+. Ak na stránke nie sú dostupné, Facebook sa rozhodne sám, čo zobrazí pri zdieľaní vašej stránky. A to nedopadne vždy najlepšie. Kontrolu nad týmto obsahom získate použitím správnych meta tagov v hlavičke stránky. Formát Open Graph meta tagov je nasledovný:

<meta property="%nazov_vlastnosti%" content="%hodnota_vlastnosti%" />

Povinné vlastnosti sú:

  • og:type – typ príspevku, základné sú website alebo article. Ak ste prevádzkovateľom e-shopu, na stránkach produktov ho nastavte na product. Tento typ popisujú ďalšie meta properties ako napríklad product:price:amount, product:price:currency, product:brand, product:category, product:color.
  • og:title – nadpis príspevku, ako sa má zobraziť v News Feede

Medzi ďalšie základne vlastnosti patria:

  • og:url – kanonická URL stránky bez parametrov
  • og:description – krátky popis, ktorý sa zobrazí pod názvom
  • og:image – URL obrázka. Obrázky by mali mať optimálne rozlíšenie 600×315 pixelov, pre zariadenia s vysokým rozlíšením sú odporúčané rozmery 1200×630 pixelov . Najmenšia povolená veľkosť obrázka je 200×200 pixelov. Ak chceme, aby sa obrázok zobrazil už pri prvom zdieľaní, keď ešte nie je uložený v cache, je potrebné definovať aj rozmery og:image:width a og:image:height.
  • og:video – URL videa, odporúčaná je zabezpečená (https) adresa. Pre video sú povinné údaje o jeho rozmeroch, teda og:video:width a og:type:height. Facebook podporuje Flash videá a formát mp4, formát je definovaný v og:video:type.
  • og:locale – na určenie jazyka príspevku, resp. og:locale:alternate, ak máme aj iné jazykové preklady

Ak chceme využívať aj Facebook Page Insights, je potrebné pridať meta tag fb:app_id, kde vyplníme id Facebook aplikácie, ktorú máme vytvorenú pre našu stránku.

link-bez-og

Príspevok zo stránky bez OpenGraph meta dát.

Na otestovanie zobrazenia stránky na Facebooku môžeme použiť Sharing Debugger, ktorý nám môže dať odporúčania na vylepšenie, ukáže chyby a aj to ako bude príspevok na Facebooku skutočne vyzerať.

facebook-sharing-debugger

Ukážka zo Sharing Debuggera.

Takto vyzerajú vyplnené OpenGraph meta údaje pre túto stránku:

<meta property="og:url" content="https://pizzaseo.com/sk/blog/">
<meta property="og:title" content="Prečo vyzerá môj web tak zle pri zdieľaní na FB, Twitteri a LinkedIn?">
<meta property="og:site_name" content="SEO blog, ktorý má vkus">
<meta property="og:description" content="Ako získať kontrolu nad obsahom, ktorý pri zdieľaní zobrazujú sociálne siete o vašich stránkach? Vyhnite sa príspevkom s deformovaným alebo žiadnym ">
<meta property="og:type" content="article">
<meta property="og:image" content="https://pizzaseo.com/sk/blog/files/web-zdielany-na-FB-TWTR-1024x430.jpg">
<meta property="og:locale" content="sk_sk">

 

Nezabudnite na Twitter

Twitter používa na určenie zdieľaného obsahu na svojej sieti tzv. Twitter Cards. Meta údaje, ktoré ho definujú majú prefix v atribúte name „twitter:“. Zapisujú sa teda napríklad takto:

<meta name="twitter:card" content="summary" />

Vlastnosti základných typov obsahu (summary a summary_large_image) sú tieto:

  • twitter:card – určuje typ obsahu, môže byť summary (text), summary_large_image (text s fotkou), app (pre aplikácie), player (pre multimediálny obsah)
  • twitter:site – meno Twitter používateľa v tvare @meno
  • twitter:title – názov príspevku, na iOS a Android platformách 2 riadky, pre web jeden riadok na časovej osi
  • twitter:description – nezobrazuje sa na iOS a Android, pre web je zobrazený na troch riadkoch
  • twitter:image – obrázok v minimálnom rozlíšení 120×120 pixelov, orezaný do štvorca na všetkých platformách, max. veľkosť 1MB

Pri Cards typu app a player sa využívajú aj ďalšie vlastnosti. App môže zobraziť vo feede vašu mobilnú aplikáciu pre rôzne platformy aj s priamym linkom na stiahnutie. Player zobrazí video klip alebo audio stream, je však potrebné prejsť schvaľovacím procesom.

Twitter Cards využívajú čiastočne aj Open Graph značenie niektorých vlastností, ak nie sú definované Twitter vlastnosťami. Vďaka tomu je možné zabrániť nepotrebnej duplikácii meta tagov, ak chcete vašu stránku uspôsobiť na zdieľanie cez Facebook aj Twitter.

Na otestovanie a validáciu vašich Twitter Cards údajov je možné po prihlásení do Twitter účtu použiť Card validator.

Tento článok má nasledovné meta údaje pre Twitter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@pizzaseo">
<meta name="twitter:site" content="@pizzaseo">
<meta name="twitter:title" content="Prečo vyzerá môj web tak zle pri zdieľaní na FB, Twitteri a LinkedIn?">
<meta name="twitter:description" content="Ako získať kontrolu nad obsahom, ktorý pri zdieľaní zobrazujú sociálne siete o vašich stránkach? Vyhnite sa príspevkom s deformovaným alebo žiadnym obrázkom a priraďte k nim relevantný">

 

A ešte: LinkedIn

Aj LinkedIn využíva OpenGraph meta dáta z hlavičky stránky. Dáta, ktoré načíta (či už to sú OpenGraph meta údaje alebo údaje, ktoré si LinkedIn vyberie po vlastnej analýze stránky) potom drží vo svojej cache pamäti približne jeden týždeň. To v praxi znamená, že aj ak opravíte preklepy v meta údajoch na stránke, tak pri opätovnom zdieľaní v najbližšom týždni sa budú na LinkedIn zobrazovať staré údaje. Je to však možné obísť pridaním ľubovoľného parametra do URL zdieľanej stránky alebo šírením cez LinkedIn API volania pri pokročilejšom využití.

Pre LinkedIn údaje platia tieto obmedzenia:

  • og:title by mal mať najviac 200 znakov
  • og:description môže mať maximálne 256 znakov
  • og:image by mal mať rozmery minimálne 80x150px

Ako si uľahčiť prácu?

Meta údaje pre Open Graph resp. Twitter Cards môžeme implementovať na stránku manuálnymi úpravami v kóde. Ak je web postavený na modernom CMS systéme, pomôžu nám pluginy s podporou týchto meta dát.

Pre populárny CMS systém WordPress sú dostupné napríklad tieto pluginy:

  • NextGEN Facebook – tento plugin okrem možnosti pridať a nastavovať OpenGraph meta tagy a Twitter Cards meta tagy pridáva aj tzv. Schema markup a je kompatibilný napríklad s pluginom WooCommerce a ďalšími,
  • Yoast SEO – asi najpoužívanejší SEO plugin pre WordPress, ktorý okrem mnohých užitočných SEO nástrojov a nastavení podporuje aj konfiguráciu OpenGraph alebo Twitter Cards údajov, či vytváranie Google Snippetu.
yoast-seo

Nastavenie meta údajov pre Facebook pomocou Yoast SEO pluginu.

Podobné nástroje existujú aj pre iné platformy, napríklad Social Meta Tags for Open Graph and Twitter Cards pre e-commerce riešenie Magento alebo Metatag pre CMS Drupal. Z novších CMS systémov má SquareSpace zabudovanú podporu pre OpenGraph tagy v základnej inštalácii a pre SilverStripe existujú pre tento účel opensource rozšírenia.

Stretli ste sa s nejakými problémami pri použití niektorého zo spomínaných pluginov alebo iných rozšírení? Vyskytli sa pri zdieľaní vašich stránok na sociálne siete neočakávané chyby?