gerador open graph
Este gerador monta 8 propriedades Open Graph a partir de 6 campos: título, descrição, tipo, URL, imagem e nome do site. O resto, og:image:alt e og:locale, se preenche sozinho a partir de outros dados que você já digitou, sem campo próprio para repetir.
og:title copiou o title da página porque o campo próprio do Open Graph ficou vazio; nenhum dos dois precisou ser digitado duas vezes.
O gerador troca o hífen por sublinhado sozinho; não existe campo separado para preencher isso.
A tag ainda sai no HTML gerado; o aviso existe porque vários scrapers de rede ignoram imagem insegura na prévia.
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, a menos que queira um texto diferente no cartão social. Se você deixar os campos og:title e og:description em branco, o gerador herda automaticamente o title e a description da página; só use campos próprios quando o texto do cartão precisa divergir do texto de busca.
Na maioria das plataformas, pouco ou nada no layout do cartão em si: og:type é sobretudo uma categorização interna que a rede pode usar para decidir como indexar ou agrupar o link, não um campo que redesenha a prévia. O efeito visual, quando existe, é secundário ao de og:image, og:title e og:description.
Porque os avisos deste gerador são consultivos, não bloqueadores: ele nunca recusa gerar uma tag por causa de um risco, só sinaliza o risco para você decidir. A og:image insegura entra no HTML exatamente como digitada; trocar para https fica a seu critério, não é uma correção automática.
<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.