Generador de Etiquetas Open Graph Online

Sobre esta herramienta

Las etiquetas Open Graph son un pequeño bloque de etiquetas `` adicionales en el `` de una página que le indican a Facebook, LinkedIn, Discord, Slack y la mayoría de las demás plataformas cómo renderizar la vista previa del enlace cuando alguien comparte la URL — qué título, descripción e imagen mostrar en lugar de un enlace desnudo. Sin ellas, la mayoría de las plataformas terminan adivinando a partir del `` propio de la página y su primera imagen, lo que a menudo se ve incorrecto o incompleto.</p><p data-astro-cid-zpu62n3h>Este generador crea por ti las etiquetas `og:title`, `og:description`, `og:url`, `og:image`, `og:type` y opcionalmente `og:site_name`, con una vista previa en vivo que aproxima cómo suele renderizarse la tarjeta. Dado que los detalles de renderizado (recorte de imagen, límites de caracteres, comportamiento de caché) varían ligeramente entre plataformas, sigue siendo válido probar el resultado final con el depurador o herramienta de vista previa propia de la plataforma objetivo antes de publicar ampliamente — todo aquí se ejecuta localmente en tu navegador, no se sube nada.</p> <h2>Preguntas frecuentes</h2> <div class="faq-item"> <h3>¿Qué tamaño de imagen debo usar para og:image?</h3> <p>1200×630px es el tamaño ampliamente recomendado; se muestra bien como tarjeta grande en Facebook, LinkedIn y la mayoría de superficies de vista previa de enlaces sin recortes incómodos.</p> </div><div class="faq-item"> <h3>¿Por qué mi título/descripción muestra una advertencia?</h3> <p>La herramienta marca títulos de más de 60 caracteres o descripciones de más de 200 caracteres, ya que la mayoría de las plataformas truncan el texto más largo en la tarjeta de vista previa. Es una sugerencia no bloqueante, no un error.</p> </div> </article> <nav class="related" aria-label="Herramientas relacionadas"> <h2>Herramientas relacionadas</h2> <div class="tool-grid"> <a class="tool-card" href="/es/css-gradient-generator/"> <span class="icon">▧</span> <h3>Generador de degradados CSS</h3> <p>Diseña degradados lineales, radiales y cónicos y copia el CSS.</p> </a><a class="tool-card" href="/es/box-shadow-generator/"> <span class="icon">❏</span> <h3>Generador de box-shadow</h3> <p>Crea sombras CSS en capas con vista previa en vivo.</p> </a><a class="tool-card" href="/es/border-radius-generator/"> <span class="icon">⌒</span> <h3>Generador de border-radius</h3> <p>Crea esquinas redondeadas y formas orgánicas, luego copia el CSS.</p> </a><a class="tool-card" href="/es/flexbox-generator/"> <span class="icon">⧉</span> <h3>Generador de Flexbox</h3> <p>Juega con las propiedades flex y copia el CSS del layout.</p> </a><a class="tool-card" href="/es/css-variables-generator/"> <span class="icon">🎨</span> <h3>Generador de variables CSS</h3> <p>Genera un bloque de propiedades personalizadas :root a partir de pares nombre/valor.</p> </a><a class="tool-card" href="/es/svg-blob-generator/"> <span class="icon">🫧</span> <h3>Generador de blobs SVG</h3> <p>Genera formas orgánicas y aleatorias de blob como rutas SVG reutilizables.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"¿Qué tamaño de imagen debo usar para og:image?","acceptedAnswer":{"@type":"Answer","text":"1200×630px es el tamaño ampliamente recomendado; se muestra bien como tarjeta grande en Facebook, LinkedIn y la mayoría de superficies de vista previa de enlaces sin recortes incómodos."}},{"@type":"Question","name":"¿Por qué mi título/descripción muestra una advertencia?","acceptedAnswer":{"@type":"Answer","text":"La herramienta marca títulos de más de 60 caracteres o descripciones de más de 200 caracteres, ya que la mayoría de las plataformas truncan el texto más largo en la tarjeta de vista previa. Es una sugerencia no bloqueante, no un error."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Todo funciona del lado del cliente. Tus datos nunca se suben.</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>

Generador de etiquetas Open Graph 🔒 Funciona localmente en tu navegador — no se sube nada.

Vista previa del enlace

Meta tags generados

Sobre esta herramienta