Open Graph Visualização

Uma ferramenta de Visualização Open Graph mostra como será um link compartilhado antes de publicá-lo Você insere seus campos og: title, og: description, og: image, og: url e Twitter Card - ou cola o bloco de meta tags que você já possui - e a ferramenta renderiza cartões sociais aproximados para Facebook, X/Twitter, LinkedIn, Slack e Discord lado a lado Em vez de empurrar uma página ao vivo, compartilhá-la e descobrir que o título é cortado ao meio ou que a imagem nunca carrega, você vê o problema enquanto ainda pode corrigi-lo.

O protocolo Open Graph é o vocabulário compartilhado que quase todas as plataformas usam para construir esses cartões Um raspador visita sua página, lê as meta tags og: no <head> e monta uma visualização a partir delas A captura é que cada plataforma renderiza essas mesmas tags de maneira diferente: X trunca descrições em cerca de 110 caracteres enquanto o Facebook mostra mais perto de 155, o LinkedIn esconde a descrição inteiramente em algumas superfícies e o Slack colapsa tudo em um anexo compacto Um campo que parece fino em um cartão pode ser mangled em outro, e é por isso que visualizar todos eles de uma vez é a única verificação confiável.

Aqui está uma visualização gráfica aberta com números reais Defina og: title para "Como cortamos nosso tempo de carregamento de página pela metade sem uma reescrita" (55 caracteres, uma passagem) e dê a ele uma descrição og: de 125 caracteres A validação passa o título e avisa sobre a descrição: fine for Facebook and LinkedIn, but X trunca exte about 110. the X large-image card corta o texto depois de "de 4,1 segundos...", enquanto o cartão do Facebook mostra toda a frase A visualização da imagem gráfica aberta carrega sua og: imagem em cada cartão, então um link quebrado mostra "Imagem falhou em carregar" antes que alguém a compartilhe.

Esta ferramenta é executada no lado do cliente e nunca busca ou raspa sua página Ele funciona a partir das tags que você dá a ele, seja digitado no formulário ou colado como HTML bruto e analisado localmente Isso significa que você pode validar metadados para páginas que estão por trás de um login, em um domínio de preparação, ou não implantado em tudo A única solicitação que ele faz para o seu servidor é carregar o URL og: imagem, para que seu navegador possa mostrar a imagem nos cartões.