Comprobador y simulador de OGP
- Seguro
- Los resultados del diagnóstico no se guardan ni se publican en ningún lugar.
Notas
Una herramienta para validar la configuración de etiquetas OGP y simular cómo se verá una página al compartirse en redes sociales.
Útil para crear imágenes OGP y probar metaetiquetas HTML.
Fuente de entrada
Elige uno de tres métodos.
| URL del sitio web | Adecuado para sitios web accesibles públicamente. |
|---|---|
| Código HTML | Adecuado para sitios en desarrollo o con restricciones de acceso. |
| Archivo de imagen | Adecuado para comprobar el aspecto de una imagen OGP durante su creación. |
Resultado del diagnóstico
Se evalúa en tres grados.
| Grado A | Cumple todos los requisitos recomendados. |
|---|---|
| Grado B | Cumple los obligatorios, pero hay elementos recomendados. |
| Grado C | Algunos elementos necesitan corrección. |
Ejemplo recomendado
Los ajustes siguientes cubren las principales plataformas.
<meta property="og:title" content="Título de la página">
<meta property="og:description" content="Descripción de la página">
<meta property="og:url" content="URL de la página">
<meta property="og:image" content="URL de la imagen OGP">
<meta property="og:type" content="Tipo de página">
<meta property="og:site_name" content="Nombre del sitio">
<meta name="twitter:card" content="Tipo de Twitter Card">Detalles de etiquetas
Etiquetas OGP base
Etiquetas que se pueden usar en distintas redes. Se recomienda configurar todas las siguientes.
Usa el atributo `property`.
<meta property="og:title" content="Título de la página">
<meta property="og:description" content="Descripción de la página">
<meta property="og:url" content="URL de la página">
<meta property="og:image" content="URL de la imagen OGP">
<meta property="og:type" content="Tipo de página">
<meta property="og:site_name" content="Nombre del sitio">og:title
Establece el título de la página. Normalmente el mismo valor que la etiqueta `title`.
En X (Twitter), si falta puede desactivar la Twitter Card, por lo que es prácticamente obligatorio.
<meta property="og:title" content="Título de la página">Ejemplo
<meta property="og:title" content="Comprobador y simulador de OGP">og:description
Establece la descripción de la página. Normalmente el mismo valor que la etiqueta `description`.
En la mayoría de redes, si se omite, `description` puede usarse como alternativa.
<meta property="og:description" content="Descripción de la página">Ejemplo
<meta property="og:description" content="Diagnostica la configuración OGP y previsualiza cómo se verá tu página al compartirse en redes sociales a partir de una URL o del HTML. Compatible con X, Facebook y LINE, y también puede simular desde un archivo de imagen.">og:url
Establece la URL de la página como URL absoluta.
<meta property="og:url" content="URL de la página">Ejemplo
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Establece la URL de la imagen OGP como URL absoluta. Tamaño recomendado: `1200px`×`630px`.
Como puede mostrarse en 1:1, mantén la información importante dentro del área central `630px`×`630px`.
<meta property="og:image" content="URL de la imagen OGP">Ejemplo
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Especifica el tipo de la página.
| website | Página principal del sitio |
|---|---|
| article | Páginas no principales como artículos |
| blog | Página principal del blog |
| product | Páginas de detalle de producto/servicio |
<meta property="og:type" content="Tipo de página">Ejemplo
<meta property="og:type" content="article">og:site_name
Especifica el nombre del sitio. Normalmente es común a todas las páginas.
<meta property="og:site_name" content="Nombre del sitio">Ejemplo
<meta property="og:site_name" content="develop.tools">Etiquetas de X (Twitter)
Etiquetas que X (antes Twitter) prioriza.
Si se configuran las etiquetas OGP base, puedes omitir todas estas sin problemas.
Configura `twitter:card` solo si quieres controlar el tamaño de la miniatura.
Usa el atributo `name`.
<meta name="twitter:card" content="Tipo de Twitter Card">
<meta name="twitter:title" content="Título de la página">
<meta name="twitter:description" content="Descripción de la página">
<meta name="twitter:image" content="URL de la miniatura">
<meta name="twitter:site" content="Usuario de X/Twitter del sitio">
<meta name="twitter:creator" content="Usuario de X/Twitter del autor">twitter:card
Establece el tipo de Twitter Card. Especifícalo si quieres una miniatura grande.
Si se omite, será `summary`.
| summary | Miniatura pequeña (cuadrada) + info del sitio en paralelo |
|---|---|
| summary_large_image | Miniatura grande + info del sitio en vertical |
<meta name="twitter:card" content="Tipo de Twitter Card">Ejemplo
<meta name="twitter:card" content="summary_large_image">Etiquetas de Facebook
Etiquetas usadas por Facebook.
Especifícalas si quieres usar funciones analíticas específicas de Facebook.
<meta property="fb:app_id" content="ID de la app de Facebook">