Afegeix etiquetes Twitter / X Card

Què comprova aquesta auditoria

Escaneja el <head> de la pàgina buscant <meta name="twitter:card" content="…"> i (quan correspon) twitter:image, twitter:title, twitter:description i twitter:site. La comprovació falla quan no hi ha cap twitter:card present i X ha de recórrer a un tipus de previsualització més petit, o a cap previsualització.

Per què importa

X (abans Twitter) renderitza les URLs publicades en un de tres formats de previsualització:

summary_large_image, una targeta amb imatge a tot el ample i títol i descripció a sota. El format d’alta conversió que tota marca vol.
summary, una targeta de miniatura petita. El defecte si no s’estableix twitter:card però hi ha etiquetes Open Graph.
Cap targeta, una URL nua, sense previsualització. El que passa quan no hi ha OG ni etiquetes Twitter.

Una targeta summary_large_image aconsegueix una taxa de compartició i de clic significativament més alta que una summary; totes dues aixafen una URL nua. La diferència és una etiqueta meta.

Com solucionar-ho

Posa quatre etiquetes meta al <head>. Tres poden reflectir les teves etiquetes Open Graph: X recorre als valors OG si falten els equivalents Twitter, però les etiquetes Twitter explícites et permeten establir una imatge diferent per a X si vols:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Auditoria SEO gratuïta en 60 segons, MetricSpot">
  <meta name="twitter:description" content="Mira el que veuen els agents d'IA i Google al teu lloc. 91 comprovacions, sense registre.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

El mínim que necessites és twitter:card. Si la teva pàgina ja té etiquetes Open Graph, X llegeix aquestes per a títol/descripció/imatge. L’etiqueta twitter:card sola és la que diu a X que renderitzi el disseny de imatge gran en lloc de miniatura petita.

Regles d’imatge (les mateixes que per a la imatge OG):

1200×630 (2:1) o més ample. Mínim 300×157, màxim 5 MB.
PNG o JPG. WEBP funciona a la majoria de plataformes, però el renderitzador d’X ha estat inconsistent: queda’t amb PNG/JPG.
Consulta la pàgina dedicada imatge Open Graph per a detalls de mida i generació dinàmica.

Astro / Next.js, genera des del frontmatter al costat d’OG:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress, Yoast SEO, Rank Math i SEOPress emeten etiquetes Twitter Card automàticament. A Yoast: SEO → Social → Twitter → “Afegir Twitter card meta data” → On.

Tipus de targeta a conèixer.

summary_large_image, el que vols el 95% del temps.
summary, miniatura petita + text. Útil per a entrades amb molt text on la imatge no és el centre.
player, reproductor d’àudio/vídeo embegut. Específic; requereix whitelist per part d’X.
app, per promocionar la instal·lació d’una app mòbil. Utilitza els camps d’ID d’App Store.

L’antic Card Validator es va deprecar el 2023. Per verificar, publica l’URL en un esborrany (no la publiquis) i X mostrarà la targeta renderitzada, o utilitza una eina de tercers com opengraph.xyz que renderitza previsualitzacions Twitter i OG.

Preguntes freqüents

Necessito tant Open Graph com Twitter Card?

X recorre a Open Graph si no hi ha etiquetes Twitter, així que només OG et dona una targeta, però només una petita. Per forçar el disseny d’imatge gran necessites com a mínim <meta name="twitter:card" content="summary_large_image">. La resta pot recórrer a OG.

La previsualització de la meva targeta està trencada, com la refresco?

X guarda les previsualitzacions escrapejades fins a 7 dies. La cau es buida quan canvies la URL canònica o quan l’entrada en cau caduca. Ja no hi ha una eina pública de “refresc”: la solució és afegir un paràmetre de cache-busting (?v=2) a l’URL una vegada, publicar l’URL trencada una vegada i després tornar a l’URL neta.

I què passa amb Mastodon, Bluesky i LinkedIn?

Tots utilitzen Open Graph, no Twitter Cards. Fes OG bé i renderitzaran correctament de manera automàtica. Consulta etiquetes Open Graph i imatge Open Graph.