2023-01-25 08:55:24 +00:00
|
|
|
+++
|
|
|
|
|
draft = true
|
|
|
|
|
title = "Using OpenGraph with Zola"
|
|
|
|
|
[extra]
|
|
|
|
|
image = "/img/blogposts/opengraph-example-2022-12-16.png"
|
|
|
|
|
tags = ["web", "zola", "opengraph"]
|
2023-01-25 15:03:53 +00:00
|
|
|
authors = ["Ydreniv"]
|
2023-01-25 08:55:24 +00:00
|
|
|
+++
|
|
|
|
|
|
|
|
|
|
## What is OpenGraph
|
|
|
|
|
|
2023-01-25 15:03:53 +00:00
|
|
|
After having [tried Microformats](@/blog/2022-12-13-beginner-hcard-hentry.md),
|
|
|
|
|
I've made a first implementation of [OpenGraph](https://ogp.me/).
|
2023-01-25 08:55:24 +00:00
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 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.
|
|
|
|
|
|
