O pior momento para descobrir uma visualização de link quebrado é após o tweet de lançamento Você passa uma semana em uma página, você escreve o anúncio, você clica em enviar - e o cartão que aparece é um retângulo cinza com um título truncado e sem imagem, porque og:image apontado para /images/og.png em vez de https://yoursite.com/images/og.png. A postagem já saiu. O cartão já está armazenado em cache. Você pode corrigi-lo e pedir a todos que compartilhem novamente.
um Gráfico aberto a visualização resolve que, movendo o cheque mais cedo Em vez de publicar e esperar, você olha para o que o cartão será enquanto as tags ainda são editáveis Essa é toda a premissa do Abrir visualização do gráfico Ferramenta: insira suas tags ou cole as que você já possui e veja os cartões aproximados do Facebook, X, LinkedIn, Slack e Discord renderizados lado a lado, com um veredicto de aprovação/aviso/reprovação em todos os campos.
A razão pela qual uma única prévia não é suficiente é que cada plataforma lê as mesmas tags e as torna diferentes. X trunca descrições em cerca de 110 caracteres; o Facebook mostra mais de 155. O LinkedIn frequentemente descarta a descrição inteiramente e mostra apenas a imagem, o título e o domínio. O Slack colapsa tudo em um acessório compacto com um trilho colorido. O Discord incorpora a descrição com destaque, mas diminui a imagem. Um título que se encaixa perfeitamente em um cartão do Facebook pode ser cortado no meio da palavra no X, e você nunca notará a menos que olhe para ambos.
eu construo Toolz.dev e envio páginas constantemente, e EU me cansei do loop publish-check-fix A ferramenta é executada inteiramente no navegador e não faz nenhuma chamada de rede - ela nunca busca sua URL - o que significa que ela também funciona para páginas que ainda não estão implantadas, ficam atrás de um login ou vivem em um domínio de preparação que os depuradores oficiais da plataforma não conseguem alcançar.
tl;dr: As tags do Graph Open controlam a aparência do link quando ele é compartilhado. Cada plataforma lê o mesmo
og:Marca, mas trunca e os expõe de forma diferente, então a visualização de uma plataforma não diz nada sobre as outras. o Abrir visualização do gráfico A ferramenta renderiza cinco cartas de plataforma de um conjunto de tags, valida cada campo em relação aos limites atuais da plataforma, analisa um bloco de tag existente, se você já tiver um, e entrega a você um pronto-aparecimento<meta>bloco - todo o lado do cliente, sem raspagem e sem upload.
Principais características
Cinco visualizações de plataforma de um conjunto de tags
A ferramenta renderiza cartões aproximados para o Facebook, X em ambos summary_large_image e summary estilos, LinkedIn, Slack e Discord Todos eles leem dos mesmos campos, então quando você apara um título você o assiste a atualizar em todos os lugares de uma só vez O ponto não é fidelidade perfeita em pixels - as plataformas redesenham seus cartões sem aviso prévio - mas fidelidade relativa: proporções corretas, pontos de truncamento corretos, ordenação correta dos campos, para que você possa ver qual plataforma é a que quebra.
Colar e analisar tags que você já possui
Se a página existir, você raramente deseja redigitar nove campos Cole o HTML bruto - um todo <head>, um dump de fonte de visualização ou um bloco solto de <meta> linhas - na caixa de análise e o analisador integrado puxa cada og: e twitter: Tag que ele reconhece e os carrega no formulário. O analisador é baseado em regex e não no DOM, que permite que o mesmo código seja executado em um navegador, no nó e na construção da área de trabalho sem alterações.
Validação por campo com limites reais
Cada campo recebe um status de passe, aviso ou reprovação. Um título com mais de 60 caracteres falha. Avisa uma descrição entre 110 e 155 caracteres, porque lê totalmente no Facebook e no LinkedIn, mas é cortada em X. Um parente og:image o caminho falha completamente - os raspadores não os resolvem. Um og:image servido sobre simples http Avisa, porque várias plataformas se recusam a renderizar imagens não HTTPS. um twitter:site O valor que não é uma alça válida falha. Os veredictos são específicos o suficiente para agir em vez de um genérico "parece bem".
Regras de imagem que você pode realmente seguir
Placas de imagem grande em todas as plataformas principais assumem uma imagem 1,91:1; 1200x630 pixels é o tamanho que satisfaz todos eles de uma só vez A ferramenta afirma que o alvo explicitamente, sinaliza os modos de falha que fazem as imagens desaparecerem silenciosamente e - porque um cartão com uma imagem quebrada é o único bug Open Graph mais comum - renderiza seu real og:image URL em cada visualização, voltando a um espaço reservado claro se a imagem não puder ser carregada.
Um bloco de metas pronto para cópia, escapou corretamente
A saída gerada é um bloco de tag completo, não um fragmento. inclui og:image:width e og:image:height, o que importa mais do que a maioria das pessoas imagina: sem eles, alguns raspadores renderizam uma carta somente de texto na primeira busca e só mostram a imagem depois de baixá-la e medi-la, o que pode acontecer várias horas depois. Os valores são escapados em HTML, portanto, um comercial ou uma aspas na sua descrição não conseguem sair do atributo e corromper sua marcação.
100% do lado do cliente, sem raspagem
A ferramenta nunca solicita seu URL. Isso é deliberado, e vale a pena entender por que: um navegador não pode buscar uma página arbitrária de terceiros por causa da política de mesma origem, e um buscador do lado do servidor significaria enviar seus URLs inéditos para outra pessoa' s logs. Trabalhar a partir das tags fornecidas contorna os dois problemas e desbloqueia o caso que os depuradores oficiais não podem servir - validando uma página que ainda não está ativa Veja Privacidade de dados em ferramentas online para um raciocínio mais amplo.
Como usar a ferramenta de visualização do Open Graph
Etapa 1: carregue suas tags
Você tem dois caminhos. Se você estiver escrevendo metadados do zero, preencha o formulário: og:title, og:description, og:image, og:url, og:site_name, então escolha um og:type e um twitter:card estilo e adicione seu twitter:site e twitter:creator alças.
Se a página já tiver tags, cole-as em vez disso Abra a página, visualize a fonte (não o inspetor do navegador - mais sobre essa distinção abaixo), copie o <head>, e solte-o na caixa de análise. Clique em Tags de análise e tudo o que foi reconhecido é carregado no formulário. O analisador também entende os aliases: og:image:secure_url e og:image:url Ambos alimentam o campo da imagem e twitter:title, twitter:description, e twitter:image são usados como reservas quando seus og: os equivalentes estão ausentes - o que reflete como as próprias plataformas resolvem as tags.
Etapa 2: leia o painel de validação
A lista de validação é ordenada da mesma forma que os campos são importantes. Corrigir as falhas primeiro: um ausente og:image, um caminho de imagem relativo, um título 20 caracteres acima do limite Então olhe para os avisos, que são principalmente sobre a lacuna entre plataformas - uma descrição que é boa para o Facebook, mas longa para X, uma falta og:site_name Isso significa que seu cartão mostra um nome de host, em vez de sua marca.
Os contadores na parte superior do painel fornecem uma leitura rápida. Zero falha e alguns avisos são um estado perfeitamente transpasso; os avisos são compensações, não bugs.
Passo 3: Compare os cartões
Este é o passo que as pessoas pulam, e é o que pega os problemas reais Digitalize todas as seis visualizações O título é cortado no cartão de resumo X? a descrição desaparece no LinkedIn (geralmente faz - isso é esperado)? a imagem parece certa em 1.91:1, ou seu logotipo é cortado porque você projetou um gráfico quadrado e o cartão o torna largo?
Apare e verifique novamente até que cada cartão leia de forma limpa. Uma disciplina útil: escreva para a restrição mais rígida. Se sua descrição for totalmente em 110 caracteres, ela será totalmente em todos os lugares. Se o seu título funcionar em 55, ele sobreviverá a todos os cartões e layouts móveis.
Etapa 4: copie o bloco de meta e envie-o
Copie o bloco gerado em sua página <head>. Em uma estrutura - Next.js, Nuxt, SvelteKit, Astro - você não colará cru <meta> Tags, mas o bloco ainda é sua fonte de verdade para exatamente quais campos são preenchidos na API de metadados da estrutura.
Em seguida, faça a etapa que todos esquecem: remova o URL no depurador de cada plataforma. Envio A correção não limpa o cartão armazenado em cache. o Gerador de meta tags é a ferramenta complementar aqui se você também precisa das tags de SEO padrão - título, descrição, canônicas, robôs - que vivem ao lado das tags sociais.
Como o protocolo Open Graph realmente funciona
O Open Graph começou no Facebook em 2010 como forma de transformar uma página da web em um nó em um gráfico social. A ambição se desvaneceu; o vocabulário da tag travado, e agora é o padrão de fato que o Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal e a maioria dos outros softwares de desfraldamento de links lêem.
O mecanismo é simples Quando um link é compartilhado, a plataforma envia um bot para o seu URL - facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. Esse bot solicita o HTML bruto, lê o <head>, extrai o og: e twitter: Meta tags e cria um cartão. É um único HTTP GET e uma análise. O bot não é um navegador: a maioria desses rastreadores não executa o JavaScript, que é a causa raiz de um gênero inteiro de bugs.
as próprias tags
Quatro tags são descritas conforme exigido pelo protocolo: og:title, og:type, og:image, e og:url. na prática og:description e og:site_name São igualmente portadores de carga, porque sem eles o cartão está nu ou volta para qualquer texto que o raspador possa encontrar na página. As tags usam o property atributo, não name- <meta property="og:title" content="..." />- o que deixa as pessoas excitadas porque as tags do Twitter fazem o oposto e usam name. A maioria dos analisadores é perdoado por isso, mas nem sempre os validadores próprios das plataformas são, portanto, vale a pena acertar.
OG: versus Twitter: Precedência
X lê as etiquetas do cartão do Twitter primeiro e volta para o Open Graph quando estão ausentes. Isso significa que uma página com apenas og:title, og:description, e og:image ainda produz uma placa X funcional - o recurso é projetado.
Então, o que realmente precisa de um twitter: marca? Três coisas. twitter:card Decide o layout e não há um equivalente de gráfico aberto: sem ele, X escolhe um estilo de cartão com base no que encontra, que não é uma decisão que você deseja delegar. twitter:site Atribui o cartão a uma conta de marca. twitter:creator Credita o autor. Todo o resto pode vir com segurança do Open Graph.
A regra prática: escreva tags completas de grafos abertos e adicione exatamente essas três twitter: tags. duplicado twitter:title e twitter:description é inofensivo, mas inútil, a menos que você realmente queira uma cópia diferente em X do que em qualquer outro lugar - o que ocasionalmente é uma escolha legítima, já que o truncamento mais apertado de X & #39; às vezes justifica uma descrição mais curta e mais contundente.
Dimensões da imagem, proporções e o problema de corte
A proporção de 1,91:1 é o número para internalizar. 1200x630 pixels atingem, é grande o suficiente para telas de retina e é o que o Facebook, LinkedIn e X renderizam sem distorção para cartões de imagem grande.
O modo de falha é sutil: as plataformas geralmente não rejeitam uma imagem off-ratio, elas a cortam. Carregue um gráfico quadrado de 1000 x 1000 e o Facebook o cortará centralmente para 1,91:1, o que corta cerca de um terço na parte superior e inferior. Se o texto do título estava centralizado na vertical, ele sobrevive; se você colocar um logotipo no topo, não. Mantenha conteúdo significativo dentro de uma área segura e longe das bordas, porque superfícies diferentes cortam em quantidades ligeiramente diferentes.
o x compacto summary cartão é a exceção Ele quer uma imagem quadrada, mínimo 144x144, e ele vai centro-corte um banner 1.91:1 em um quadrado - que geralmente destrói-lo Se você usar deliberadamente summary, forneça uma imagem quadrada; se você fornecer um banner, use summary_large_image.
Mantenha o tamanho do arquivo abaixo de cerca de 5 MB (Facebook' s teto documentado; outras plataformas são mais rigorosas na prática), servir como PNG, JPEG, ou WebP& sempre usar um URL absoluto de HTTPS. caminhos relativos e protocolo-relativo // Os URLs são as duas maneiras mais comuns de uma imagem não aparecer silenciosamente.
Por que os raspadores caches e como rebentar o cache
Cada plataforma armazena em cache o resultado de raspar sua página - normalmente por cerca de sete dias, às vezes mais Isso não é teimosia: um link popular pode ser compartilhado milhares de vezes por hora, e re-buscar sua página para cada compartilhamento seria um ataque de negação de serviço conduzido pela plataforma Então eles raspam uma vez e reutilizam.
A consequência é que consertar suas tags não conserta o cartão. A visualização antiga persiste para cada compartilhamento existente e para novos compartilhamentos até que o cache expire. Para forçar uma atualização:
- Facebook: O depurador de compartilhamento, usando o botão "Scrape Again". Isso também limpa o cache usado pelo Instagram e WhatsApp.
- LinkedIn: O inspetor de cargos. A entrada no URL aciona um novo arranhão.
- x: O validador de cartão foi preterido e o acesso é inconsistente. Na prática, postar o link é a única atualização confiável.
- folga: Unfurl caches expiram por conta própria; adicionar um parâmetro de consulta inofensivo produz um novo desdobramento imediatamente.
- discórdia: similar - uma string de consulta alterada é a solução prática.
Esse truque da cadeia de consulta é o hatch de escape universal: https://example.com/page?v=2 É, para um raspador, um URL diferente sem entrada em cache. Use-o para testes, não para o link canônico que você realmente publicou e mantenha og:url Apontando para o endereço canônico limpo para que as ações das variantes parametrizadas se consolidem corretamente. o Codificador/decodificador de URL É útil quando esses parâmetros se tornam complicados.
O que acontece quando as tags estão faltando
Os raspadores caem para trás e os reservas são piores do que você espera.
não og:title E eles usam o <title> tag - que geralmente é escrito para resultados de pesquisa e geralmente termina em um cachimbo e seu nome de marca, lendo desajeitadamente como um título de cartão Não og:description E eles usam a meta descrição, ou raspe o corpo do texto, que pode puxar um banner de biscoito ou uma etiqueta de navegação. não og:image E a maioria das plataformas mostra um cartão somente para texto, embora alguns procurem qualquer imagem na página e possam encontrar um logotipo, um avatar ou um pixel de rastreamento. não og:url E o endereço compartilhado é usado como está, portanto ?utm_source=twitter As variantes são tratadas como páginas distintas e seu fragmento de contagem de compartilhamentos.
Há mais uma classe de falha que vale a pena nomear, porque é invisível na depuração normal: Tags injetadas por JavaScript do lado do cliente. Se suas metatags são definidas por React após a hidratação, o inspetor do navegador as mostra perfeitamente e o raspador não vê nada, porque o raspador nunca executou seu JavaScript. Sempre verifique com a fonte de visualização ou curl, que mostram o HTML bruto que o servidor realmente retornou - não o DOM após o seu aplicativo ter inicializado O mesmo se aplica a páginas que retornam um 401, um redirecionamento de login ou um bot-blocking 403 para solicitações não autenticadas: o raspador obtém a página de erro, não o seu conteúdo.
Casos de uso comuns
Validação de pré-lançamento
O caso central. Antes de uma página ser lançada, cole as tags que você pretende enviar e confirme todas as renderizações de cartão. Essa é a única coisa que os depuradores oficiais da plataforma não podem fazer, porque eles devem buscar um URL ativo. Uma verificação de pré-lançamento custa trinta segundos e economiza o repartição do dia de lançamento.
Depurando um cartão quebrado
Um link está desfraldando errado e você precisa saber por quê. Cole as tags atuais da página, leia o painel de validação e a causa geralmente é imediata: um caminho de imagem relativo, um http imagem, uma descrição com o dobro do limite, uma falta twitter:card. Corrigir, remova o rascunho no depurador de plataforma, pronto.
Auditar metadados em escala
Trabalhando por meio de uma página do site, colando cada <head> E lendo o veredicto, o desvio que se acumula em qualquer projeto de múltiplos contribuidores: uma página tem tags do Twitter e outra não, uma descrição tem 300 caracteres, três páginas compartilham o mesmo genérico og:image. A ferramenta se torna uma verificação de consistência rápida em vez de uma suposição por página.
Projetando a imagem de compartilhamento
Quando você está escolhendo ou comissionando um og:image, a pré-visualização mostra o que a colheita realmente faz com uma carta ampla versus uma quadrada. Os designers entregam rotineiramente um belo gráfico quadrado que é abatido por uma colheita de 1,91:1; vendo que antes de ser enviado é mais barato do que vê-lo depois.
Escrevendo cópia para a restrição mais rígida
Como as visualizações mostram o truncamento do X ao lado do Facebook, elas transformam um limite de caracteres abstratos em algo visível. Escrever uma descrição que tenha uma leitura completa de 110 caracteres é uma disciplina que é muito mais fácil de segurar quando você pode ver as reticências aparecerem enquanto você digita. o gerador de slug Abrange o trabalho vizinho de produzir o URL limpo que og:url deve apontar para.
Trabalhando na preparação ou por trás de um login
Ferramentas internas, trabalho do cliente em NDA e páginas atrás de uma parede de autenticação são inalcançáveis por depuradores de plataforma. Como a ferramenta funciona a partir de tags e não de uma busca, ela as trata de forma idêntica a uma página pública.
Comparação da plataforma
A orientação mais conhecida atual As plataformas alteram esses números sem anúncio, e os pontos de truncamento são medidos em pixels em vez de caracteres - um título cheio de clipes de letras largas antes de um cheio de clipes estreitos Trate-os como alvos seguros, não especificações.
| plataforma | imagem recomendada | proporção | Título mostrado | Descrição mostrada | notas |
|---|---|---|---|---|---|
| 1200x630 | 1.91:1 | ~60 caracteres | ~155 caracteres | Mínimo de 200 x 200; imagens off-ratio de culturas centrais | |
| X / Twitter (grande) | 1200x628 | ~1,91:1 | ~60 caracteres | ~110 caracteres | requer twitter:card=summary_large_image |
| X / Twitter (Resumo) | 800x800 | 1:1 | ~ 50 caracteres | ~90 caracteres | Mínimo 144x144; imagem quadrada necessária |
| 1200x627 | ~1,91:1 | ~100 caracteres | Muitas vezes escondido | Descrição frequentemente retirada do cartão | |
| preguiçoso | 1200x630 | 1.91:1 | ~60 caracteres | ~140 caracteres | Anexo Compacto; o cache desfraldador expira sozinho |
| discórdia | 1200x630 | 1.91:1 | ~60 caracteres | ~160 caracteres | Renders Descrição com destaque, imagem menor |
A conclusão da tabela é o alvo do design: uma imagem de 1200x630, um título com ou menos de 55 a 60 caracteres e uma descrição que fica abaixo de 110 fornece uma carta que renderiza corretamente em todos os lugares sem ajustes por plataforma.
FAQ
Qual é o tamanho correto da imagem do grafo aberto?
Use 1200x630 pixels - uma proporção de 1,91:1. que satisfaz Facebook, LinkedIn, X, Slack e Discord simultaneamente para cartões de imagem grande, e é grande o suficiente para permanecer afiado em monitores de alta densidade Mantenha o arquivo sob cerca de 5 MB, sirva-o sobre HTTPS em um URL absoluto e mantenha o texto importante longe das bordas, uma vez que as superfícies são cortadas em quantidades ligeiramente diferentes Para um cartão de resumo X compacto, forneça uma imagem quadrada de pelo menos 144x144 em vez disso.
Por que minha visualização de link ainda mostra a imagem antiga depois de corrigir as tags?
Porque a plataforma armazenou em cache o resultado de seu raspar anterior, geralmente por cerca de uma semana Atualizando as tags não invalida esse cache Forçar uma nova busca através da plataforma' s depurador - o Facebook Sharing Debugger' s raspar novamente botão, ou o LinkedIn Post Inspector Para Slack e Discord, adicionando um parâmetro de consulta para o URL produz uma visualização não armazenada em cache imediatamente, que é a maneira mais rápida de verificar uma correção.
Preciso de OG: e Twitter: tags?
x volta ao Open Graph quando faltam os equivalentes do Twitter, então uma página com og: Tags produz um cartão X funcional. O que o Open Graph não pode expressar é o layout do cartão, então você ainda deve adicionar twitter:card Para escolher entre o banner grande e o resumo compacto, mais twitter:site e twitter:creator para atribuir o cartão. Essas três tags completas de grafos abertos completos são a combinação eficiente.
Quanto tempo deve ser og:title e og:description?
guardar og:title em ou menos de 60 caracteres. para og:description As plataformas divergem: X mostra cerca de 110 personagens, Facebook e LinkedIn mostram mais perto de 155 a 200. Escrever para o limite de x mais apertado significa que a descrição lê totalmente em todos os lugares. O texto além do limite não é perdido, apenas escondido atrás de uma reticência, então faça o carregamento no início das palavras que importam.
Por que minha visualização está em branco ou mostrando apenas o url?
As causas usuais, em ordem aproximada de frequência: og:image é um caminho relativo em vez de um url absoluto; a imagem é servida em liso http; as tags estão fora do <head>; As tags são injetadas pelo JavaScript do lado do cliente que o raspador nunca executa; ou a página retorna um status não 200 ou um redirecionamento de login para o bot. Verifique o HTML bruto com view-source ou curl em vez do inspetor do navegador - o inspetor mostra o DOM após a execução do JavaScript, o que não é o que o raspador vê.
Essa ferramenta busca minha url para ler as tags?
Não. Ele não faz nenhuma solicitação de rede. Funciona a partir das tags que você digita ou cola, e tudo é analisado e renderizado em seu navegador. Os navegadores não podem buscar páginas arbitrárias de terceiros por causa do CORS, e um buscador do lado do servidor significaria enviar seus URLs inéditos para outro lugar. A desvantagem é que você fornece as tags - e o benefício é que as páginas no localhost, na preparação ou atrás de um login funcionam exatamente como as públicas.
Posso visualizar uma página que ainda não foi publicada?
Sim, e é a principal razão para usar isso em vez de um depurador de plataforma Os depuradores oficiais devem buscar uma URL ao vivo, para que sejam inúteis antes da implantação Aqui você cola as tags que pretende enviar - do seu modelo, do seu objeto de metadados de estrutura ou de uma compilação local - e as visualizações são renderizadas imediatamente.
As tags de grafos abertos ajudam na minha classificação de pesquisa?
não diretamente. Eles são lidos por plataformas sociais e de bate-papo, não sendo usados como fator de classificação pelos mecanismos de pesquisa. O que eles influenciam é a taxa de cliques em cada compartilhamento de seu link, que gera tráfego e, indiretamente, os sinais que importam. Pense neles como uma otimização de conversão para links compartilhados e não como uma alavanca de SEO. Para as tags que afetam seu trecho de pesquisa, use o Gerador de meta tags.
