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

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 summarylargeimage.
  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.

Exemplos de resultados

1 Exemplos

Pré-visualizar uma página de review em SERP e cards sociais

Truncagem de título por pixel desktop/mobile, cards X e OpenGraph, diagnósticos.

SERP desktop/mobile + Twitter + OpenGraph previews with diagnostics.
Ver parâmetros de entrada
{ "title": "Best Running Shoes 2026 — Tested & Reviewed | RunLab", "description": "We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026.", "url": "https://runlab.example.com/best-running-shoes-2026", "ogImage": "https://runlab.example.com/og/shoes-1200x630.jpg", "ogDescription": "The 2026 running shoe guide, lab-tested for every type of runner.", "siteName": "RunLab", "twitterCard": "summary_large_image", "device": "both" }

Fatos principais

Categoria
Desenvolvimento e Web
Tipos de entrada
text, textarea, select
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Estúdio de Pré-visualização SERP e Social permite simular a aparência exata de suas páginas nos resultados de busca do Google e em redes sociais como X (Twitter), LinkedIn e Facebook. Com renderização baseada em largura de pixels real e diagnósticos automáticos de SEO, você pode otimizar títulos, descrições e tags OpenGraph antes de publicar seu conteúdo.

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.

Exemplos

1. Otimização de Página de Produto

Especialista em E-commerce
Contexto
Um especialista em e-commerce quer lançar uma página de produto para um novo tênis de corrida e precisa garantir que o título chame atenção no Google e que a imagem apareça perfeita no LinkedIn.
Problema
O título atual é muito longo e a imagem de compartilhamento social pode não carregar por falta de HTTPS.
Como usar
Insira o título do produto, a URL canônica com HTTPS e o link da imagem OpenGraph. Selecione a visualização para ambos os dispositivos.
Configuração de exemplo
{
  "title": "Tênis de Corrida SpeedRun 2026 — Conforto e Performance | RunLab",
  "description": "Compre o novo SpeedRun 2026. Testado por atletas para máxima durabilidade e amortecimento.",
  "url": "https://runlab.com.br/tenis-speedrun-2026",
  "ogImage": "https://runlab.com.br/images/speedrun-og.jpg",
  "twitterCard": "summary_large_image"
}
Resultado
A ferramenta mostra que o título cabe perfeitamente no limite de pixels do Google e gera a pré-visualização do card social com a imagem grande configurada.

2. Validação de Post de Blog com Diagnóstico

Redator de Conteúdo SEO
Contexto
Um redator preparou um guia completo sobre corrida de trilha, mas não sabe se a meta descrição está no tamanho ideal ou se o título vai truncar no celular.
Problema
Evitar truncagem de título no mobile e garantir que a meta descrição não ultrapasse os limites recomendados.
Como usar
Cole o título do post e a meta descrição nos campos indicados e verifique a seção de diagnósticos.
Configuração de exemplo
{
  "title": "Guia Definitivo de Corrida de Trilha 2026: Equipamentos e Dicas para Iniciantes",
  "description": "Descubra tudo o que você precisa para começar na corrida de trilha. Dicas de tênis, vestuário, hidratação e segurança para iniciantes.",
  "url": "https://runlab.com.br/guia-corrida-trilha-2026"
}
Resultado
O diagnóstico alerta que o título excede os 920px no mobile e sugere encurtá-lo, além de confirmar que a meta descrição está no tamanho ideal.

Testar com amostras

image
Amostras de Postagens em Redes Sociais
Amostras de texto de mídia social para testar extração de hashtags e menções
title token social
sample
Protocolo ActivityPub de Rede Social Descentralizada
Exemplos do protocolo ActivityPub para redes sociais federadas, compatibilidade com Mastodon e mídias sociais descentralizadas
title token social
sample
Exemplos de Tags de Imagem Docker
Coleção de referências de imagens Docker com vários registros, repositórios, tags e digest
matched family image
image
Exemplos de Códigos QR
Imagens de código QR de exemplo para testar ferramentas de leitura e geração de código QR
matched family image
image

Hubs relacionados

Ferramentas de conversao de formatos de imagem e exportacao animada
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
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
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.

FAQ

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.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/serp-social-preview-studio

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
title text Sim -
description textarea Não -
url text Sim -
ogImage text Não -
ogDescription textarea Não -
siteName text Não -
twitterCard select Não -
device select Não -

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-serp-social-preview-studio": {
      "name": "serp-social-preview-studio",
      "description": "Renderiza Google SERP (truncagem por pixel desktop/móvel), cards X e OpenGraph com diagnósticos de SEO pré-lançamento",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=serp-social-preview-studio",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]