Projecte

General

Perfil

Accions

Tasca #5755

tancat
FJ FJ

Implementar les etiquetes opengraph per fer els registres més atractius a les xarxes

Tasca #5755: Implementar les etiquetes opengraph per fer els registres més atractius a les xarxes

Afegit per Ferran Jorba fa quasi 6 anys. Actualitzat fa més de 5 anys.

Estat:
Tancada
Prioritat:
Normal
Assignat a:
Categoria:
Tecnologia
Inici:
08-05-2020
Data de venciment:
29-05-2020
Paraula clau:

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:

Perquè si no, cal fer manualitats, com heu estat fent:

Resulta que això se soluciona posant-hi unes etiquetes a la capçalera de la pàgina, les open graph

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 obertes2 tancades)

relacionat amb DDD - Tasca #5710: Campanya dels 200.000 registres al DDDTancadaIsàvena Opisso16-04-202001-06-2020Accions
relacionat amb DDD - Tasca #5734: Arreglar i ampliar les metadades de la pàgina HTML dels registresTancadaCristina Azorin30-04-202017-12-2020Accions

FJ Actualitzat per Ferran Jorba fa quasi 6 anys Accions #1

  • S'ha afegit relacionat amb Tasca #5710: Campanya dels 200.000 registres al DDD

FJ Actualitzat per Ferran Jorba fa quasi 6 anys Accions #2

  • S'ha actualitzat Descripció (diferències)
  • Estat ha canviat de Creada a En curs

FJ Actualitzat per Ferran Jorba fa quasi 6 anys Accions #3

  • 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 Accions #4

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:

FJ Actualitzat per Ferran Jorba fa quasi 6 anys Accions #5

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.

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 Accions #6

  • 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.

FJ Actualitzat per Ferran Jorba fa quasi 6 anys Accions #7

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 Accions #8

  • 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 Accions #9

  • Prioritat ha canviat de Urgent a Normal

CA Actualitzat per Cristina Azorin fa més de 5 anys Accions #10

  • Paraula clau s'ha suprimit (NCR)
Accions

També disponible a: PDF Atom