Gerador de Tags Open Graph Online

Sobre esta ferramenta

As tags Open Graph são um pequeno bloco de tags `` extras no `` de uma página que dizem ao Facebook, LinkedIn, Discord, Slack e à maioria das outras plataformas como renderizar a pré-visualização do link quando alguém compartilha a URL — qual título, descrição e imagem mostrar em vez de um link nu. Sem elas, a maioria das plataformas acaba adivinhando a partir do próprio `` da página e da primeira imagem, o que muitas vezes parece errado ou incompleto.</p><p data-astro-cid-zpu62n3h>Este gerador cria para você as tags `og:title`, `og:description`, `og:url`, `og:image`, `og:type` e, opcionalmente, `og:site_name`, com uma pré-visualização ao vivo que aproxima como o cartão costuma ser renderizado. Como os detalhes de renderização (corte de imagem, limites de caracteres, comportamento de cache) variam ligeiramente entre plataformas, ainda vale a pena testar o resultado final com o depurador ou ferramenta de pré-visualização da própria plataforma-alvo antes de publicar amplamente — tudo aqui roda localmente no seu navegador, nada é enviado.</p> <h2>Perguntas frequentes</h2> <div class="faq-item"> <h3>Qual tamanho de imagem devo usar para og:image?</h3> <p>1200×630px é o tamanho amplamente recomendado — ele exibe bem como um cartão grande no Facebook, LinkedIn e na maioria das superfícies de pré-visualização de links sem cortes estranhos.</p> </div><div class="faq-item"> <h3>Por que meu título/descrição está mostrando um aviso?</h3> <p>A ferramenta sinaliza títulos com mais de 60 caracteres ou descrições com mais de 200 caracteres, pois a maioria das plataformas trunca textos mais longos no cartão de pré-visualização. É uma sugestão não bloqueante, não um erro.</p> </div> </article> <nav class="related" aria-label="Ferramentas relacionadas"> <h2>Ferramentas relacionadas</h2> <div class="tool-grid"> <a class="tool-card" href="/pt/css-gradient-generator/"> <span class="icon">▧</span> <h3>Gerador de gradiente CSS</h3> <p>Crie gradientes lineares, radiais e cônicos e copie o CSS.</p> </a><a class="tool-card" href="/pt/box-shadow-generator/"> <span class="icon">❏</span> <h3>Gerador de box-shadow</h3> <p>Crie sombras CSS em camadas com prévia ao vivo.</p> </a><a class="tool-card" href="/pt/border-radius-generator/"> <span class="icon">⌒</span> <h3>Gerador de border-radius</h3> <p>Crie cantos arredondados e formas orgânicas, depois copie o CSS.</p> </a><a class="tool-card" href="/pt/flexbox-generator/"> <span class="icon">⧉</span> <h3>Gerador de Flexbox</h3> <p>Experimente as propriedades flex e copie o CSS do layout.</p> </a><a class="tool-card" href="/pt/css-variables-generator/"> <span class="icon">🎨</span> <h3>Gerador de variáveis CSS</h3> <p>Crie um bloco de propriedades personalizadas :root a partir de pares nome/valor.</p> </a><a class="tool-card" href="/pt/svg-blob-generator/"> <span class="icon">🫧</span> <h3>Gerador de blob SVG</h3> <p>Gere formas orgânicas e aleatórias de blob como caminhos SVG reutilizáveis.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Qual tamanho de imagem devo usar para og:image?","acceptedAnswer":{"@type":"Answer","text":"1200×630px é o tamanho amplamente recomendado — ele exibe bem como um cartão grande no Facebook, LinkedIn e na maioria das superfícies de pré-visualização de links sem cortes estranhos."}},{"@type":"Question","name":"Por que meu título/descrição está mostrando um aviso?","acceptedAnswer":{"@type":"Answer","text":"A ferramenta sinaliza títulos com mais de 60 caracteres ou descrições com mais de 200 caracteres, pois a maioria das plataformas trunca textos mais longos no cartão de pré-visualização. É uma sugestão não bloqueante, não um erro."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Tudo roda no cliente. Seus dados nunca são enviados.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>

Gerador de tags Open Graph 🔒 Roda localmente no seu navegador — nada é enviado.

Pré-visualização do link

Meta tags geradas

Sobre esta ferramenta