Blogger: rešenje problema kada Twitter ne prikazuje ispravno Vaš post

Krenuli ste da pišete svoje tekstove na Blogger platformi i sa ponosom želite da ih podelite na društvenim mrežama.

To i radite, ali vidite da interakcija sa Vašim sadržajem na Twitteru nije zadovoljavajuća. Odlazite na svoj profil i vidite da je ono što ste podelili u stvari samo neugledni tekstualni link koji vodi ka postu sa Vašeg bloga.

Bez sklike i propratnog teksta Vaš tvit je ostao zatrpan, neupadljiv i neprimećen u gomili sadržaja drugih Twitter korisnika.

Kao iskusan korisnik društvenih mreža, Vi znate da je samo izgled deljenog sadržaja ono što je drugima bitno. A tekstualni link nikome nije privlačan, pa niko ni ne želi da klikne na njega.
Ako koristite Blogger postoji jednostavno rešenje za Vaše probleme i njega ću Vam sada predstaviti.

Zašto mi se ovo dešava?

Pre svega morate znati zašto se ovo dešava. Twitter je platforma koja se neprestano menja kako bi omogućila ugodnu komunikaciju svojih korisnika.
Da bi se istakao između ostalih, spoljašnji sadržaj koji se deli na ovoj platformi mora biti specijalno obeležen (kako bi Twitter znao šta je tu tekst, šta je slika, šta je naslov, ko je autor itd).
Ova društvena mreža zahteva da ti sadržaji budu označeni pomoću njihovih oznaka koje se nazivaju Twitter Cards.
Takođe, Twitter tumači i open graph oznake. Radi boljeg pozicioniranja u pretrazi, web masteri često na svoje sajtove dodaju i Open Graph i Twitter oznake kako ne bi došlo do konfuzije.
Blogger u sebi već sadrži određena markiranja teksta pomoću strukturalnih podataka, koji su u novijim blogger šablonima odrađeni pomoću JSON-LD formata (čiju upotrebu Google forsira u svojoj pretrazi). O Vašim mogućnostima prilagođavanja ovih podataka sam već pisao.

Provera oznaka

Prilikom deljenja tekstova sa Vašeg bloga neke društvene mreže sasvim korektno raspoznaju označene sadržaje, ali Twitter u poslednje vreme to ne radi. Drugim rečima Twitter ne prepoznaje šta je slika, a šta tekst.
Savet je da pre deljenja linka proverite kako će Twitter njega prikazati. To možete učiniti na ovom linku: Card Validator.
Na gornjoj vezi je potrebno da se u traženo polje unese link ka Vašem sadržaju pa će se sa desne strane prikazati kako Twitter "vidi" ono što delite.

Kako popraviti ovo?

Stvari su vrlo jednostavne. Dodaćemo u blogger šablon (izgled bloga) par linija HTML koda koji će pomoći Twitteru da raspoznaje naš sadržaj, što će Vas učiniti vidljivijim na ovoj društvenoj mreži.
Međutim, pre nego što se upustimo u ovu avanturu potrebno je znati još nešto što je od krucijalne važnosti za dalji postupak.
Što se tiče deljenja web sadržaja, Twitter daje dve mogućnosti:

1. Summary Card. Kartica sa malom slikom sa leve strane, dok se sa desne strane nalaze naslov i opis. Zvaćemo je mala karta.
2. Summary Card sa velikom slikom. Ovo je slično kao i prethodno, samo što je će slika biti ogromna a naslov i opis će se naći ispod nje. Budući da će Twitter ovde istaći sliku iz Vašeg teksta, u današnje vreme se većina sajtova odlučuje za ovu soluciju. Zvaćemo je velika karta.

Kada ste se odlučili kako želite da izgleda sadržaj koji želite da podelite, vreme je da i nešto konkretno uradimo.

Priprema

Pre bilo kakve intervencije na Blogger šablonu je potrebno uraditi kreiranje njegove rezervne kopije (backup). To se radi na veoma jednostavan način koji je opisan u ovom tekstu.
Nakon što smo kreirali rezervnu kopiju izgleda našeg bloga (koja nam služi da, ukoliko pogrešimo možemo da se vratimo na pređašnje stanje) potrebno je da otvorimo Bloggerov XML editor.

1. To radimo tako što izaberemo odeljak Tema ("Theme")
   
   
   
2. a zatim kliknemo na dugme Izmeni HTML ("Edit HTML")
   

Nakon toga Vam je prikazan Blogger-ov XML editor.

Kliknite bilo gde na površinu XML editora i u isto vreme pritisnite na tastaturi tipke ctrl i F (slovo F, dakle kombinacija je ctrl + F). U gornjem desnom uglu editora će se otvoriti malo okno za pretragu šablona.

U to okno unesite termin za pretragu. U našem slučaju tražimo kraj head sekcije dokumenta (ukoliko ne znate, ne treba da se opterećujete šta ova oznaka znači).

Dakle, tražimo oznaku:
</head>

Kada nam je editor prikazao i označio deo završetka head sekcije, sve što budemo radili ćemo ubacivati iznad oznake </head>.
Razlog za to je što mi ubacujemo najobičnije meta oznake koje se stavljaju u head sekciju bilo kog HTML dokumenta.

Nakon toga možemo da ubacimo željeni kod. Ovde je bitno odlučiti se da li će se postaviti mala ili velika twitter karta pošto meta oznake nisu iste (razlikuju se u par sitnih detalja).

Podešavanje male Twitter kartice u Bloggeru

Da bi ste podesili malu Twitter karticu, potrebno je iznad oznake </head> ubaciti sledeći kod:
<!-- Start small summary Twitter card -->
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>

<b:if cond='data:view.featuredImage'>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
<b:elseif cond='data:widgets'/>
    <b:loop reverse='true' values='data:widgets.Blog.first.posts where (p =&gt; p.featuredImage) map (p =&gt; p.featuredImage)' var='imageUrl'>
    <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
    </b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
</b:if>
<!-- End of Twitter card -->
Vaš XML editor treba da izgleda nekako ovako:

Nakon toga pritisnite dugme "Sačuvaj Temu" ("Save template"), kao na slici iznad.
Idite na validator Twitter kartice kako bi ste proverili kako će da izgledaju Vaše objave na toj društvenoj mreži.

Podešavanje velike Twitter kartice u Bloggeru

Da bi ste podesili veliku Twitter karticu, potrebno je iznad oznake </head> ubaciti sledeći kod:
<!-- Start Large Twitter Card -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
<b:if cond='data:view.featuredImage'>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
<b:elseif cond='data:widgets'/>
    <b:loop reverse='true' values='data:widgets.Blog.first.posts where (p =&gt; p.featuredImage) map (p =&gt; p.featuredImage)' var='imageUrl'>
    <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
    </b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
</b:if>
<!-- End of Twitter  -->
Nakon toga pritisnite dugme "Sačuvaj Temu" ("Save template") i Vaš XML editor treba da izgleda nekako ovako:

Idite na validator Twitter kartice kako bi ste proverili kako će da izgledaju Vaše objave na toj društvenoj mreži.

Zaključak

Vidimo da nam za podešavanje Twitter kartica u Bloggeru nije bilo potrebno mnogo vremena i da je postupak krajnje jednostavan.
Rezultat svega ovoga je veća učinkovitost i vidljivost tekstova koje delite na ovoj društvenoj mreži, što pozitivno utiče na rejting Vašeg bloga i njegov SEO rezultat.
Na kraju mi ostaje samo da Vam poželim da uživate u povećanom broju poseta koje su rezultat lepšeg prikaza sadržaja na Twitteru.