Jak nastavit Twitter kartu pro vaše stránky elektronického obchodu

S trochou dat mohou online prodejci zlepšit způsob sdílení produktů na Twitteru, definovat konkrétní obrázek a popis, který se má zobrazit, a zlepšit sledování pomocí služby Twitter Card Analytics.

Online maloobchodníci požadují, aby nakupující sdíleli produkty na sociálních médiích. Když návštěvník tweuje o produktu, v zásadě tento produkt podporuje a sdílí jej se svými přáteli a rodinou. Takové sdílení může vést k prodeji.

Jak fungují karty Twitter

Když někdo odešle tweet obsahující URL, Twitter načte obsah stránky a hledá konkrétní pole metadat. Pokud jsou tato pole přítomna, Twitter zobrazí spíše „kartu“ než pouhý odkaz, když je tweet rozbalen na časové ose nebo když je tweet zobrazen přímo.

Toto je cvrlikání pro tričko bez vlákna. Všimněte si, že velký obrázek s popisem níže nahrazuje jednoduchý odkaz v tweetu.

Toto je cvrlikání pro tričko bez vlákna. Všimněte si, že velký obrázek s popisem níže nahrazuje jednoduchý odkaz v tweetu.

V konečném důsledku může osoba tweeting stále ovlivňovat nebo potlačovat, jak se bude tweet zobrazovat, ale včetně metadat Twitter Twitter poskytne základní řadu druhů, takže vaše produkty budou nejčastěji prezentovány s obrázkem a popisem produktu, který váš web definuje.

Každá část metadat je dvojicí klíč - hodnota. Tento druh uspořádání bude webovým vývojářům dobře znám - „klíč“ je jedinečný identifikátor dat a „hodnota“ je samotná data nebo ukazatel na data. Metadata Twitter Card lze také obvykle přidávat programově do tematických nebo tematických souborů platformy elektronického obchodování.

V níže uvedeném příkladu je klíčem „twitter: card“ a hodnota je „shrnutí“.

<meta name = "twitter: card" content = "shrnutí" />

Přidejte na produktové stránky metadata Twitter Card

Metadata jsou umístěna v horní části dokumentu HTML. Aby karty Twitter fungovaly, existuje několik požadovaných polí metadat.

První pole identifikuje typ karty. Twitter dříve nabízel „produktovou“ kartu speciálně pro elektronický obchod, ale Twitter ji v 2015 ukončil. To ponechalo online prodejcům dva typy karet pro stránky s podrobnostmi o produktu: kartu „souhrn“ a kartu „souhrn s velkým obrázkem“.

Souhrnná karta zobrazí obrázek s vloženým popisem.

<meta name = "twitter: card" content = "shrnutí" />

Toto je souhrnná Twitter karta z webu Beardbrand, všimněte si, že obrázek a popis jsou inline.

Toto je souhrnná Twitter karta z webu Beardbrand, všimněte si, že obrázek a popis jsou inline.

Souhrn s velkým obrázkem používá větší obrázek s popisem pod ním.

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

Toto je shrnutí s velkým obrázkem Twitter Card pro tričko od Design By Humans. Obrázek produktu, v tomto případě design trička, je středem pozornosti.

Toto je shrnutí s velkým obrázkem Twitter Card pro tričko od Design By Humans. Obrázek produktu, v tomto případě design trička, je středem pozornosti.

Společnost webové stránky pole metadat říká Twitteru úchyt pro web. Například níže uvedená metadata pocházejí z webu Beardbrand.com a ukazují na popisovač Twitter Beardbrand's Twitter.

<meta name = "twitter: site" content = "@ beardbrand" />

Metaznačka popisu předává popis, který se má Twitter zobrazit na kartě. Zkuste udržet tento popis relativně krátký.

<meta name = "twitter: description" content = "Black Marble beard oil je spolupráce ..." />

Za zmínku stojí, že Twitter založil své meta pole na kartě Open Graph na Facebooku. Takže pro několik značek, včetně popisu, můžete místo toho použít značku Facebook Open Graph. Tímto způsobem pro dvě platformy nemusíte vytvářet téměř identické metaznačky. Sečteno a podtrženo, pokud máte meta pole Popis otevřeného grafu, použijte jej také pro kartu Twitter.

<meta property = "og: description" content = "Black Marble beard oil je spolupráce ..." />

Podobně můžete na Twitteru zadat název produktu pro Twitter kartu pomocí meta pole „twitter: title“ nebo „og: title“. Zde jsou dva příklady.

<meta name = "twitter: title" content = "Black Marble Beard Oil - LIMITED EDITION" />
<meta property = "og: title" content = "Black Marble Beard Oil - LIMITED EDITION" />

Když předáte Twitter obrázku URL, můžete se znovu rozhodnout použít pole specifické pro kartu Twitter nebo pole Open Graph na Facebooku.

<meta name = "twitter: image" content = "https://cdn.shopify.com/s/files/1/0209/0478/products/bm_knock_out_medium.jpeg?v=1442896499">
<meta property = "og: image" content = "http://cdn.shopify.com/s/files/1/0209/0478/products/bm_knock_out_grande.jpeg?v=1442896499">

Twitter umožňuje nastavit vlastnost alt obrázku „twitter: image: alt“.

Vyzkoušejte a spusťte kartu Twitter produktu

Až budete mít na svém webu metadata Twitter Card, vyzkoušejte je pomocí Twitter Card Validator. Tento jednoduchý nástroj vám dá představu o tom, jak bude vaše karta vypadat. Pokud karta Twitter selže, použijte stránka pro odstraňování problémů k vyřešení problému.

Pokud jste spokojeni s tím, jak Twitter Twitter pracuje ve validátoru, zkuste tweeting URL na svém vlastním Twitter účtu.

Twitter karty se objevují na Twitter Analytics. Můžete tedy sledovat, jak jsou vaše stránky produktů sdíleny na Twitteru.

Nakonec může trvat několik dní, než Twitter začne ctít vaši kartu Twitter. Pokud karta nefunguje podle očekávání, řekněme za týden, vraťte se na stránky validátoru a řešení problémů.

Zdroj

Zanechat komentář