Softonic

Generador de etiquetas Open Graph

Paso 1 / 2
Siguiente

Rellena el título, la descripción, la URL canónica (canonical), la imagen de vista previa y el og:type, y este generador escribe las etiquetas <meta> de Open Graph correspondientes, listas para pegar en el <head> de tu página. Los campos que dejes vacíos simplemente se omiten, y las comillas y los signos & de tu texto se escapan para que el marcado siga siendo válido. El generador escribe solo las cinco propiedades og: principales, no etiquetas de Twitter Card ni de artículo.

Cómo generar tus etiquetas OG

  1. 1

    Elige el og:type

    website para páginas de inicio, article para publicaciones, product para páginas de tienda, video.other para incrustaciones. El campo es texto libre, así que funciona cualquier valor de og:type válido.

  2. 2

    Rellena los campos principales

    Título, descripción, URL canónica y una URL de imagen absoluta. Cualquier campo que dejes vacío se omite de la salida.

  3. 3

    Genera las etiquetas

    Las comillas y los signos & se escapan por ti, y obtienes una línea meta por cada campo que rellenes.

  4. 4

    Copia el bloque en el head

    Pégalo en el `<head>` de la plantilla de tu página, por encima de cualquier etiqueta social que ya tengas.

Las etiquetas que produce este generador

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

Esa es toda la salida. og:type se escribe siempre, mientras que og:title, og:description, og:url y og:image solo se añaden cuando los rellenas. Estas cinco propiedades son lo primero que leen Facebook, LinkedIn, Slack, Discord, WhatsApp y X, así que cubren el caso habitual.

El generador no escribe etiquetas de tarjeta twitter:, ni og:image:width / og:image:height, og:site_name, og:locale o etiquetas article:. Si las necesitas, añádelas a mano junto al bloque generado.

Valores de og:type que importan

Tipo Cuándo usarlo
website Página de inicio, páginas de aterrizaje, contenido estático
article Entradas de blog, noticias, páginas editoriales
product Páginas de detalle de producto de comercio electrónico
video.other Contenido de vídeo e incrustaciones
profile Páginas de perfil de autor o usuario
music.song Páginas de pistas individuales

Etiquetas que vale la pena añadir a mano

Etiqueta Qué hace Valor de ejemplo
og:site_name Nombre del sitio en su conjunto Example
og:locale Idioma y región de la página en_US
og:image:width Ayuda a los rastreadores a maquetar la tarjeta más rápido 1200
og:image:height Ayuda a los rastreadores a maquetar la tarjeta más rápido 630
twitter:card Diseño de la tarjeta en X summary_large_image

X recurre a las etiquetas og: cuando no hay etiquetas twitter:, así que una página que solo lleva las cinco propiedades generadas también se previsualiza correctamente allí. Añade etiquetas twitter: solo cuando quieras un título, una descripción o una imagen distintos específicamente en X.

Errores comunes que este generador te ayuda a evitar

  • name en lugar de property. Las propiedades de Open Graph van en property="og:...". El generador siempre escribe el atributo correcto.
  • Comillas y signos & sin escapar. Un " o & en crudo en tu título rompe la etiqueta. El generador los escapa por ti.
  • URL de imagen relativas. Los rastreadores sociales solo aceptan URL absolutas. Pega la dirección https:// completa de la imagen, porque el generador no añade tu dominio.
  • Tamaño de imagen incorrecto. 1200 × 630 píxeles es el tamaño seguro universal. Por debajo de 200 × 200 píxeles la imagen suele rechazarse.

Preguntas frecuentes

En el <head> de tu HTML, arriba del todo, preferiblemente cerca del <title>. Los rastreadores leen el head y a menudo se detienen pronto, así que mantener las etiquetas OG cerca del principio evita que se pierdan en páginas muy grandes.

No. Solo escribe las cinco propiedades og: principales. X recurre a Open Graph cuando faltan las etiquetas twitter:, así que tu vista previa sigue funcionando. Añade etiquetas twitter: a mano solo cuando quieras un título, una descripción o una imagen distintos en X.

1200 × 630 píxeles, JPG o PNG, es el tamaño seguro universal. Funciona en Facebook, LinkedIn, tarjetas grandes de X, Slack, Discord e iMessage. Cualquier cosa menor de 200 × 200 píxeles corre el riesgo de rechazarse por completo.

Da a cada versión de idioma su propia página con sus propias etiquetas og:, y añade og:locale (por ejemplo, en_US) más og:locale:alternate para las otras versiones a mano. Este generador no escribe las etiquetas de locale por ti.

Herramientas relacionadas

Extractor de enlaces externos

Pega HTML en bruto, fija opcionalmente una URL base y obtén una lista limpia y sin duplicados de todos los enlaces externos http/https del código, para auditorías de enlaces y revisiones de SEO.

Verificador de Longitud de Meta Descripción

Mide una meta descripción en caracteres y píxeles estimados, compárala con referencias editoriales y revisa maquetas para ordenador y móvil.

Validador de sitemaps XML

Comprueba en tu navegador si un sitemap XML tiene errores de sintaxis, ubicaciones ausentes, URL duplicadas o valores habituales no válidos.

Simulador de SERP de Google

Previsualiza un snippet aproximado al estilo de Google con límites de caracteres para móvil y escritorio. Tu borrador queda en esta sesión del navegador.

Verificador de URL Canónica

Pega el HTML de una página y comprueba su etiqueta rel=canonical: ¿está presente, es una URL absoluta válida, coincide con la URL de la página?

Generador de Etiquetas Canónicas

Genera una etiqueta de enlace rel=canonical válida para cualquier URL. Incluye la validación de la URL y los errores comunes a evitar.

Herramienta disponible en otros idiomas