Open Graph: què és i com implementar-lo

Com a SEOs és imprescindible utilitzar i optimitzar el marcatge de dades per a Google, però també és molt recomanable treballar el marcatge de dades web per a xarxes socials. Avui us parlem d’Open Graph, el més important i que avui dia s’ha convertit en imprescindible.

Què és Open Graph

Open Graph (OG) és un tipus de marcatge creat per Meta amb l’objectiu d’etiquetar els continguts web per determinar-ne l’aparença en compartir-los a xarxes socials.

Actualment, a més de tot l’univers Meta (Facebook, Instagram, WhatsApp), també l’utilitzen Linkedin, Discord i més xarxes socials i agregadors, convertint-se en un estàndard i referent de marcatge de dades socials, igual que Schema ho és en l’àmbit dels Rich Snippets.

Principals etiquetes Open Graph

Aquesta llista està en constant evolució i revisió, segons evolucionen els continguts web i les necessitats de marcatge. Mencionarem les més bàsiques, tot i que hi ha moltes més etiquetes:

• og:title - El títol del contingut. En general et convindrà enviar el mateix meta title que uses per a Google.
• og:type - El tipus de contingut: fitxa de producte, post de blog, etc. Segons el tipus escollit, caldrà aportar més detalls.
• og:image - La imatge principal que es previsualitzarà en compartir a xarxes.
• og:url - La URL canònica del contingut.
• og:video - Per al marcatge de continguts de vídeo.
• og:site_name - El nom del lloc web, la marca.
• og:description - Una descripció breu que es mostrarà a la previsualització. Normalment també coincideix amb la meta-description de Google.
• og:locale - L’idioma en què està escrit el contingut.

Com implementar els tags Open Graph

Per a una lectura correcta, aquests han d’estar ubicats dins del head de l’HTML. Per implementar-los pots fer-ho:

• manualment en el codi
• a través de Tag Manager
• si utilitzes CMS com Wordpress, probablement un bon plugin ja te’ls generarà, com RankMath o Yoast.

Veiem un exemple de marcatge disponible: agafem la nostra landing de servei com a agència SEO:

En aquest cas utilitzem els tags url, type, title, description i image. Amb això cobrim les etiquetes bàsiques, tot i que podríem ampliar-les amb site_name, idioma i vídeo. Igual que amb Schema per als Rich Snippets, com més etiquetes, millor.

Com validar els tags Open Graph

Hi ha diverses eines online per validar el marcatge Open Graph. Tot i això, recomanem usar la pròpia de Meta: Sharing Debugger (depurador de contingut compartit).

Hem passat la URL de la nostra guia SEO, i ens retorna això:

Facebook ens mostra la informació de què disposa: la URL canònica, les senyals socials i la previsualització d’una hipotètica compartició.

Fixa’t en un detall: indica el temps d’extracció, és a dir, quan va ser l’últim rastreig del qual va obtenir aquesta informació. Si hem fet canvis, podem clicar "Tornar a extreure" i el crawler tornarà a rastrejar en viu. Hem fet una prova canviant el title, i l’actualitza al moment:

Més avall indica quins atributs og: ha detectat i dóna idees per millorar-los o completar-los.

Twitter Cards, l’alternativa de X

Malauradament, Open Graph no és l’únic sistema de marcatge social. Algunes xarxes no accepten tots els paràmetres OG i tenen el seu propi sistema. És el cas d’X, amb les seves Twitter Cards.

La importància de treballar els Open Graph

Avui dia, les xarxes socials són essencials en la compartició d’informació entre usuaris. Els usuaris poden compartir lliurement contingut de la nostra web. Si fem servir correctament Open Graph, el contingut es mostrarà de manera clara i atractiva i augmentarem el CTR cap al nostre web. Per això, encara que no sigui una tasca SEO clàssica, és molt recomanable implementar-ho en qualsevol projecte web.