OpenGraph: og:title, og:description y og:image
Controle cómo aparece su página cuando se comparte en redes sociales
OpenGraph: og:title, og:description y og:image es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es OpenGraph?
OpenGraph es un protocolo de metadatos introducido por Facebook para que cualquier página pueda describir cómo debe mostrarse al compartirse en una plataforma social. Las etiquetas se encuentran en <head> como pares <meta property="og:..." content="..."> y las analizan las principales redes sociales.
Etiquetas principales
En la práctica, las cuatro etiquetas requeridas son og:title, og:description, og:image y og:url. La ausencia de cualquiera de ellas produce una tarjeta de vista previa poco atractiva o, peor aún, una tarjeta sin vista previa que los usuarios suelen ignorar.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
El titular de la tarjeta de vista previa. Manténgalo por debajo de unos 60 caracteres para que quepa en una línea y la red social no lo recorte. Hágalo coincidir con el <title> de la página, pero no dude en optimizarlo para aumentar la tasa de clics.
og:description
Resumen de una o dos frases que se muestra debajo del título. Procure que tenga entre 120 y 160 caracteres: lo suficiente para despertar interés, pero lo bastante breve para mostrarse completo en todas las plataformas. Evite el clickbait; las descripciones honestas generan más interacción a largo plazo.
og:image
La imagen principal. Use un JPG o PNG de 1200x630 píxeles (de menos de ~5 MB). Use siempre una URL absoluta: las URL relativas no funcionan porque el rastreador no tiene el concepto de "esta página". Proporcione og:image:width y og:image:height para evitar una solicitud adicional durante la generación de la vista previa.
og:url
La URL canónica de la página. Establézcala incluso cuando la página ya tenga un <link rel="canonical">: algunos rastreadores prefieren la etiqueta OG. Elimine los parámetros de seguimiento para que las URL compartidas no se multipliquen en muchas páginas "diferentes" dentro de la base de datos de la plataforma social.
og:type
Indica a la plataforma qué tipo de contenido es: "website", "article", "product", "video.movie", "book", etc. Article es la opción más habitual para las publicaciones de blog y habilita etiquetas adicionales como article:published_time y article:author.
og:locale
Localización BCP-47 del contenido (por ejemplo, "en_US", "tr_TR"). Combinada con og:locale:alternate, indica a la red qué otros idiomas están disponibles para la página; así es como Facebook decide si debe traducir una vista previa.
og:site_name
Nombre visible del sitio que publica el contenido. Algunas redes lo muestran como subtítulo de la tarjeta. Manténgalo breve y coherente en todas las páginas para que la marca se muestre igual independientemente del artículo que se comparta.
Prueba de las tarjetas
Use Sharing Debugger de Facebook y Post Inspector de LinkedIn para obtener la página tal como la ve el rastreador, consultar las etiquetas analizadas y actualizar su vista previa almacenada en caché. Después de implementar una nueva og:image, es necesario volver a rastrear la página; de lo contrario, los usuarios verán la imagen antigua durante días.
Errores habituales
Las etiquetas generadas en el servidor son obligatorias: la mayoría de los rastreadores no ejecutan JavaScript, por lo que las etiquetas OG que React inyecta en el cliente les resultan invisibles. Genérelas en el HTML inicial, preferiblemente mediante SSR o SSG; de lo contrario, las tarjetas de vista previa seguirán siendo genéricas.
Comprobación de conocimientos
¿Por qué og:image debe utilizar una URL absoluta en lugar de una ruta relativa?
Resumen
Las etiquetas de OpenGraph (og:title, og:description, og:image con una URL absoluta, og:url, og:type, og:locale, og:site_name) controlan el aspecto de cada página al compartirla. Genérelas en el servidor, mantenga los títulos por debajo de 60 caracteres y las descripciones en torno a 150, use imágenes de 1200x630 y haga pruebas con Sharing Debugger de Facebook antes del lanzamiento.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «OpenGraph: og:title, og:description y og:image» es gratis?
Sí — el texto completo de «OpenGraph: og:title, og:description y og:image» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «OpenGraph: og:title, og:description y og:image»?
Controle cómo aparece su página cuando se comparte en redes sociales Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «OpenGraph: og:title, og:description y og:image»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- OpenGraph: og:title, og:description y og:image
- Etiquetas meta de Twitter Card
- Conceptos básicos de datos estructurados JSON-LD
- Hreflang para páginas internacionales