L'impacte del protocol Open Graph en el SEO

Què són les tags Open Graph?

Les meta tags o protocol Open Graph van ser creades per Facebook i permeten que qualsevol pàgina web es mostri amb un format enriquit a les xarxes socials. Aquestes tags HTML s'encarregaran de mostrar el contingut (títol, descripció, imatge de la pàgina, etc.) d'una pàgina que es comparteix a les xarxes socials. Si aquestes tags no existeixen o no s'especifiquen, es mostrarà informació de manera aleatòria, escollint una foto a l'atzar, un títol o una descripció no descriptius...

Per a què serveixen?

Aquestes tags es coneixen com a tags socials i són molt importants per aconseguir posicionament a totes i cadascuna de les xarxes socials. Segons la xarxa social, serà més fàcil o difícil, però el posicionament a les xarxes socials existeix, és real.

El protocol Open Graph es va utilitzar inicialment a Facebook i actualment també està reconegut a LinkedIn. D'altra banda, les tags de Twitter són exclusives d'aquesta xarxa social.

Les tags són les següents:

og:title:

El "Title" s'encarrega de dir al cercador de què tracta la pàgina. Per tant, ha de ser clar, concís i únic a cada pàgina. La seva longitud màxima és de 67 caràcters.

Exemple:

<meta property="og:title" content="Què són les tags Open Graph?"/>

og:description

La "Meta description" serà la que descriurà i informarà més extensament sobre la pàgina. No ha de superar els 155 caràcters i pot contenir una frase o CTA que animi l'usuari a fer clic al resultat. També ha de ser única per a cada pàgina.

Exemple:

<meta property="og:description" content="Saps com veuen els usuaris la teva pàgina web quan la comparteixen als seus perfils socials? Les tags Open Graph s'encarregaran de mostrar tota la informació."/>

og:url:

Es mostra la URL d'una pàgina web, i es pot mostrar escurçada. Intenta utilitzar aquesta tag amb una URL tan neta com sigui possible i única a cada pàgina.

Exemple:

<meta property="og:url" content="/ca/blog/open-graph" />

og:image

Has d'especificar una URL d'imatge perquè es pugui mostrar a cada pàgina. Aquesta és segurament una de les més oblidades i una de les més importants. Google Discover, Google News, Facebook, Twitter, LinkedIn... totes recolliran aquesta imatge com a esquer per a l'usuari, i si és de bona qualitat, pots aconseguir tones de visites. En cas contrari, si deixes el camp buit, es pot mostrar la foto de l'autor, un camp buit... Tu tries quina és millor! ;)

Exemple:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

En cas que tinguis un vídeo a la pàgina, l'has d'especificar mitjançant aquesta tag, que en facilita la interpretació.

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

Aquesta tag indica de què consisteix el teu contingut. Si es tracta d'un article, un vídeo, un post de blog... Segons el tipus, pots assignar diferents propietats.

Exemple:

<meta property="og:type" content="article" />

og:site_name

Amb ella pots especificar la teva pàgina web perquè es mostri la teva marca.

<meta property="og:site_name" content="SEO Alive" />

Tipus de meta tags socials que existeixen

Actualment, les tags creades per Facebook s'utilitzen a la resta de xarxes socials, com LinkedIn. Twitter utilitza el que es coneix com a Twitter Cards. Amb aquestes tags tens tres opcions:

• ›

  "Photo" per a imatges

• ›

  "Player" per a vídeos i

• ›

  "Summary" per a tota la resta.

En aquest cas, igual que amb les targetes Open Graph, si no està optimitzat, es mostrarà contingut per defecte i no optimitzat.

Eines de testeig de tags

Analitzar com es veuen les pàgines quan un usuari les comparteix a les xarxes socials serà crucial si volem que tot funcioni correctament.

Twitter Card Validator

