Optimalizujte svoji stránku pro sociální sítě
Optimalizujte svoji stránku pro sociální sítě
Máte na stránce všude tlačítka „Udělejte toto, udělejte tamto“? A testovali jste, co se reálně člověku zobrazí, když sdílí vaši stránku? Nejednoho publishera jsem upozorňovala na špatný náhledový obrázek či popis stránky při sdílení na sociálních sítích.
Facebook
Už se vám někdy stalo, že se vám při sdílení vaší stránky nezobrazil náhledový obrázek? Zřejmě nemáte nastavené Facebook meta tagy. Tyto tagy definují název vaší stránky, URL adresu, obrázek, velikost obrázku, typ obsahu… Pomocí těchto tagů Facebook okamžitě ví, co má zobrazit při vkládaní odkazu do příspěvku, komentáře či při sdílení stránky.
Seznam všech meta tagů najdete na stránce ogp.me.
Jak na to:
Nejdříve si zkontrolujte článek/podstránku/produkt vašeho webu ve Facebook Debuggeri, abyste zjistili, co vám na stránce chybí. Debugger vám vyhodí errory i warningy.
Chybějící tagy můžete vložit ručně do <head> sekce stránky (příklad najdete i na stránce A Guide to Sharing for Webmasters) nebo použít pluginy.
Na svojí osobní WordPress stránce používám plugin All in one SEO pack pre WordPress, kde je možnost aktivace social media tagů. Možnosti nastavení jsou opravdu široké. Hlavně si však nezapomeňte nastavit prezentační obrázek do og:image 😉
Osobně jsem si vypnula možnost „Autogenerate OG Descriptions“, protože mně to přidávalo názvy kategorií a tagů do popisu stránky. OG descriptions jsem nenastavovala vůbec. U každého článku mám zkrácený popis (Shrnutí), který se natahuje do <meta name=“description“ itemprop=“description“>, který Facebook akceptuje bez problémů.
Takto vypadají meta tagy mého osobního blogu:
Twitter
Také pro Twitter je nutné vytvořit zvláštní meta tagy. Svůj článek/stránku si můžete zkontrolovat pomocí Card validátoru. Pro Twitter meta tagy vám toho stačí méně. V první řadě musíte určit typ (summary, summary s velkým obrázkem, app s okamžitým stažením nebo player pro audio/video). Vy budete používat buď summary, nebo summary s velkým obrázkem.
Příklad meta tagů pro summary:
Seznam všech meta tagů najdete na stránce ogp.me.
Jak na to:
Nejdříve si zkontrolujte článek/podstránku/produkt vašeho webu ve Facebook Debuggeri, abyste zjistili, co vám na stránce chybí. Debugger vám vyhodí errory i warningy.
Chybějící tagy můžete vložit ručně do <head> sekce stránky (příklad najdete i na stránce A Guide to Sharing for Webmasters) nebo použít pluginy.
Na svojí osobní WordPress stránce používám plugin All in one SEO pack pre WordPress, kde je možnost aktivace social media tagů. Možnosti nastavení jsou opravdu široké. Hlavně si však nezapomeňte nastavit prezentační obrázek do og:image 😉
Osobně jsem si vypnula možnost „Autogenerate OG Descriptions“, protože mně to přidávalo názvy kategorií a tagů do popisu stránky. OG descriptions jsem nenastavovala vůbec. U každého článku mám zkrácený popis (Shrnutí), který se natahuje do <meta name=“description“ itemprop=“description“>, který Facebook akceptuje bez problémů.
Takto vypadají meta tagy mého 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" />
Příklad meta tagů pro 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" />Příklad meta tagů pro summary s velkým obrázkem:
<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">Tyto tagy se opět dají přidat ručně nebo pomocí pluginů (All in one SEO pack pro WordPress zvládá i Twitter tagy). 😉 Katka Novotná
