Etiquetas Open Graph explicadas, con un generador de etiquetas en vivo | We.Inc
Las cuatro etiquetas Open Graph obligatorias, las propiedades de imagen, los valores de og:type y las etiquetas article, comentados, más un generador que escribe el marcado del head.
Etiquetas Open Graph explicadas
Las etiquetas Open Graph son elementos meta en el head de una página que controlan cómo se ve un enlace al compartirlo. El protocolo exige cuatro: og:title, og:type, og:image y og:url. Cada una usa el atributo property, por ejemplo meta property="og:title" content="...". Añade og:description, og:site_name y el ancho, el alto y el alt de la imagen para conseguir mejores vistas previas.
Las cuatro propiedades obligatorias
Propiedad
Qué poner
og:title
El título tal como debe aparecer en la tarjeta al compartir
og:type
El tipo de objeto, como website o article
og:image
Una URL completa a la imagen de vista previa
og:url
La URL canónica que identifica la página
Las vistas previas al compartir salen de un puñado de etiquetas en las que es fácil equivocarse sin darse cuenta: una ruta de imagen relativa, un ancho y un alto que faltan o un título que solo vive en el elemento title. Rellena el generador para obtener un marcado correcto y luego lee qué hace cada propiedad.
Rellena en el generador el título, la descripción, la URL de la página y la URL de la imagen.
Elige el tipo: website para la mayoría de las páginas, article para las entradas del blog.
Revisa la tarjeta de vista previa aproximada y copia las etiquetas generadas en el head de tu página.
Prueba la página publicada con el depurador de contenido compartido de cada plataforma, ya que cada red guarda en caché las vistas previas.
Usa URL https absolutas en og:image y og:url. Las rutas relativas son un motivo habitual de que las vistas previas salgan sin imagen.
Incluye og:image:width y og:image:height para que una app conozca la forma de la imagen por las etiquetas sin tener que medir el archivo.
Escribe og:image:alt para las personas que usan lectores de pantalla en las redes sociales.
Cuando cambies la imagen, usa un nombre de archivo nuevo. Las plataformas guardan las imágenes en caché, así que reutilizar la URL antigua puede mantener la imagen desactualizada.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen Open Graph?
El protocolo no fija un tamaño. 1200 por 630 píxeles es un tamaño horizontal muy usado y es el que emplea la documentación de Next.js en sus ejemplos. Mantén el texto importante lejos de los bordes, porque algunas apps recortan la imagen.
¿Ayudan las etiquetas Open Graph al SEO?
Su función es la tarjeta al compartir, no el posicionamiento. Un título y una imagen claros pueden conseguir más clics cuando la gente pasa tu enlace en chats y feeds. Mantén og:title coherente con tu elemento title para que todas las superficies describan la página igual.
¿Por qué las etiquetas Open Graph usan property en lugar de name?
El protocolo se basa en RDFa, que usa el atributo property. Los ejemplos de ogp.me escriben meta property="og:title". En cambio, las etiquetas de Twitter card usan el atributo name, como en meta name="twitter:card".
¿Sigo necesitando las etiquetas de Twitter card?
Añade al menos twitter:card, con el valor summary_large_image si quieres el diseño de imagen grande. Muchas apps leen los valores og para el título, la descripción y la imagen cuando no hay etiquetas twitter equivalentes, pero las reglas de las plataformas cambian, así que prueba tu URL publicada antes de dar por hecho que esa alternativa funciona.
¿Puede una página tener más de un og:image?
Sí. El protocolo admite arrays: repite la etiqueta og:image y pon el ancho, el alto y el alt de cada imagen justo después de la imagen que describen. Cuando los valores se contradicen, el protocolo da preferencia a la primera etiqueta desde arriba.
Las propiedades estructuradas pertenecen a la etiqueta de encima
Propiedades como og:image:width describen el og:image declarado más recientemente antes de ellas. El orden importa: declara primero la imagen, luego su ancho, alto, tipo y alt, y después la siguiente imagen.
og:image:secure_url es una dirección https adicional para la misma imagen. Si tu og:image ya usa https, no la necesitas.
Los tipos y sus etiquetas adicionales
website es el valor por defecto para las páginas que no son un tipo concreto de objeto. article habilita article:published_time, article:modified_time, article:author, article:section y article:tag.
El protocolo también define book, profile y los grupos music y video. Úsalos solo cuando la página sea realmente ese objeto; una página de producto suele ser website.
Todas las propiedades, comentadas
Propiedades Open Graph opcionales y estructuradas
Propiedad
Función
Valor de ejemplo
og:description
Una o dos frases bajo el título
Reparación de tejados en el día en todo Leeds
og:site_name
El nombre del sitio en conjunto
Northside Roofing
og:locale
Idioma y territorio, por defecto en_US
en_GB
og:locale:alternate
Otros idiomas en los que existe la página
fr_FR
og:determiner
Palabra que va antes del título en una frase
a, an, the, vacío o auto
og:image:secure_url
Dirección https de la imagen
og:image:type
Tipo MIME de la imagen
image/jpeg
og:image:width
Ancho en píxeles
og:image:height
Alto en píxeles
og:image:alt
Descripción de la imagen
Tejador colocando tejas de pizarra
og:video / og:audio
Un archivo de vídeo o audio que acompaña a la página
Valores de og:type
Tipos definidos por el protocolo
Valor
Se usa para
Páginas de inicio y la mayoría de las demás páginas
Primero las etiquetas obligatorias, luego la descripción, el nombre del sitio y el bloque de imagen con sus propiedades estructuradas.
Entrada de blog con etiquetas article
El atributo prefix declara los espacios de nombres. Las fechas usan ISO 8601.
Reparación de tejados en Leeds | Northside Roofing
Reparación de goteras en el día y presupuestos por escrito gratis en todo Leeds.
Tejador colocando tejas de pizarra en una casa adosada
La URL de la imagen debe ser absoluta y empezar por https://
La URL de la página debe ser absoluta y empezar por https://
og:title es obligatorio
Generador de etiquetas Open Graph
Rellena los campos para generar las etiquetas y una tarjeta aproximada. Cada app real dibuja su propia tarjeta, así que toma la vista previa como orientación.