blog: Add meta tags for OpenGraph & Twitter

Those tags will be read by Facebook, Twitter and other software
like Discourse to show a short summary about the content behind
the link.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/blog/base.html b/src/templates/blog/base.html
index d06dbf3a651473ce60ae3af369bbe8370c8332cd..723d702403eb6cb07600fe3ddf9cff7be3477356 100644 (file)
--- a/src/templates/blog/base.html
+++ b/src/templates/blog/base.html
@@ -2,6 +2,7 @@
 
 {% block head %}
        <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
+       {% block meta %}{% end block %}
 {% end block %}
 
 {% block content %}

diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
index 4532880e9320d960ed214a69a4d8bf6d768edd78..54a3eb78d9f2c91f90fe16fdeb3790895ec0abf0 100644 (file)
--- a/src/templates/blog/post.html
+++ b/src/templates/blog/post.html
@@ -2,6 +2,36 @@
 
 {% block title %}{{ post.title }}{% end block %}
 
+{% block meta %}
+       {% import ipfire.accounts as accounts %}
+
+       <!-- Facebook OpenGraph -->
+       <meta property="og:site_name" content="IPFire Blog" />
+       <meta property="og:title" content="{{ post.title }} - The IPFire Blog" />
+       <meta property="og:description" content="{{ post.excerpt }}" />
+       <meta property="og:url" content="{{ request.full_url() }}" />
+       <meta property="og:image" content="https://blog.ipfire.org/{{ static_url("img/ipfire-tux.png") }}" />
+
+       <meta property="og:type" content="article" />
+       <meta property="og:article:published_time" content="{{ post.published_at.isoformat() }}" />
+       <meta property="og:article:modified_time" content="{{ post.updated_at.isoformat() }}" />
+       {% if isinstance(post.author, accounts.Account) %}
+               <meta property="og:article:author:first_name" content="{{ post.author.first_name }}" />
+               <meta property="og:article:author:last_name" content="{{ post.author.last_name }}" />
+               <meta property="og:article:author:username" content="{{ post.author.uid }}" />
+       {% end %}
+       {% for tag in post.tags %}
+               <meta property="og:article:tag" content="{{ tag }}" />
+       {% end %}
+
+       <!-- Twitter -->
+       <meta property="twitter:site" content="@ipfire" />
+       <meta property="twitter:card" content="summary_large_image" />
+       <meta property="twitter:title" content="{{ post.title }} - The IPFire Blog" />
+       <meta property="twitter:description" content="{{ post.excerpt }}" />
+       <meta property="twitter:image" content="https://blog.ipfire.org/{{ static_url("img/ipfire-tux.png") }}" />
+{% end block %}
+
 {% block main %}
        <div class="card">
                <div class="card-body">