gerador twitter card
Nesta ferramenta, twitter:title e twitter:description não têm campo próprio: o gerador sempre copia o og:title e a og:description resolvidos, sem opção de divergir. Só twitter:card, twitter:site, twitter:creator e twitter:image são campos independentes; o resto vem do bloco Open Graph que você já preencheu.
Diferente do og:image de 1200×630 (~1,91:1); a mesma imagem serve para os dois, com um corte pequeno nas laterais.
twitter:image copia a og:image resolvida quando o campo fica vazio; não é preciso subir a imagem de novo.
A tag sai como digitada mesmo com o aviso; o "@" não é adicionado automaticamente.
O <title> vive no <head> e define o texto da aba do navegador e o título do snippet de busca; é um sinal de página inteira. O <h1> é o cabeçalho visível dentro do conteúdo. Eles podem ter textos diferentes: o title costuma ser mais conciso e otimizado para a SERP, enquanto o h1 fala diretamente com quem já está na página. Não confunda os dois nem repita exatamente o mesmo texto sem necessidade.
Não. Esta ferramenta não expõe campo próprio para twitter:title nem twitter:description: os dois sempre copiam o og:title e a og:description já resolvidos. É uma escolha de design que evita o card do X e o cartão do WhatsApp/LinkedIn saírem com textos divergentes por esquecimento.
Porque os dois formatos pedem proporções diferentes: summary usa uma miniatura pequena e quase quadrada, enquanto summary_large_image quer uma imagem larga na proporção 2:1, com no mínimo 300×157 pixels. Uma imagem preparada para og:image (1200×630, ~1,91:1) serve bem para os dois, com um recorte pequeno nas bordas.
Não. É um aviso informativo, não um erro bloqueante: o gerador continua montando twitter:site ou twitter:creator exatamente com o valor digitado, com ou sem "@" na frente. O aviso só existe para chamar atenção, a correção do texto fica por sua conta.
<title>Guia completo de SSR no Next.js</title> <meta name="description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <link rel="canonical" href="https://exemplo.com.br/blog/ssr-next-js" /> <meta name="robots" content="index, follow" /> <meta property="og:title" content="Guia completo de SSR no Next.js" /> <meta property="og:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://exemplo.com.br/blog/ssr-next-js" /> <meta property="og:image" content="https://exemplo.com.br/og/ssr-next-js.png" /> <meta property="og:image:alt" content="Diagrama de renderização no servidor com Next.js" /> <meta property="og:site_name" content="Exemplo" /> <meta property="og:locale" content="pt_BR" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@exemplo" /> <meta name="twitter:creator" content="@exemplo" /> <meta name="twitter:title" content="Guia completo de SSR no Next.js" /> <meta name="twitter:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <meta name="twitter:image" content="https://exemplo.com.br/og/ssr-next-js.png" />
Tudo roda no navegador. Nada do que você digita é enviado a servidores, salvo em logs ou usado em analytics.