# Estúdio de Pré-visualização SERP e Social Renderiza Google SERP (truncagem por pixel desktop/móvel), cards X e OpenGraph com diagnósticos de SEO pré-lançamento > Página canônica: https://elysiatools.com/pt/tools/serp-social-preview-studio - **Categoria:** Development - **Palavras-chave:** serp, seo, pré-visualização, cartões sociais, og, twitter ## Visão geral Insira os metadados da página e a ferramenta renderiza três alvos reais: 1. Cartão SERP do Google — truncagem de título no desktop (~600px) e móvel (~920px) calculada com larguras reais de pixel em Arial (string-pixel-width), não apenas contagem de caracteres. 2. Cartão X (Twitter) — layouts summary e summary_large_image. 3. Cartão OpenGraph — estilo LinkedIn/Facebook com a proporção recomendada de og:image 1.91:1. Também roda diagnósticos de SEO pré-lançamento: título curto/longo, truncagem por dispositivo, comprimento da descrição, caracteres não escapados, validade da URL canônica, underscore vs hífen, og:image HTTPS/válida, comprimento de og:description, og:site_name, twitter:card ausente — mais dicas quando o título sugere dados estruturados de FAQ / HowTo / Product. Como usar: - Preencha o que tiver; deixe o resto vazio para ver o que falta. - Escolha o dispositivo: desktop, móvel ou ambos. - Use a tabela de diagnósticos como checklist de lançamento. ## Entradas - **Título da página** (text): Best Running Shoes 2026 — Tested & Reviewed | RunLab - **Meta descrição** (textarea): We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026. - **URL canônica** (text): https://example.com/best-running-shoes-2026 - **URL da imagem OpenGraph** (text): https://example.com/og/running-shoes-1200x630.jpg - **Alt/Descrição da imagem OG** (textarea): Same as meta description, or a tailored social copy - **Nome do site** (text): RunLab - **Tipo de cartão Twitter** (select) - **Dispositivo de pré-visualização** (select) ## Quando usar - Antes de publicar um novo artigo ou página web para garantir que o título não seja cortado nos resultados de busca do Google. - Ao configurar tags OpenGraph e cartões do X (Twitter) para verificar se a imagem e a descrição social estão formatadas corretamente. - Durante auditorias de SEO para identificar problemas de metadados como URLs canônicas inválidas, descrições muito longas ou falta de tags essenciais. ## Como funciona - Insira o título da página, a meta descrição e a URL canônica nos campos correspondentes. - Adicione o link da imagem OpenGraph (og:image) e selecione o tipo de cartão do X (Twitter) desejado. - Visualize instantaneamente a renderização exata em dispositivos móveis e desktop, calculada com base na largura real em pixels (Arial). - Analise a tabela de diagnósticos de SEO para corrigir erros de truncagem, links não seguros (HTTP) ou tags ausentes antes do lançamento. ## Casos de uso - Otimização de títulos de posts de blog para evitar que informações importantes sejam cortadas na SERP do Google. - Validação de imagens de destaque (og:image) na proporção recomendada de 1.91:1 para compartilhamento no LinkedIn e Facebook. - Checklist rápido de SEO técnico para desenvolvedores e redatores antes de colocar uma nova landing page no ar. ## Perguntas frequentes ### Como a ferramenta calcula a truncagem do título no Google? A ferramenta calcula o limite usando a largura real em pixels das letras (fonte Arial) para desktop (~600px) e dispositivos móveis (~920px), e não apenas contando caracteres. ### O que é verificado nos diagnósticos de SEO pré-lançamento? São validados o comprimento do título e descrição, uso de HTTPS na imagem OpenGraph, validade da URL canônica, uso de hífens em vez de sublinhados e presença de tags sociais essenciais. ### Posso testar diferentes formatos de cartões do X (Twitter)? Sim, você pode alternar entre os formatos 'Cartão resumo' (summary) e 'Cartão com imagem grande' (summary_large_image). ### Por que a URL da imagem OpenGraph deve usar HTTPS? A maioria das redes sociais exige conexões seguras (HTTPS) para carregar e exibir corretamente as pré-visualizações de imagens nos feeds dos usuários. ### A ferramenta sugere oportunidades de dados estruturados? Sim, se o título sugerir conteúdos do tipo FAQ, HowTo ou Product, o diagnóstico exibirá dicas para implementar esses dados estruturados. ## Ferramentas relacionadas - [Tabela de Tamanhos de Imagem para Redes Sociais](https://elysiatools.com/pt/tools/social-media-image-size-cheatsheet): Referência 2026 de dimensões de imagem para Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest e WeChat, filtrável por plataforma. - [Renomear Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-rename): Renomear múltiplos arquivos de imagem usando padrões, substituição de texto, numeração e conversão de maiúsculas. Retorna arquivos renomeados como download ZIP. - [Núcleo de Convolução Personalizado](https://elysiatools.com/pt/tools/image-custom-kernel): Aplica núcleo de convolução personalizado definindo seus próprios valores de matriz para efeitos de imagem personalizados e processamento - [Efeito de Relevo de Imagem](https://elysiatools.com/pt/tools/image-emboss): Aplica efeitos de relevo profissionais com profundidade ajustável, ângulo e direção de iluminação para aparência de superfície 3D - [Extensor de Imagem com Fundo Desfocado](https://elysiatools.com/pt/tools/image-extend-blur-background): Estende a tela da imagem com fundo desfocado, perfeito para retratos, fotos de produtos e apresentações profissionais - [Extensor de Imagem com Gradiente](https://elysiatools.com/pt/tools/image-extend-gradient): Estende a tela da imagem com fundos gradientes para efeitos de design moderno e transições suaves - [Desfoque Gaussiano de Imagem](https://elysiatools.com/pt/tools/image-gaussian): Aplica desfoque gaussiano para suavização e redução de ruído com controle preciso - [Operador Laplaciano de Imagem](https://elysiatools.com/pt/tools/image-laplacian): Aplica operador Laplaciano para detecção de bordas, nitidez e melhoria de imagem com diferentes variantes de núcleo ## Exemplos - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato ## Conteúdo relacionado - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de limpeza, acabamento e preparo em lote de imagens](https://elysiatools.com/pt/hubs/image-utility): Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual. - [Ferramentas de metadados de imagem, EXIF e limpeza de privacidade](https://elysiatools.com/pt/hubs/image-metadata): Compare visualizadores de metadados, inspetores EXIF/IPTC/XMP, corretores de orientação, editores de metadados e limpeza de privacidade para fluxos de publicação de fotos. - [Ferramentas de Limpeza, Redimensionamento e Melhoria de Imagem](https://elysiatools.com/pt/hubs/image-cleanup-resize-and-detail-enhancement): Prepare imagens com correção de orientação, corte, redução de ruído, redimensionamento, nitidez e conversão em lote.