Open Graph i previsualització social a la teva web d'empresa: com controlar com es veu el teu contingut en compartir-lo

Comparteixes un enllaç de la teva web a LinkedIn, WhatsApp o Slack i apareix una miniatura genèrica, un títol tallat o la foto d'un article antic. No és mala sort: gairebé sempre vol dir que falten o estan mal configurades les etiquetes Open Graph i de previsualització social. A aatsoft, agència de desenvolupament web a Manresa (Barcelona), auditem webs corporatives on el disseny funciona, però en compartir contingut l'empresa perd credibilitat i clics.

Què és Open Graph i per què importa a la teva web d'empresa

Open Graph és un protocol creat per Facebook (ara Meta) que permet descriure com s'ha de mostrar una URL quan algú la comparteix a xarxes socials, missatgeria o eines de col·laboració. Les etiquetes més habituals són og:title, og:description, og:image i og:url.

Quan un usuari enganxa el teu enllaç a WhatsApp o LinkedIn, la plataforma llegeix aquestes etiquetes i construeix la targeta de previsualització: imatge, titular i descripció. Si no existeixen, el sistema intenta endevinar el contingut rastrejant la pàgina. El resultat sol ser imprevisible: logo petit, text irrellevant o imatge retallada.

Per a una empresa, cada enllaç compartit és una micro landing page. Una bona previsualització social transmet professionalitat, reforça la teva identitat de marca i augmenta la probabilitat que algú faci clic.

Signes que la teva previsualització social està mal configurada

• En compartir una URL apareix una imatge diferent de l'article o producte
• El títol es talla o mostra el nom genèric del lloc («Inici — Empresa X»)
• La descripció repeteix el menú de navegació o un text legal del peu de pàgina
• WhatsApp o LinkedIn triguen a actualitzar la miniatura encara que hagis canviat la imatge
• Pàgines diferents comparteixen la mateixa imatge OG genèrica
• Al mòbil la targeta es veu sense imatge o amb icona trencada
• No has definit twitter:card i a X/Twitter la preview és pobra

Si reconeixes dos o més d'aquests símptomes, convé auditar les teves meta tags abans d'invertir més en contingut o campanyes de xarxes socials.

Les etiquetes essencials que ha de tenir cada pàgina

Open Graph bàsic

• og:title — Titular específic de la pàgina, distint de l'H1 si convé escurçar-lo per a xarxes
• og:description — Resum persuasiu de 150-200 caràcters, alineat amb la intenció de la URL
• og:image — URL absoluta de la imatge de preview (no relativa)
• og:url — URL canònica de la pàgina, coherent amb l'etiqueta canonical
• og:type — website per a home, article per a blog, product per a fitxes
• og:locale — Idioma de la pàgina (es_ES, en_US, ca_ES)

Twitter / X Cards

Encara que el nom faci referència a Twitter, aquestes etiquetes també influeixen en altres plataformes:

• twitter:card — Fes servir summary_large_image per a imatge gran
• twitter:title i twitter:description — Poden coincidir amb OG o adaptar-se
• twitter:image — Mateixa imatge que og:image o una variant optimitzada

Complementa OG amb bons meta títols i meta descripcions: Google i les xarxes no comparteixen el mateix algoritme, però partir d'una base coherent estalvia feina.

Com ha de ser la imatge og:image

La imatge de previsualització social és l'element visual que més impacte té en compartir. Recomanacions pràctiques per a webs d'empresa:

• Proporció: 1.91:1 (1200×630 px és l'estàndard més segur)
• Pes: per sota de 300 KB si és possible, sense perdre llegibilitat
• Contingut: missatge clar, marca visible, sense text minúscul als marges (WhatsApp retalla)
• Format: JPG o PNG; evita SVG perquè moltes plataformes no el renderitzen
• URL absoluta: https://elteudomini.com/storage/blog/imatge.jpg, no /storage/...

Si ja treballes l'optimització d'imatges, aplica els mateixos criteris a les OG: qualitat visual amb pes controlat.

Com auditar la teva previsualització social pas a pas

1. Inspecciona el codi font de cada plantilla clau (home, serveis, blog, fitxes) i localitza les etiquetes OG
2. Fes servir depuradors oficials: Meta Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator
3. Comparteix en entorn real: enganxa la URL a WhatsApp i Telegram abans d'una campanya
4. Comprova URLs absolutes a og:image i og:url, especialment en entorns multilingües
5. Verifica coherència amb canonical i hreflang si tens web en diversos idiomes
6. Documenta plantilles perquè cada nova landing o entrada de blog hereti tags correctes
7. Revisa després de canvis de disseny — un redisseny pot trencar rutes d'imatge sense que ho notis al navegador

Integra aquesta auditoria amb la teva revisió periòdica a Google Search Console: no mesuren el mateix, però detectar inconsistències entre SEO i social evita sorpreses.

Errors freqüents en webs corporatives

Una sola imatge OG per a tot el lloc

La home pot usar una imatge genèrica de marca, però cada article, cas d'èxit o landing de campanya necessita la seva pròpia og:image. Si no, tots els enllaços compartits semblen iguals.

Imatges massa petites o verticals

Un logo quadrat de 200 px es veurà borrós o amb bandes buides. LinkedIn i Facebook prefereixen horitzontal.

Cache de plataformes sense invalidar

Meta i LinkedIn cachegen la preview. Després de corregir etiquetes, fes servir les seves eines de depuració per forçar la recàrrega.

Confondre Open Graph amb dades estructurades

Les dades estructurades Schema ajuden Google; Open Graph ajuda xarxes i missatgeria. Són complementaris, no substituts.

Etiquetes duplicades o contradictòries

Plugins, CMS i codi manual poden generar dos og:title diferents. El crawler es queda amb un a l'atzar.

Què perd la teva empresa si ignores la previsualització social

• Menys clics en enllaços compartits per empleats, clients o premsa
• Imatge de marca inconsistent entre canals digitals
• Despilfarrament de contingut — un bon article amb preview pobra no arrenca a LinkedIn
• Menor confiança en campanyes d'email marketing o newsletters amb enllaços «trencats» visualment
• Problemes en campanyes pagades quan el tràfic social aterra amb expectatives diferents de la targeta mostrada

Checklist ràpid abans de publicar una pàgina nova

• og:title descriu la pàgina en menys de 60 caràcters?
• og:description convida al clic sense repetir el menú?
• og:image existeix, carrega amb HTTP 200 i mesura almenys 1200×630 px?
• og:url coincideix amb la URL canònica?
• twitter:card està en summary_large_image?
• Has provat l'enllaç a WhatsApp i LinkedIn?

Conclusió: la teva web també es ven en l'enllaç compartit

Open Graph no és un detall tècnic menor: és la carta de presentació de cada URL fora del teu domini. Configurar-lo bé comporta poques hores d'implementació i revisió, però el retorn es multiplica cada vegada que algú comparteix el teu contingut.

A aatsoft ajudem empreses de Manresa, Barcelona i tot Catalunya a revisar meta tags, previews socials i SEO tècnic perquè cada enllaç transmeti la mateixa qualitat que la web. Sol·licita pressupost gratis i revisem com es veu el teu lloc en compartir-lo.