Español
Crea etiquetas Open Graph y Twitter Card con una vista previa social en vivo.
Última actualización
Recomendado 1200×630, menos de 8 MB, URL absoluta (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<title>Learn to code by doing — Coddy</title> <meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <link rel="canonical" href="https://coddy.tech" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Learn to code by doing — Coddy" /> <meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://coddy.tech" /> <meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta property="og:image:alt" content="Coddy — Learn to code by doing" /> <meta property="og:site_name" content="Coddy" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Learn to code by doing — Coddy" /> <meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta name="twitter:image:alt" content="Coddy — Learn to code by doing" /> <meta name="twitter:site" content="@coddy_tech" />
Cuando compartes un enlace en cualquier app moderna —una publicación, un DM, un canal de Slack— la plataforma hace fetch a la URL y extrae un pequeño bloque de metadatos para renderizar una *tarjeta de compartido*: el título, una descripción, una imagen y el nombre del sitio. Esos metadatos no salen de la página visible; vienen de un conjunto específico de etiquetas <meta> en el <head>. El protocolo Open Graph, inventado originalmente por Facebook en 2010, define la mayoría de ellas. X (antes Twitter) añade algunos extras con prefijos twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp y Pinterest leen las mismas etiquetas con pequeñas variaciones.
Dejar estas etiquetas bien es un trabajo de una sola vez por página, pero tiene un impacto desmesurado. Una página sin imagen de Open Graph se ve rota al compartirla. Un título demasiado largo se corta a mitad de palabra. Una relación de aspecto incorrecta en og:image la dejan con bandas negras en todas las plataformas. Esta herramienta te permite ajustar esos valores con previsualizaciones en vivo, para que veas los problemas de truncado y recorte *antes* de publicar la página.
Todo se ejecuta localmente. El estado del formulario, las previsualizaciones y el HTML generado nunca salen de tu navegador — pega URLs prelanzamiento y copys sin publicar sin miedo a filtraciones.
property (<meta property="og:title">), mientras que las etiquetas estándar de SEO y Twitter Card usan name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) y Twitter (twitter:title, twitter:description).og:image debería ser de 1200×630, servirse sobre HTTPS y tener una URL absoluta — las rutas relativas fallan cuando otros servidores hacen fetch de la página.Apunta a 50-60 caracteres. Facebook trunca alrededor de los ~95 caracteres y X en ~70. Pon delante el valor, no la marca — "Cómo desplegar con Cloudflare Workers" gana a "Blog Coddy · Guía de despliegue".
Apunta a 120-155 caracteres. La mayoría de plataformas truncan en torno a 200. Usa frases completas — la descripción aparece debajo del título en cada tarjeta, y los fragmentos cortados quedan inacabados.
Usa la URL absoluta https:// de la propia página, no un enlace de tracking ni una redirección. Los crawlers de Open Graph siguen og:url al deduplicar compartidos — una URL canónica mantiene consistentes los contadores y previsualizaciones.
1200×630 es el tamaño ideal para tarjetas summary_large_image en X y tarjetas estándar en Facebook y LinkedIn. PNG o JPEG, por debajo de ~5 MB. Usa siempre una URL absoluta — las rutas relativas fallan porque el crawler social pega a la URL desde su propio servidor.
Pega el bloque del panel **Etiquetas <head> generadas** en el <head> de tu página. Tras desplegar, valida con el debugger de cada plataforma (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) y fuerza un re-crawl si cambias la imagen más adelante.
Las etiquetas de abajo cubren todo lo que las plataformas sociales leen hoy. Las marcadas con property= pertenecen al protocolo Open Graph; las marcadas con name= son las variantes estándar de SEO / Twitter Card. Especificaciones de referencia: Open Graph, X Cards.
| Etiqueta | Usada por | Recomendado | Notas |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 caracteres | Si no está, recurre al <title> — defínela igualmente. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 caracteres | Si no está, recurre a meta description. |
og:image | Todas las plataformas | 1200×630, < 5 MB, HTTPS, URL absoluta | Debe ser una URL absoluta — las rutas relativas fallan. |
og:image:alt | Accesibilidad | Describe la imagen | Lo usan los lectores de pantalla y algunas plataformas. |
og:url | FB, LinkedIn | URL canónica https:// | Se usa para deduplicar compartidos entre variantes con query string. |
og:type | FB, LinkedIn | website o article | article desbloquea article:published_time, article:author. |
og:site_name | FB, Discord | Nombre de la marca | Se muestra como la pequeña atribución encima/debajo de la tarjeta. |
twitter:card | X | summary_large_image | summary para una miniatura cuadrada pequeña, summary_large_image para el layout en banner. |
twitter:title | X | Igual que og:title | X recurre a og:title si no está — define ambos por seguridad. |
twitter:description | X | Igual que og:description | Recurre a og:description si no está. |
twitter:image | X | Igual que og:image | Recurre a og:image si no está. |
twitter:site | X | @tumarca | El handle de X del medio — alimenta algunas analíticas. |
Pon **og:type** a article, añade **Autor** y **Fecha de publicación** en la sección específica de artículo, y usa una imagen de portada de 1200×630. Las previsualizaciones se actualizan para mostrar cómo se ve la tarjeta en cada plataforma.
og:type=article desbloquea las etiquetas específicas de artículo (article:published_time, article:author) que algunas plataformas (Discord, LinkedIn) usan para mostrar la atribución. Twitter las ignora pero no se queja.
Deja **og:type** como website. Usa el nombre del producto como título, una propuesta de valor de una frase como descripción y un hero o recorte de captura como imagen.
Las landing pages no necesitan metadatos de artículo. El elemento más clicado de una tarjeta de landing page compartida suele ser la imagen, así que invierte en un visual limpio de 1200×630.
Título: "Concepto — Sección · Docs". Descripción: una frase explicando el concepto. Imagen: una portada genérica de docs o una captura de la UI relevante.
Las páginas de documentación se comparten en canales de Slack e hilos de X. Una imagen de portada de docs coherente las hace reconocibles en un feed saturado incluso antes de que se lea el título.
og:image como /images/cover.png. Los crawlers sociales pegan a tu página desde *sus* servidores — las rutas relativas apuntan al dominio de la propia plataforma social y dan 404. Usa siempre una URL https:// absoluta.twitter:card. Sin ella, X cae a una tarjeta mínima sin imagen. Añade twitter:card=summary_large_image para conseguir el layout en banner que casi toda marca quiere.og:image:alt. No cuesta nada, ayuda a usuarios con lectores de pantalla y algunas plataformas la muestran como texto alternativo en la tarjeta renderizada.<meta> — título, descripción, imagen, tipo, etcétera. Todas las grandes plataformas sociales y de chat lo leen hoy, por eso se ha convertido en el estándar de facto para los metadatos de tarjetas de compartido.og: equivalentes cuando faltan las específicas twitter:, así que técnicamente puedes apañarte solo con Open Graph. Pero añadir twitter:card, twitter:site y twitter:creator te da un control más fino sobre cómo se renderiza la tarjeta en X.<title> y la meta description. A veces Google sí coge og:image para búsqueda de imágenes y superficies de Discover, pero no es una señal de ranking.