La resposta curta: per consultar Open Graph en línia, enganxeu l'adreça de la pàgina al depurador gratuït PromoPilot d'Open Graph. Llegirà totes les etiquetes og:* i Twitter Card, comprovarà la presència i la mida de la imatge, avaluarà la integritat del marcatge i mostrarà previsualitzacions d'enllaços per a Facebook, X (Twitter) i LinkedIn, a més de recomanacions sobre què afegir. No cal registrar-se. A continuació trobareu les etiquetes necessàries, la mida og:image necessària i com actualitzar una previsualització "encallada".
Porto 12 anys fent llocs web i sento més sovint la pregunta "Per què Telegram no té una imatge?" dels clients que preguntes sobre classificacions. Normalment és una feina de cinc minuts, si saps on buscar.
Què comprova l'Open Graph Debugger?
Quan inseriu un enllaç en una publicació o missatge, la plataforma va a la pàgina i busca etiquetes d'Open Graph. Si en troba una, treu una targeta. Si no, agafa el que troba o mostra una URL simple. L'eina només comprova el que llegiran les xarxes socials.
| Què comprova? | Què està mirant? | Per què les empreses necessiten això? |
|---|---|---|
| Totes les etiquetes og:* | og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale | A partir d'aquestes, els llocs web recopilen el títol, la descripció i la imatge de la targeta. |
| Targeta de Twitter | twitter:targeta, twitter:títol, twitter:descripció, twitter:imatge | X (Twitter) llegeix les seves etiquetes i, si no hi són, les llegeix parcialment. |
| Imatge original | Hi ha alguna imatge i quina mida té? | La imatge petita converteix la targeta en una icona diminuta al lateral |
| Avaluació de la integritat | Quantes etiquetes recomanades s'han omplert? | Referència ràpida: està tot al seu lloc? |
| Previsualitzacions de la xarxa | targetes per Facebook, X i LinkedIn | Podeu veure com quedarà la publicació abans de la publicació. |
| Recomanacions | Què hauria d'afegir o corregir? | Una llista de tasques ja feta per a un desenvolupador o per a tu |
Com puc consultar les pàgines d'Open Graph en línia?
- Obreix el depurador de gràfics.
- Introduïu l'URL de la pàgina que voleu compartir: un article, un producte o una pàgina de destinació publicitària. Feu clic a "Comprova".
- Revisa la llista d'etiquetes: quines estan definides, quines estan buides i si hi ha una adreça externa o de prova a og:url.
- Reviseu la vista prèvia de cada xarxa: si el títol està tallat, si la imatge és visible i si hi ha text important a les vores.
- Si us plau, afegiu les etiquetes que falten tal com es recomana i torneu a comprovar la pàgina.
Pàgina d'eines: camp d'adreça, botó "Comprovar", llista de comprovacions i preguntes freqüents.
L'eina és lleugera: un límit diari és suficient perquè un visitant pugui consultar totes les plantilles del lloc: la pàgina d'inici, la categoria, el producte i l'article. Després del registre gratuït, el límit es triplica.
Quins són els errors més comuns a Open Graph?
Això és el que trobo a gairebé tots els altres llocs web i en quin ordre ho he de solucionar.
- No hi ha cap og:image o s'especifica com una URL relativa. Les xarxes socials no entendran
content="/img/cover.jpg": cal l'URL completa que comenci perhttps://. Sense una imatge, l'abast de la publicació disminueix significativament. - La imatge és massa petita. El logotip de 200x200 converteix la targeta en un petit quadrat al lateral. Cal una imatge de 1200x630.
- Una imatge og: per a tot el lloc web. Tots els articles i tots els productes a les xarxes socials han de tenir el mateix aspecte, amb el logotip. Per al bloc i el catàleg, la imatge s'ha de prendre de la foto principal de la pàgina.
- og:url porta a una altra adreça: la pàgina d'inici, un domini de prova o la versió
http://. La plataforma pot consolidar tots els enllaços en una sola pàgina. - No hi ha cap twitter:card. Sense ella, X sovint mostra una targeta petita. Per a una imatge més gran, necessiteu
summary_large_image. - og:title duplica el títol amb "buy" i la marca. En un feed de xarxes socials, això sembla un anunci; un titular animat, com el d'una publicació, és millor.
El conjunt mínim correcte té aquest aspecte:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">Com preparar una imatge per a og:image?
La imatge és la part més visible de la targeta, i és on la gent sovint escatima. Aquí teniu algunes regles que segueixo:
- La mida és de 1200 × 630 i l'orientació és horitzontal. La xarxa social retallarà la part superior i inferior d'una foto quadrada del producte, cosa que pot fer que al producte li falti el cap o la sola.
- L'important és al centre. Les diferents plataformes retallen les vores de manera diferent, i al feed mòbil, la targeta és encara més petita. Mantingueu el text gran i allunyat de les vores.
- Text mínim. El títol ja és a sota de la imatge; n'hi ha prou amb 3-6 paraules o cap subtítol a la imatge.
- Fitxer lleuger. Un JPG o PNG de mida raonable es carregarà ràpidament i la plataforma no expirarà.
- Una imatge dedicada per a cada pàgina clau. Per a articles i productes, és convenient crear-ne una automàticament: una portada d'article o la foto principal del producte.
Una bona prova és obrir la vista prèvia al depurador del telèfon. Si l'enllaç no és clar sense ampliar la imatge, cal tornar-la a treballar.
Com puc actualitzar una vista prèvia antiga després d'una correcció?
Un escenari comú: heu corregit les etiquetes, però la xarxa social mostra tossudament la imatge antiga. El motiu és la memòria cau: la plataforma ha recordat la vista prèvia de la primera compartició. A Facebook tornar a recopilar les dades al Sharing Debugger ajuda, a LinkedIn, amb Post Inspector, i a Telegram, amb el bot @WebpageBot, al qual envieu l'enllaç. Si tot falla, afegiu un paràmetre inofensiu a l'adreça, com ara ?v=2: per a la plataforma, aquest és un enllaç nou.
Comparació: Depurador de gràfics oberts i alternatives
| Eina | Què és gratuït? | Restriccions | Per a qui és adequat? |
|---|---|---|---|
| PromoPilot - Depurador de gràfics oberts | Totes les etiquetes og i Twitter, og:mida de la imatge, previsualitzacions per a Facebook, X i LinkedIn, recomanacions | No esborra la memòria cau de les xarxes socials | Revisa la teva pàgina immediatament abans de publicar-la a qualsevol xarxa social |
| Depurador de compartició (Meta) | Vista prèvia Facebook i recopilació de dades | Només Facebook, cal iniciar sessió al compte | Restableix la vista prèvia antiga a Facebook |
| Inspector de publicacions de LinkedIn | Vista prèvia i actualització de la memòria cau de LinkedIn | Només a LinkedIn, cal iniciar sessió | Per a aquells que es promocionen a LinkedIn |
| @WebpageBot a Telegram | Actualització de la vista prèvia d'enllaços a Telegram | Només Telegram, no analitza les etiquetes | Per a propietaris de canals Telegram |
Conclusió: calen depuradors oficials de plataformes per esborrar la memòria cau, però cada plataforma només mostra la seva pròpia xarxa. Per veure totes les previsualitzacions i una llista de les etiquetes que falten de cop, un depurador universal és més convenient.
Per cert, PromoPilot té 87 eines de SEO gratuïtes. Si encara no heu escrit etiquetes, tenim un article de la nostra sèrie sobre un generador de metaetiquetes que crearà un bloc Open Graph amb una vista prèvia.
En què es diferencia l'Open Graph Debugger de l'anàlisi de metaetiquetes?
L'anàlisi de metaetiquetes examina una pàgina a través dels ulls d'un motor de cerca: el títol, la descripció, la canonica, l'hreflang i l'Open Graph són només un grup. El depurador se centra en les xarxes socials: crea targetes per a diferents plataformes, comprova la mida de la imatge i fa recomanacions basades específicament en les previsualitzacions. Si els enllaços al vostre lloc es comparteixen activament a les xarxes socials i les aplicacions de missatgeria, el depurador és més útil.
Totes dues tenen una limitació: llegeixen l'HTML que retorna el servidor. Si un script del navegador insereix etiquetes, moltes xarxes socials no les veuran; això s'ha de solucionar des del lloc web. Un altre detall: el depurador comprova les etiquetes, però no la manera com es comparteix. Si la pàgina està protegida amb contrasenya, geobloquejada o protegida contra robots, és possible que la xarxa social no hi pugui accedir encara que totes les etiquetes siguin presents.
Quan no n'hi ha prou amb una eina gratuïta?
Un depurador mostrarà que la pàgina no té og:image. Però si hi ha milers de pàgines, no és possible inserir imatges manualment. Es necessita un especialista quan:
- cada producte o article hauria de tenir la seva pròpia imatge de previsualització, recollida automàticament;
- el lloc retorna etiquetes mitjançant un script i les xarxes socials no les veuen;
- Llança anuncis i enviaments de correu on cada vista prèvia afecta el cost per clic;
- Necessitem una combinació de "lloc web + canal Telegram + publicació automàtica" amb les targetes adequades.
Què puc fer pel vostre lloc web?
Sóc en Valeriy Danyuk, desenvolupador i especialista en SEO amb 12 anys d'experiència i més de 200 clients. Una vista prèvia d'enllaços bonica és gratuïta i la personalitzo per a cada projecte.
SEO i promoció
- Auditoria SEO de llocs web clau en mà: reviso totes les etiquetes de la plantilla, configuro les imatges de previsualització automàtiques i corregeixo el codi.
Llocs web i botigues en línia
- Transferint la teva botiga d' Instagram al teu lloc web: productes amb previsualitzacions adequades per compartir-les fàcilment.
- Una pàgina de destinació per a un producte nou creat en una nit: un cas pràctic de NordHarvest amb una targeta ja feta per a les xarxes socials.
- Un lloc web de clínica de cirurgia plàstica amb IA i aplicacions via Telegram.
- Lloc web a 1001site: les previsualitzacions per a les xarxes socials i la publicació automàtica a Telegram es configuren automàticament.
Bots i automatització
- Bot Telegram amb IA per a una botiga de salses en línia.
- QuestFlow és un creador SaaS Telegram amb IA.
- Agents de comerç electrònic en lloc de chatbots.
Envia'm un enllaç que es vegi malament en un missatger de Telegram i et diré quina etiqueta falta.
Resultat
- Un verificador Open Graph en línia mostra com es veu un enllaç a Facebook, X i LinkedIn, i quines etiquetes hi falten.
- El mínim requerit és og:title, og:type, og:image (1200×630, adreça completa) i og:url, més twitter:card.
- Després de solucionar-ho, restableix la memòria cau dels llocs: Sharing Debugger, Post Inspector, @WebpageBot.
- Per al catàleg i el bloc, les imatges de previsualització s'haurien de recopilar automàticament, com a 1001site.
Revisa la pàgina que estàs a punt de compartir amb el depurador gratuït Open Graph abans que els teus seguidors vegin la publicació.
Fonts
- Pàgina de l'eina Open Graph Debugger de PromoPilot: llista de comprovacions i preguntes freqüents.
- Protocol de grafs oberts (ogp.me): propietats obligatòries i opcionals.
- El Sharing Debugger de Meta i el LinkedIn Post Inspector són les eines oficials de les plataformes.