L'eina de validació de Twitter és Twitter Card Validator. Abans de publicar res, si vols assegurar-te que tot es mostra correctament, no dubtis a introduir la URL que vols compartir. També és molt útil si has actualitzat la imatge d'una pàgina i el feed continua mostrant l'antiga. Tornar-la a analitzar actuarà com una "purga de cau".

Facebook Debugger

L'eina de depuració de Facebook es coneix com a Facebook Debugger. Amb ella pots veure quina informació s'està utilitzant i com es veu quan es comparteix una pàgina del teu lloc. A més, en cas que algun dels camps sigui incorrecte o falti, apareixerà un avís.

Google Structured Data Testing Tool

Google també posa al nostre abast l'eina de testeig de dades estructurades anomenada Google Structured Data Testing Tool. És molt útil per comprovar quin tipus de marcatge està recollint Google d'una pàgina. El marcatge és reconegut pels cercadors, cosa que ajuda a fer una pàgina web "semàntica" introduint les microdades Schema específiques per a cada cas.

Rich Pins Validator

Pinterest no es podia quedar enrere i porta el seu validador de pins, també conegut com a Rich Pins Validator. Funciona igual que el validador de Twitter: cal un procés d'aprovació per obtenir la funcionalitat Rich Pin i comprovar el marcatge de dades alhora.

Com optimitzar aquestes tags a WordPress?

Com pots saber, un dels grans avantatges que ens ofereix WordPress és la seva flexibilitat i la seva enorme comunitat. Com a resultat, processos com introduir tags open-graph a les nostres pàgines i articles porten només segons gràcies als plugins.

Hi ha moltes maneres d'aconseguir-ho. En el nostre cas, creiem que la més fàcil és fer-ho mitjançant el plugin SEO Rank Math.

Article recomanat > Tutorial SEO en profunditat sobre Rank Math

Només has d'anar a la secció SEO de la pàgina o article en qüestió, fer clic a la pestanya "Social" i allà veurem l'opció de configurar la imatge. En molts casos, si hem pujat una imatge destacada, la recollirà directament.

Consells i millores

A continuació, pots veure alguns consells basats en l'experiència que ens han funcionat per aconseguir molt bons resultats.

Optimitza les imatges

Tria imatges de qualitat. Has d'escollir cada imatge perfectament perquè representarà el teu contingut. A més, serà la imatge que apareixerà quan l'usuari comparteixi el contingut.

Cada plataforma té certs estàndards; el millor és escollir una imatge gran que pugui encaixar a cada xarxa social.

El contingut visual és el més atractiu a les xarxes socials, i si aconsegueixes fer-lo viral, obtindràs més visites a la teva pàgina web. Ja saps, inverteix temps a triar la imatge perfecta per aconseguir m'agrada, comparticions i comentaris.

• ›

  Twitter: 120x120px per a la petita i 4096x4096px per a la gran

• ›

  Facebook: la més petita a 200px i la més gran a 1200px

Utilitza sempre Open Graph

En ser un format ja conegut, més plataformes el poden utilitzar. Es recomana utilitzar plantilles de codi per inserir tags socials; pots consultar tota la informació a la guia següent.

Guia recomanada -> Meta tags en SEO

Prova i experimenta

Prova sempre i comprova als validadors per assegurar-te que els resultats del teu lloc s'estan mostrant correctament a les xarxes socials.

Conclusions

Són petits detalls que faran que la teva marca tingui molt bona pinta als ulls dels usuaris. Tingues en compte que aquestes tags són essencials per mostrar correctament la teva pàgina i atreure visites. També faciliten als cercadors entendre la teva pàgina web. Així doncs, l'optimització SEO també inclou parar atenció a les xarxes socials.

Recorda també que els senyals socials, és a dir, el trànsit que ve de les xarxes socials, poden afectar positivament una estratègia SEO, així que cada clic des de les xarxes socials val el seu pes en or!

Tens cap pregunta o suggeriment? Estem encantats d'ajudar-te!

Referències:

• ›https://ogp.me/ - Pàgina web oficial del protocol Open Graph