Optimalizujte svoju stránku pre sociálne siete
Optimalizujte svoju stránku pre sociálne siete
Máte na stránke všade buttony „Zdieľajte toto, zdieľajte tamto“? A testovali ste, čo sa reálne človeku zobrazí, keď zdieľa vašu stránku? Nejedného publishera som upozorňovala na zlý náhľadový obrázok, či popis stránky pri zdieľaní na sociálnych sieťach.
Facebook
Už sa vám niekedy stalo, že sa vám pri zdieľaní vašej stránky nezobrazil náhľadový obrázok? Zrejme nemáte nastavené Facebook meta tagy. Tieto tagy definujú názov vašej stránky, URL adresu, obrázok, veľkosť obrázka, typ obsahu,… Pomocou týchto tagov Facebook okamžite vie, čo má zobraziť pri vkladaní odkazu do príspevku, komentáru či pri zdieľaní stránky.
Zoznam všetkých meta tagov nájdete na stránke ogp.me.
Ako na to:
Najprv si skontrolujte článok/podstránku/produkt vášho webu vo Facebook Debuggeri, aby ste zistili, čo vám na stránke chýba. Debugger vám vyhodí errory aj warningy.
Chýbajúce tagy môžete vložiť ručne do <head> sekcie stránky (príklad nájdete aj na stránke A Guide to Sharing for Webmasters) alebo použiť pluginy.
Na svojej osobnej WordPress stránke používam plugin All in one SEO pack pre WordPress, kde je možnosť aktivácie social media tagov. Možnosti nastavenia sú naozaj široké. Hlavne si však nezabudnite nastaviť prezentačný obrázok do og:image 😉
Osobne som si vypla možnosť „Autogenerate OG Descriptions“, lebo mi to pridávalo názvy kategórií a tagov do popisu stránky. OG descriptions som nenastavovala vôbec. Pri každom článku mám skrátený popis (Zhrnutie), ktorý sa ťahá do <meta name=“description“ itemprop=“description“>, ktoré Facebook akceptuje bez problémov.
Takto vyzerajú meta tagy môjho osobného blogu:
Twitter
Aj pre Twitter treba vytvoriť osobitné meta tagy. Svoj článok/stránku si môžete skontrolovať pomocou Card validátora. Pre Twitter meta tagy vám toho stačí menej. V prvom rade musíte určiť typ (summary, summary s veľkým obrázkov, app s okamžitým stiahnutím alebo player pre audio/video). Vy budete používať buď summary alebo summary s veľkým obrázkom.
Príklad meta tagov pre summary:
Zoznam všetkých meta tagov nájdete na stránke ogp.me.
Ako na to:
Najprv si skontrolujte článok/podstránku/produkt vášho webu vo Facebook Debuggeri, aby ste zistili, čo vám na stránke chýba. Debugger vám vyhodí errory aj warningy.
Chýbajúce tagy môžete vložiť ručne do <head> sekcie stránky (príklad nájdete aj na stránke A Guide to Sharing for Webmasters) alebo použiť pluginy.
Na svojej osobnej WordPress stránke používam plugin All in one SEO pack pre WordPress, kde je možnosť aktivácie social media tagov. Možnosti nastavenia sú naozaj široké. Hlavne si však nezabudnite nastaviť prezentačný obrázok do og:image 😉
Osobne som si vypla možnosť „Autogenerate OG Descriptions“, lebo mi to pridávalo názvy kategórií a tagov do popisu stránky. OG descriptions som nenastavovala vôbec. Pri každom článku mám skrátený popis (Zhrnutie), ktorý sa ťahá do <meta name=“description“ itemprop=“description“>, ktoré Facebook akceptuje bez problémov.
Takto vyzerajú meta tagy môjho osobného blogu:
<meta property="og:title" content="Netušíte prečo vám v Google Analytics vyskočili štatistiky? | Katarína Novotná" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://xkatka.sk/netusite-preco-vam-v-google-analytics-vyskocili-statistiky/" /> <meta property="og:image" content="http://xkatka.sk/wp-content/uploads/Google-Analytics.jpg" /> <meta property="og:image:width" content="640" /> <meta property="og:image:height" content="340" /> <meta property="og:site_name" content="xKatka | Katarína Novotná - osobný blog" /> <meta property="article:tag" content="business" /> <meta property="article:tag" content="marketing" /> <meta property="article:publisher" content="https://www.facebook.com/xkatulienka" /> <meta property="article:published_time" content="2016-02-25T13:24:23Z" /> <meta property="article:modified_time" content="2016-03-03T18:01:02Z" />
Príklad meta tagov pre summary:
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@flickr" /> <meta name="twitter:title" content="Small Island Developing States Photo Submission" /> <meta name="twitter:description" content="View the album on Flickr." /> <meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />Príklad meta tagov pre summary s veľkým obrázkom:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">Tieto tagy sa opäť dajú pridať ručne alebo pomocou pluginov (All in one SEO pack pre WordPress zvláda aj Twitter tagy) 😉
