open graph generator
This tool assembles 8 Open Graph properties from 6 fields: title, description, type, URL, image and site name. The rest, og:image:alt and og:locale, fills in on its own from other data you already typed, with no separate field to repeat it.
og:title copied the page's title because the Open Graph field was left empty; neither one needed to be typed twice.
The generator swaps the hyphen for an underscore on its own; there is no separate field to fill in for this.
The tag still ships in the generated HTML; the warning exists because several network scrapers ignore an insecure image in the preview.
The <title> lives in the <head> and sets the browser tab text and the search snippet title; it is a whole-page signal. The <h1> is the visible heading inside the content. They can have different text: the title is usually more concise and tuned for the SERP, while the h1 speaks directly to someone already on the page. Do not conflate them or repeat the exact same text without reason.
No, unless you want different text on the social card. If you leave the og:title and og:description fields blank, the generator automatically inherits the page's title and description; only use dedicated fields when the card's text needs to diverge from the search text.
On most platforms, little to nothing in the card layout itself: og:type is mostly an internal categorization the network may use to decide how to index or group the link, not a field that redraws the preview. The visual effect, when there is one, is secondary to og:image, og:title and og:description.
Because this generator's warnings are advisory, not blocking: it never refuses to build a tag over a risk, it only flags the risk for you to decide. The insecure og:image goes into the HTML exactly as typed; switching to https is your call, not an automatic fix.
<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" />
Everything runs in the browser. Nothing you type is sent to any server, stored in logs or used in analytics.