Us passeu una hora escrivint una publicació per a LinkedIn, hi enganxeu l'enllaç i espereu que aparegui la previsualització. Res. O pitjor: surt la imatge equivocada, el títol està desfigurat i la descripció és un tros qualsevol del text de la pàgina que fora de context no té cap sentit.
No sou els únics. Les previsualitzacions d'enllaços trencades són un dels problemes més habituals del màrqueting digital, i dels que més fàcilment s'arreglen. Aquesta guia repassa les vuit causes més freqüents, us mostra exactament què heu de mirar i us permet provar el vostre URL amb l'eina Open Graph Preview que hi ha inserida més avall.
Què són les etiquetes Open Graph?
Quan compartiu un URL a LinkedIn, Facebook, Slack, Twitter/X, iMessage o gairebé qualsevol plataforma social, la plataforma no mostra l'enllaç tal qual. Obté la pàgina en segon pla, llegeix un conjunt d'etiquetes HTML ocultes anomenades etiquetes Open Graph (OG) i les fa servir per construir una targeta de previsualització amb un títol, una descripció i una imatge.
Open Graph el va crear Facebook i el va publicar com a protocol obert el 2010.[1] Des d'aleshores s'ha convertit en l'estàndard universal de previsualització d'enllaços a gairebé totes les plataformes. Un conjunt típic d'etiquetes OG a l'element <head> de l'HTML d'una pàgina té aquest aspecte:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of this page." />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />
Quan aquestes etiquetes hi són, són correctes i es poden obtenir, les previsualitzacions funcionen perfectament. Quan en falta una, és incorrecta o està bloquejada, la previsualització es trenca, de vegades sense cap avís.
Us sona estrany algun terme? Consulteu el glossari d'escurçament d'enllaços, amb definicions planeres de les etiquetes Open Graph, les previsualitzacions socials, els URL canònics i altres conceptes relacionats.
Proveu el vostre URL ara mateix
Abans d'entrar en les vuit causes, feu servir l'eina següent per comprovar qualsevol URL amb què estigueu treballant. Obté la pàgina de la mateixa manera que LinkedIn i Facebook i us mostra exactament quines etiquetes hi ha, quines falten i com es veurà la previsualització.
Proveu-la gratis, sense registre
Verificador d'Open Graph
Vegeu les etiquetes que hi ha darrere d'un enllaç i la targeta que generen.
Els 8 motius més habituals d'una previsualització trencada
1. No hi ha cap etiqueta OG
És la causa més habitual. Molts llocs web, sobretot els antics, les eines fetes a mida i les pàgines d'aplicacions, simplement no tenen etiquetes Open Graph a l'HTML. Quan una plataforma social no les troba, improvisa: pot agafar el <title> de la pàgina, el primer paràgraf del text o no mostrar cap imatge.
Què heu de mirar: obriu el codi font de la pàgina (a la majoria de navegadors, feu clic amb el botó dret → «View Page Source») i cerqueu og:title. Si no trobeu res, les etiquetes no hi són.
Com arreglar-ho: afegiu les cinc etiquetes bàsiques de més amunt a la secció <head> de la pàgina. Si feu servir WordPress, connectors com Yoast SEO o Rank Math se n'encarreguen automàticament. A la majoria de creadors de llocs web (Squarespace, Webflow, Wix) hi ha un tauler de configuració de SEO o de compartició a xarxes socials per a cada pàgina.
2. La imatge OG és massa petita
Les plataformes exigeixen unes dimensions mínimes d'imatge i no mostren les imatges que no hi arriben. LinkedIn, per exemple, demana imatges d'almenys 1200 × 627 píxels per al format de targeta gran.[2] Facebook recomana les mateixes dimensions i, si la vostra és més petita, la redueix a una miniatura petita o no en mostra cap.
Els culpables habituals: un logotip de l'empresa (normalment quadrat i petit), una icona de web (favicon) o una foto d'arxiu que es va comprimir abans de pujar-la.
Què heu de mirar: l'eina de previsualització us mostra la imatge que s'ha trobat i les seves dimensions. Una imatge OG de la mida correcta per a les plataformes actuals fa 1200 × 630 píxels (una relació d'aspecte d'1,91:1).
Com arreglar-ho: creeu una imatge específica per compartir a xarxes socials de 1200 × 630 píxels. És diferent de la imatge principal de la pàgina: està pensada perquè quedi bé retallada en una targeta horitzontal. Eines com Canva tenen plantilles fetes exactament d'aquesta mida.
3. La plataforma té una previsualització antiga a la memòria cau
LinkedIn, Facebook i altres plataformes guarden les previsualitzacions a la memòria cau de manera agressiva, de vegades durant dies o fins i tot setmanes. Això vol dir que, encara que hàgiu arreglat les etiquetes OG, continua apareixent la previsualització antiga (i trencada), perquè la plataforma no ha tornat a obtenir la pàgina.
És una de les situacions més frustrants, perquè la correcció ja està publicada i sembla que no hagi canviat res.
Com arreglar-ho: cada plataforma important ofereix una eina de rastreig o de depuració que força una nova lectura:
- LinkedIn: feu servir el LinkedIn Post Inspector: enganxeu-hi l'URL, feu clic a «Inspect» i tornarà a llegir les dades i buidarà la memòria cau d'aquest URL.
- Facebook / Meta: feu servir el Meta Sharing Debugger: enganxeu-hi l'URL i feu clic a «Scrape Again».
- Twitter/X: la memòria cau es buida més sovint, però podeu forçar una actualització afegint un paràmetre de consulta inofensiu (per exemple,
?v=2) la primera vegada i traient-lo després.
Feu que buidar la memòria cau sigui el primer pas després de qualsevol canvi a les etiquetes OG.
4. Hi ha una redirecció pel mig
Si l'URL redirigeix a un altre URL abans que es carregui la pàgina final, algunes plataformes llegeixen les etiquetes OG de l'URL intermedi en lloc de la destinació final, o directament no segueixen la redirecció.[3]
Passa sobretot amb:
- Enllaços curts (que redirigeixen a un URL de destinació llarg)
- URL antics que fan una redirecció 301 cap a URL nous
- Enllaços amb paràmetres de seguiment que passen per una capa de redirecció
- Enllaços d'afiliació que passen per diversos salts
Una cadena de redireccions, en què l'URL A redirigeix a l'URL B, que redirigeix a l'URL C, agreuja molt el problema. Cada salt és una altra ocasió perquè el rastrejador es rendeixi o llegeixi la pàgina equivocada.
Com arreglar-ho: feu servir el camí de redireccions més curt possible (idealment un sol salt directe a la pàgina final). Assegureu-vos que la pàgina de destinació final té les etiquetes OG correctes. Si feu servir un escurçador d'enllaços, comproveu si la plataforma admet transmetre les etiquetes OG o definir una previsualització social personalitzada: moltes plataformes de gestió d'enllaços us permeten posar les dades OG directament a l'enllaç curt, independentment del que hi hagi a la pàgina de destinació.
5. La imatge OG és massa grossa (mida del fitxer)
Les dimensions importen, però la mida del fitxer també. La guia oficial de Facebook recomana mantenir les imatges OG per sota de 8 MB,[4] però a la pràctica les imatges de més d'1-2 MB sovint fan que els rastrejadors esgotin el temps d'espera en intentar obtenir-les, sobretot en servidors lents o allotjaments compartits.
Una captura de pantalla en 4K, un PNG sense comprimir exportat d'un programa de disseny o una foto en brut d'una càmera poden fer fàcilment 5-15 MB, encara que les dimensions en píxels siguin correctes.
Com arreglar-ho: comprimiu la imatge OG abans de pujar-la. Eines com Squoosh (el compressor d'imatges gratuït de Google que funciona al navegador) o TinyPNG poden reduir la mida del fitxer un 60-80 % sense pèrdua de qualitat visible. Apunteu a menys de 500 KB perquè la càrrega sigui ràpida i fiable a totes les plataformes.
6. El servidor envia un tipus MIME incorrecte
Un tipus MIME és l'etiqueta que un servidor posa a un fitxer per indicar al navegador (o al rastrejador) de quin tipus de fitxer es tracta. Si el servidor envia una imatge amb un tipus MIME incorrecte, per exemple marcant un JPEG com a text/html, els rastrejadors la rebutgen i no mostren cap imatge, encara que el fitxer en si sigui perfectament vàlid.[5]
Sembla un cas rar, però passa més sovint del que us pensaríeu, sobretot amb:
- Imatges servides des d'una CDN amb les capçaleres mal configurades
- Fitxers pujats sense l'extensió adequada (per exemple,
previewen lloc depreview.jpg) - Servidors que assignen per defecte
application/octet-streama tots els fitxers desconeguts
Què heu de mirar: l'eina Open Graph Preview us mostra el tipus de contingut que es retorna per a la imatge OG. Hauria de ser image/jpeg, image/png, image/gif o image/webp. Qualsevol altre tipus donarà problemes almenys en algunes plataformes.
Com arreglar-ho: si controleu el servidor, configureu-lo perquè serveixi les imatges amb la capçalera Content-Type correcta. Si feu servir un CMS o una CDN, torneu a pujar la imatge amb l'extensió de fitxer correcta i comproveu les capçaleres que se serveixen amb les eines per a desenvolupadors del navegador (pestanya «Network» → feu clic a la petició de la imatge → «Headers»).
7. Les etiquetes OG i les de Twitter Card entren en conflicte
LinkedIn i Facebook fan servir les etiquetes Open Graph. Twitter/X fa servir un sistema propi anomenat Twitter Cards.[6] La majoria de plataformes recorren a les etiquetes OG si no hi ha etiquetes de Twitter Card, però quan hi ha tots dos conjunts i es contradiuen (títols diferents, imatges diferents), algunes plataformes s'emboliquen i mostren el que no toca, o alternen entre tots dos de manera imprevisible.
Un conflicte típic: un desenvolupador va afegir etiquetes OG que apuntaven a un bàner horitzontal, i més tard algú de l'equip de màrqueting va afegir etiquetes de Twitter Card que apuntaven a un logotip quadrat. Ara LinkedIn mostra el logotip quadrat en lloc del bàner.
Com arreglar-ho: reviseu els dos conjunts d'etiquetes alhora. A la majoria de pàgines, les equivalents og: i twitter: haurien de ser idèntiques, tret que tingueu un motiu deliberat per mostrar contingut diferent a cada plataforma. Si voleu coherència, definiu explícitament les etiquetes de Twitter Card perquè coincideixin amb les OG:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />
8. L'Inspector de LinkedIn té les seves particularitats
El rastrejador de LinkedIn es comporta diferent del de Facebook i del de Twitter en alguns aspectes notables:
- No segueix totes les redireccions. De vegades el rastrejador de LinkedIn s'atura a la primera redirecció i llegeix les etiquetes de l'URL intermedi, no de la pàgina final.[2]
- Respecta
X-Frame-Optionsi algunes regles derobots.txt. Si el vostrerobots.txtno permet el rastrejador de LinkedIn (Linkedinbot), les previsualitzacions fallaran. - Autenticació a la CDN d'imatges. Si la imatge OG està darrere de qualsevol tipus d'autenticació, testimoni o URL signat que caduca, LinkedIn la llegirà bé la primera vegada, però fallarà en els intents següents quan el testimoni hagi caducat.
- Triga més a buidar la memòria cau. Fins i tot després de forçar una nova lectura amb el Post Inspector, és possible que les publicacions de LinkedIn que ja han sortit amb la previsualització antiga no s'actualitzin; és així per disseny.
Com arreglar-ho: passeu l'URL pel LinkedIn Post Inspector abans de publicar, no després. Feu-ne una comprovació prèvia cada vegada que compartiu un enllaç important. Assegureu-vos que el robots.txt permet Linkedinbot. Serviu les imatges OG des d'un URL públic i permanent, sense autenticació ni testimonis que caduquin.
Com construeixen les aplicacions la targeta de previsualització
Totes les previsualitzacions d'enllaços enriquides surten de la mateixa seqüència, sigui quina sigui l'aplicació on enganxeu l'enllaç.
- Obtenció. El rastrejador de la plataforma demana l'URL amb el seu propi agent d'usuari, segueix les redireccions i llegeix l'HTML que retorna el servidor. No executa el vostre JavaScript com ho fa un navegador, i per això sovint hi falten les etiquetes que s'injecten al client.
- Lectura de les etiquetes. Busca
og:title,og:descriptioniog:image(X comprova primertwitter:*i recorre a Open Graph si no hi són; Discord i Slack també llegeixen oEmbed quan un lloc el publica). Si falta una etiqueta, el rastrejador recorre al títol de la pàgina, a la metadescripció o a res. - Obtenció de la imatge. L'URL de la imatge es demana a part i se'n comproven la mida i les dimensions. Un camí relatiu, una redirecció o un fitxer massa gros o massa petit és el motiu més habitual pel qual una targeta surt sense imatge.
- Memòria cau i visualització. El resultat es desa a la memòria cau durant hores o dies, segons la plataforma, i es dibuixa amb el disseny de cada plataforma: imatge gran a dalt per a
summary_large_imaged'X i per a LinkedIn, una targeta compacta per a iMessage, una inserció amb una franja de color per a Discord.
El comprovador de previsualitzacions d'enllaços fa els passos de l'u al tres per vosaltres i us mostra la targeta final de vuit plataformes una al costat de l'altra; el comprovador d'Open Graph mostra les etiquetes en brut que hi ha al darrere. Si la targeta es veu bé a l'eina però malament a l'aplicació, la causa gairebé sempre és el pas quatre: una còpia a la memòria cau d'abans de la correcció.
Llista de comprovació ràpida
Feu-la servir abans de compartir qualsevol enllaç important:
| Comprovació | Condició per passar |
|---|---|
og:title present | Sí |
og:description present | Sí |
og:image present | Sí |
og:url present i canònic | Coincideix amb la destinació final |
| Dimensions de la imatge | Almenys 1200 × 630 px |
| Mida del fitxer de la imatge | Menys d'1 MB (idealment menys de 500 KB) |
| Tipus MIME de la imatge | image/jpeg, image/png o image/webp |
| Salts de redirecció fins a la pàgina final | 1 o menys |
| Cap URL d'imatge caducat o amb autenticació | Sí |
| Memòria cau buidada amb el LinkedIn Post Inspector | Executeu-lo abans de publicar |
| Etiquetes de Twitter Card coherents amb les OG | Sí |
Per què importa més enllà de l'estètica
Una previsualització trencada no és només un problema estètic. La recerca mostra de manera constant que les publicacions amb previsualitzacions amb imatge obtenen força més interacció que les publicacions d'enllaços només amb text. Les dades del mateix LinkedIn indiquen que les publicacions amb imatges reben un 98 % més de comentaris que les que no en tenen.[2] A Facebook, les publicacions d'enllaços amb previsualitzacions optimitzades superen sistemàticament les que no en tenen, tant en abast orgànic com en rendiment dels anuncis de pagament.
Si feu qualsevol tipus de distribució de contingut (articles de blog, pàgines de destinació, pàgines de producte, notes de premsa), arreglar les etiquetes Open Graph és una de les inversions de 30 minuts que més rendeixen.
Referències
[1] Meta Platforms, Inc. (2010, en curs). The Open Graph Protocol. ogp.me. https://ogp.me/
[2] LinkedIn. (2024). Share on LinkedIn — Developer Documentation: Best Practices. LinkedIn Developer Platform. https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin
[3] Fielding, R., Nottingham, M., & Reschke, J. (2022). RFC 9110: HTTP Semantics, §15.4 (Redirection). Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc9110#section-15.4
[4] Meta for Developers. (2024). Sharing Best Practices for Websites & Mobile Apps. https://developers.facebook.com/docs/sharing/best-practices/
[5] Freed, N., & Borenstein, N. (1996). RFC 2046: MIME Part Two — Media Types. IETF. https://www.rfc-editor.org/rfc/rfc2046
[6] X Corp. (2024). Cards — X Developer Platform. https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
Darrera actualització: maig de 2026. Vegeu també el glossari d'escurçament d'enllaços: etiquetes Open Graph / OG, previsualització social, URL canònic, cadena de redireccions.