Tasca #5755
tancatImplementar les etiquetes opengraph per fer els registres més atractius a les xarxes
Descripció
Quan compartim una url registre a qualsevol de les xarxes socials, pot aparèixer amb més o menys gràcia depenent de l'haver-hi posat o no unes etiquetes meta a la capçalera de la pàgina. Per exemple:
- https://twitter.com/DrLanau/status/1257583289466064896 (el del DDD)
- https://twitter.com/naciodigital/status/1258702469841944577
- https://twitter.com/diariARA/status/1258690489915752448
- https://twitter.com/MonDiari/status/1258688360882855936
Perquè si no, cal fer manualitats, com heu estat fent:
- https://twitter.com/bibliotequesUAB/status/1257627431936106499
- https://twitter.com/GREDICS1/status/1257251140724539394
Resulta que això se soluciona posant-hi unes etiquetes a la capçalera de la pàgina, les open graph
- https://ogp.me/
- https://ahrefs.com/blog/open-graph-meta-tags/
- https://www.google.cat/search?q=opengraph
Les bàsiques són quatre, segons la primera de les urls:
- og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
- og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
- og:image - An image URL which should represent your object within the graph.
- og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
Estaria molt bé que el DDD també les tingués. A veure si ho podem fer abans del registre 200.000
Twitter en requereix unes de molt semblants. Segons les meves proves, no reutilitza les d'Opengraph:
- twitter:card, que pot ser "summary", per imatges petites (gif, no pot ser ico), o "summary_large_image", per imatges de més entitat (típicament jpg).
- twitter:title, el títol (245 $a)
- twitter:description, el 520 $a, primera frase
- twitter:image, 856 $u de la imatge, o el gif del primer pdf
Tasques relacionades 2 (0 obertes — 2 tancades)
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
- S'ha afegit relacionat amb Tasca #5710: Campanya dels 200.000 registres al DDD
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
- S'ha actualitzat Descripció (diferències)
- Estat ha canviat de Creada a En curs
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
- S'ha afegit relacionat amb Tasca #5734: Arreglar i ampliar les metadades de la pàgina HTML dels registres
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
Jo crec que ja està.
En el cas de Twitter, el criteri que he seguit és:
- Si existeix en totes les 856 alguna imatge en jpg o png, he triat etiquetar el registre com a twitter:card "summary_large_image"; i si no, "summary"
- En el primer cas, la imatge és aquest primer jpg o png. Si no, és el gif del primer pdf (o qualsevol altre document que tingui gif). He comprovat que el format .ico no l'accepta, però el gif sí. Tot i que els nostres gifs són animats, Twitter ja aclareix que només agafa el primer frame. En tot cas, queda una mica borrós, perquè aparentment el converteix a jpg i l'amplia a 120 pixels. Sigui com sigui, és fàcil fer-se'n la idea de la imatge de la portada del document.
- Si no té cap imatge associada a un document específic (p. ex., en els embargats, o el dels registres de les revistes amb articles), o són imatges genèriques de format (com Excel o mp3) agafarà el logo genèric del DDD.
- Les etiquetes title i description són el 245 $a i la primera frase del primer 520 $a.
Podeu fer-ne proves de previsualització sense haver-les de piular a:
- https://cards-dev.twitter.com/validator (de vegades cal fer clic un segon cop a Preview card perquè carregui la imatge)
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
No he pogut provar Facebook, perquè no hi tinc compte, però Whatsapp, que des de fa alguns anys és propietat de Facebook, sembla que utilitza les etiquetes og (opengraph). El comportament, però, és molt irregular.
El que he fet és, d'entrada, fer com amb Twitter, i triar la primera imatge jpg o png. Si no n'hi ha cap, he agafat el logo del DDD. Però en el cas de Whatsapp, el mateix registre de vegades surt amb imatge i d'altres no. Jo no sóc capaç de trobar-hi cap regla clara. D'entrada, només accepta imatges d'un cert tamany, tot i que no està clar quin.
- https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing
- https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work
- https://stackoverflow.com/questions/15421521/ogimage-open-graph-warnings-image-size
Pel que fa a Facebook o Instagram, agrairé molt que m'expliqueu les vostres experiències, idees, suggeriments o documents.
CA Actualitzat per Cristina Azorin fa quasi 6 anys
- Data de venciment s'ha establert a 29-05-2020
- Paraula clau s'ha establert a NCR
En el cas del xat del Teams (microsoft) depèn del tipus de registre, per embargats surten els daus del DDD, si és d'imatge surt i si és un pdf surt el gif i es veu moviment. En tots els casos fa una reducció de la imatge de vegades tallant una part, no una reducció proporcional.
- Dades: https://ddd.uab.cat/record/196065
- Capítol: https://ddd.uab.cat/record/217388
- Embargat: https://ddd.uab.cat/record/217864
- Cartells: https://ddd.uab.cat/record/216857
FJ Actualitzat per Ferran Jorba fa quasi 6 anys
Tornant a Whatsapp, i a partir de les referències que he trobat (ex: https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work/39204097), he estat fent proves de quin és el tamany (en bytes, no en pixels) que fa que funcioni. A mi, el que comprovat és que més de 400 Kb ja no les ensenya.
Per tant, si agafem un registre amb moltes imatges de pesos diferents, com els dels cartells polítics, ara el programa agafa la primera imatge menor de 400 Kb. Per exemple, en el cas de https://ddd.uab.cat/record/205868, hi surt el segon cartell, no el primer, perquè a la que feia màxim 500 Kb (el primer cartell és de 419.7 Kb), ja no se'n veia cap, de miniatura. He considerat que era millor això que no pas (a) que no surti cap imatge o (b) que surti el logo genèric del DDD. En principi, aquesta política hauria d'afectar també a Facebook, perquè utilitza les mateixes etiquetes og (opengraph) que Whatsapp.
Això no condiciona la visualització a Twitter, ja que, pel que sembla, no ho limita per tamany (al menys fins on he vist). Els que estigueu fent proves amb Facebook o Instagram, agrairé, com sempre, les vostres troballes.
FJ Actualitzat per Ferran Jorba fa més de 5 anys
- Estat ha canviat de En curs a Tancada
De moment funciona raonablement bé. Tanquem-la, doncs.
CA Actualitzat per Cristina Azorin fa més de 5 anys
- Prioritat ha canviat de Urgent a Normal
CA Actualitzat per Cristina Azorin fa més de 5 anys
- Paraula clau s'ha suprimit (
NCR)