Generador del protocolo Open Graph

El protocolo Open Graph permite que cualquier página web se convierta en un rico objeto de gráfico social. Por ejemplo esto lo usa Facebook por lo que cualquier página web tiene la misma funcionalidad que cualquier otro objeto de Facebook.

Esto significa que si un usuario comparte un sitio web en las redes sociales debe ser visto en dichas plataformas. La imagen del enlace y el texto que la acompaña deben reflejar la página tanto como sea posible y alentar a otros a visitarla. Los diseñadores web utilizan un gráfico abierto para que el contenido que se muestra en un enlace de página web no sea visible en absoluto.

Puede controlar cómo se muestran los enlaces de su página en las redes sociales agregando etiquetas Open Graph al código fuente de su sitio web. Por este motivo OpenGraph también resulta interesante para el marketing online. Este protocolo permite a los propietarios decidir cómo mostrar el contenido compartido y personalizar mejor la información para los usuarios.

Ir a nuestra herramienta

Metadatos básicos

Antes de comenzar a insertar las diferentes meta properties, se debe especificar el vocabulario en un prefijo.

<html prefix="og: http://ogp.me/ns#">

Para convertir sus páginas web en objetos gráficos, debe agregar metadatos básicos a su página. Hemos basado la versión inicial del protocolo en RDFa, lo que significa que colocará etiquetas <meta> adicionales en la parte superior del <head> de su página web. Las cuatro propiedades requeridas para cada página son:

og:title - El título de su objeto tal como debería aparecer dentro del gráfico, por ejemplo, "Reescritor de Articulos - herramienta de paráfrasis".
og:type - El tipo de su objeto, por ejemplo, "article". Según el tipo que especifique, es posible que también se requieran otras propiedades.
og:image - Una URL de imagen que debe representar su objeto dentro del gráfico.
og:url - La URL canónica de su objeto que se usará como su ID permanente en el gráfico, por ejemplo, "https://tutorialesenlinea.es/3547-reescritor-de-articulos_herramienta-de-parafrasis.html".

Metadatos opcionales

Las siguientes propiedades son opcionales para cualquier objeto y generalmente se recomiendan:

og:audio - Una URL a un archivo de audio para acompañar a este objeto. Pertenece a og:type.
og:description - Una descripción de una o dos oraciones de su objeto.
og:determiner - La palabra que aparece antes del título de este objeto en una oración. Una enumeración de (a, an, the, "", auto). Si auto se elige, el consumidor de sus datos debe elegir entre "un" o "un". El valor predeterminado es "" (en blanco).
og:locale- La configuración regional en la que están marcadas estas etiquetas. Del formato language_TERRITORY. El valor predeterminado es en_US.
og:locale:alternate - Una variedad de otras configuraciones regionales en las que está disponible esta página.
og:site_name - Si su objeto es parte de un sitio web más grande, el nombre que debe mostrarse para el sitio en general. por ejemplo, "Tutoriales En Linea".
og:video - Una URL a un archivo de video que complementa este objeto. Pertenece a og:type.

Propiedades estructuradas

Algunas propiedades pueden tener metadatos adicionales adjuntos. Estos se especifican de la misma manera que otros metadatos con property y content, pero property tendrán estos extra:

La propiedad og:image tiene algunas propiedades estructuradas opcionales:

og:image: url- Idéntico a og:image.
og:image:secure_url - Una URL alternativa para usar si la página web requiere HTTPS.
og:image:type - Un tipo MIME para esta imagen. Ejemplo, image/jpg - image/png
og:image:width - El número de píxeles del ancho de la imagen.
og:image:height - El número de píxeles del alto de la imagen.
og:image:alt - Una descripción de lo que hay en la imagen (no un pie de foto). Si la página especifica un og:image, debe especificar og:image:alt.

Arrays

Si una etiqueta puede tener varios valores, simplemente coloque varias versiones de la misma etiqueta <meta> en su página. La primera etiqueta (de arriba a abajo) tiene preferencia durante los conflictos.

<meta property="og:image" content="https://example.com/tutoriales_en_linea.jpg" />
<meta property="og:image" content="https://example.com/tutoriales_en_linea1.jpg" />

Coloque las propiedades estructuradas después de declarar su etiqueta raíz. Cada vez que se analiza otro elemento raíz, se considera que esa propiedad estructurada está hecha y se inicia otra.

Por ejemplo:

<meta property="og:image" content="https://example.com/tutoriales_en_linea.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/tutoriales_en_linea2.jpg" />
<meta property="og:image" content="https://example.com/tutoriales_en_linea3.jpg" />
<meta property="og:image:height" content="1000" />

Esto significa que hay 3 imágenes en esta página, la primera imagen es 300x300, la del medio tiene dimensiones no especificadas y la última mide 1000px de altura.

Type

Para que su objeto se represente dentro del gráfico, debe especificar su tipo. Esto se hace usando la propiedad og:type:

<meta property="og:type" content="website" />

La etiqueta type indica el tipo de contenido del enlace. Para la mayoría de las páginas web, los tipos “website”, “video” o “article” suelen ser adecuados. Además de estos, hay otras posibilidades:

website
article
profile
book
restaurant
place
video
- video.movie
- video.episode
- video.tv_show
- video.other
music
- music.song
- music.album
- music.playlist
- music.radio_station

Puedes encontrar la lista completa de tipos de objeto en la referencia sobre los tipos de objeto. En la práctica, también existen otros tipos que están recopilados en una lista de schema.org.

Resumen de los tags de Open Graph

Además de los principales tags presentados más arriba, existen muchos otros que puedes introducir en el código fuente de tu página web para adaptar el contenido aún mejor a las redes sociales.

Cada tag de Open Graph incluye un contenido que debe presentarse en el lugar adecuado de la red social y que, además, debe estar en el formato correcto. La etiqueta og:title, por ejemplo, requiere una o más palabras, es decir, un string. También es posible introducir los siguientes valores:

Boolean: valor de lógica binaria (verdadero, falso, 1, 0)
DateTime: fecha y hora en formato yyyy-mm-ddThh:mm:ss
Enum: conjunto de datos establecidos (como hombre, mujer)
Float: número de coma flotante de 64 bits
Integer: número entero de 32 bits
String: secuencia de caracteres Unicode
URL: URL operativo que utiliza los protocolos HTTP o HTTPS
Array: conjunto de valores

Ejemplo del protoclo Open Graph

El siguiente ejemplo muestra un documento HTML muy simple preparado para las redes sociales con tags de Open Graph:

<!doctype html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Nuestro articulo</title>
<meta property="og:type" content="article">
<meta property="og:title" content="Nuestro articulo">
<meta property="og:description" content="Este es un artículo muy bueno.">
<meta property="og:site_name" content="Tutoriales En Linea">
<meta property="og:url" content="https://www.example.com/la_url_de_nuestro_articulo.html">
<meta property="og:image" content="https://www.example.com/la_url_de_nuestra_imagen.png">
<meta property="og:image:type" content="image/jpg"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="627"/>
<meta property="og:image:alt" content="Muestra de nuestra imagen"/>
<meta property="article:published_time" content="2022-09-20">
<meta property="article:author" content="Tutoriales En Linea">
</head>
<body>

<h1>Nuestro articulo</h1>
<p>Contexto de nuestro articulo</p>

</body>
</html>