+++
draft = true
title = "Using OpenGraph with Zola"
[extra]
image = "/img/blogposts/opengraph-example-2022-12-16.png"
tags = ["web", "zola", "opengraph"]
authors = ["Ydreniv"]
+++

## What is OpenGraph

After having [tried Microformats](@/blog/2022-12-13-beginner-hcard-hentry.md),
I've made a first implementation of [OpenGraph](https://ogp.me/).
This is an initiative launched by Facebook, and widely adopted, to give some metadata about webpages.
This allows external applications to preview the links, displaying the title, linked to the url, a description, a picture etc.

![Two links to two different pages of this website]({{ config.base_url }}/img/blogposts/opengraph-example-2022-12-16.png)

## How I did it with Zola

```html
{% macro opengraph(title, url, content, type="", image="") %}
<meta property="og:title" content="{{ title }}" />
<meta property="og:url" content="{{ url }}" />
<meta property="og:description" content="{{ content | safe | truncate(length=144) }}" />
{% if image %}
<meta property="og:image" content="{{ image }}" />
{% endif %}
{% if type %}
<meta property="og:type" content="{{ type }}" />
{% endif %}
{% endmacro %}
```

In the templates where I want it, I can then do something along the following :

```html
{% import "macros/opengraph.html" as opengraph_macros %}

...

{% block head_extra %}
{{ opengraph_macros::opengraph(title=page.title, url=page.permalink, content=page.content, type="website", image=config.base_url ~ "/img/project-spg/%5BMCS-003%5D%20Window%20to%20the%20Fire.png") }}
{% endblock %}
```

## Comparison with Microformats

While OpenGraph is not meant to be the same as Microformats, they do share some similarities.
I use them both on my blog posts, to semantically represent various metadata about those posts.
However, while mainstream applications (Discord, Twitter, Facebook etc) support OpenGraph, they tend not to support Microformats.
This greatly diminishes the use of it.

But I prefer Microformats nonetheless.
I feel like they are better standardized, and suit the "small-scale" web better.
they don't require additional html elements, only some more classes.
And Microformats are more versatile.
There are more properties available, and one can represent several objects on a single webpage, contrary to Opengraph.