Generador d'Open Graph i targetes socials

Com fer servir el generador d’Open Graph

1. Escriu el Títol i la Descripció que vols que vegi la gent quan es comparteixi el teu enllaç. Poden ser diferents del títol per a SEO: escriu-los pensant en un feed social.
2. Afegeix la URL de la pàgina (l’adreça canònica) i la URL de la imatge. Totes dues han de ser absolutes, començant per https://.
3. Descriu la imatge a Descripció de la imatge (text alternatiu) perquè les persones que fan servir lectors de pantalla sàpiguen què hi surt.
4. Tria o deixa anar la mateixa imatge a Imatge de previsualització. Es queda al teu dispositiu: l’eina només la fa servir per dibuixar les previsualitzacions i per omplir Amplada de la imatge (px) i Alçada de la imatge (px).
5. Defineix el Nom del lloc, el Tipus de contingut i l’Idioma i regió (locale), i després tria l’estil de Targeta d’X (Twitter) i, si en tens, els comptes d’X del lloc i de l’autor.
6. Revisa les previsualitzacions i la llista de Comprovacions, i després Copia o Baixa les etiquetes i enganxa-les dins del <head> de la pàgina.

Tot passa al teu navegador: res del que escrius ni cap imatge s’envia a cap servidor.

Què fan les etiquetes Open Graph

Quan s’enganxa un enllaç a Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage i moltes altres aplicacions, un rastrejador baixa la pàgina i llegeix les seves metaetiquetes Open Graph (og:) per construir una targeta: una imatge, un títol, una descripció breu i el domini. Sense aquestes etiquetes, l’aplicació endevina i sovint tria un logotip, un bàner de galetes o la primera frase del menú.

Les quatre propietats bàsiques són og:title, og:type, og:image i og:url. Aquesta eina també afegeix og:description, og:site_name, og:locale i els detalls de la imatge (og:image:width, og:image:height, og:image:alt). Declarar la mida de la imatge permet que algunes plataformes mostrin la targeta des de la primera compartició, sense esperar que s’hagi baixat la imatge.

X llegeix les seves pròpies etiquetes twitter:, però recorre al títol, la descripció i la imatge d’Open Graph quan falten les versions d’X; per això l’eina només afegeix el que X necessita de debò: twitter:card, els comptes opcionals i la descripció de la imatge. Així s’eviten duplicar tots els valors.

Mides d’imatge que funcionen a tot arreu

Fes servir JPEG o PNG, mantén el fitxer prou petit (ben per sota dels 5 MB) i evita posar text important a les vores, perquè cada plataforma retalla una mica diferent. Les previsualitzacions d’aquesta eina són aproximacions d’aquests dissenys, no captures de pantalla.

Després de publicar

Les plataformes socials desen a la memòria cau les previsualitzacions d’enllaços, de vegades durant dies. Després de canviar les etiquetes, demana-los que tornin a llegir la pàgina amb el Facebook Sharing Debugger o el LinkedIn Post Inspector. La pàgina ha de ser accessible públicament: els rastrejadors no poden veure pàgines protegides per un inici de sessió ni a localhost.