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ý:
[code]<meta property="%nazov_vlastnosti%" content="%hodnota_vlastnosti%" />[/code]
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.
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ť.
Takto vyzerajú vyplnené OpenGraph meta údaje pre túto stránku:
[code lang=“html“]<meta property=“og:url“ content=“https://bastadigital.com/“>[/code]
[code lang=“html“]<meta property=“og:title“ content=“Prečo vyzerá môj web tak zle pri zdieľaní na FB, Twitteri a LinkedIn?“>[/code]
[code lang=“html“]<meta property=“og:site_name“ content=“SEO blog, ktorý má vkus“>[/code]
[code lang=“html“]<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 „>[/code]
[code lang=“html“]<meta property=“og:type“ content=“article“>[/code]
[code lang=“html“]<meta property=“og:image“ content=“https://bastadigital.com/wp-content/uploads/2017-pre/web-zdielany-na-FB-TWTR-1024×430.jpg“>[/code]
[code lang=“html“]<meta property=“og:locale“ content=“sk_sk“>[/code]
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:
[code]<meta name="twitter:card" content="summary" />[/code]
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:
[code lang=“html“]<meta name=“twitter:card“ content=“summary_large_image“>[/code]
[code lang=“html“]<meta name=“twitter:creator“ content=“@pizzaseo“>[/code]
[code lang=“html“]<meta name=“twitter:site“ content=“@pizzaseo“>[/code]
[code lang=“html“]<meta name=“twitter:title“ content=“Prečo vyzerá môj web tak zle pri zdieľaní na FB, Twitteri a LinkedIn?“>[/code]
[code lang=“html“]<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ý“>[/code]
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.
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?