Cum testăm imaginile OG pentru Twitter și Facebook?

În primul rând, ce sunt imaginile OG pentru Twitter și Facebook?

OG, vine de la ”Open Graph Protocol” și permite unor pagini web să afișeze conținut media bogat (rich media) către situri externe, cum ar fi Twitter sau Facebook, dar nu numai asta. Pentru ce avem de povestit noi acum, explicația de mai sus e mai mult decât îndestulătoare.

Un exemplu simplu ar fi să observați ce se întâmplă când luați un link și faceți paste în fereastra de compoziție din Facebook. Imediat se va produce o scanare a URL-ului introdus, cu parcurgerea de către crawler-ul Facebook al codului sursă din pagina respectivă, urmând ca imaginea de previzualizare (thumbnail) afișată, care se numește imagine OG (OG Image), să fie publicată în feed.

Un mic exemplu mai jos, cu adresa https://sucuri.net/company/:

Revenind la subiectul nostru, haideți să vedem cum testăm imaginile OG pentru Twitter și Facebook?

Atât Twitter, cît și Facebook, pun la dispoziția celor interesați, gratuit, unelte specifice.

Twitter: Card Validator

https://cards-dev.twitter.com/validator

Vei introduce adresa web a paginii pe care vrei s-o publici pe Twitter în câmpul unic din pagină, iar la dreapta vei vedea dacă codul sursă conține tag-urile necesare și cum se va vedea imaginea într-un tweet publicat.

Facebook: Sharing Debugger

https://developers.facebook.com/tools/debug/

Vei introduce adresa paginii în câmpul unic de la adresa de mai sus, unde vei vedea atât imaginea OG, cât și alte validări făcute codului sursa:

Cum rezolvăm problemele cu imaginile OG?

Dacă imaginea ce apare în timpul testelor nu este cea corectă, cea pe care o vrei acolo, poți utiliza exemplele de cod sursă și resursele de pe site-ul Open Graph Protocol, pentru a scrie corect codul.

Dacă ai vreo întrebare sau vrei să știi cum poți face și chestiuni mai avansate, gen imagini OG multiple etc, lasă un comentariu mai jos.

Articol din categoria: Social Media