diff --git a/antora-playbook-local.yml b/antora-playbook-local.yml
index f0c8eb6..18d66e3 100644
--- a/antora-playbook-local.yml
+++ b/antora-playbook-local.yml
@@ -21,3 +21,10 @@ ui:
   bundle:
     url: ui/build/ui-bundle.zip
     snapshot: true
+
+asciidoc:
+  attributes:
+    description: 'Teebeutel (eng. Teabag) is an electronic, Entropia themed con-badge for the GPN20, featuring an ESP32 microprocessor running micropython.'
+    keywords: 'Teebeutel, Entropia, GPN20'
+    page-og-image: '/_/img/preview.jpg'
+    page-og-type: website
\ No newline at end of file
diff --git a/antora-playbook.yml b/antora-playbook.yml
index e5feb49..bd367f1 100644
--- a/antora-playbook.yml
+++ b/antora-playbook.yml
@@ -22,3 +22,10 @@ ui:
   bundle:
     url: ui/build/ui-bundle.zip
     snapshot: true
+
+asciidoc:
+  attributes:
+    description: 'Teebeutel (eng. Teabag) is an electronic, Entropia themed con-badge for the GPN20, featuring an ESP32 microprocessor running micropython.'
+    keywords: 'Teebeutel, Entropia, GPN20'
+    page-og-image: '/_/img/preview.jpg'
+    page-og-type: website
\ No newline at end of file
diff --git a/ui/src/img/preview.jpg b/ui/src/img/preview.jpg
new file mode 100644
index 0000000..2ea5675
Binary files /dev/null and b/ui/src/img/preview.jpg differ
diff --git a/ui/src/partials/head-info.hbs b/ui/src/partials/head-info.hbs
index 32c8bee..3ddcae6 100644
--- a/ui/src/partials/head-info.hbs
+++ b/ui/src/partials/head-info.hbs
@@ -1,5 +1,6 @@
     {{#with page.canonicalUrl}}
     <link rel="canonical" href="{{{this}}}">
+    <meta property="og:url" content="{{{this}}}">
     {{/with}}
     {{#unless (eq page.attributes.pagination undefined)}}
     {{#with page.previous}}
@@ -11,6 +12,7 @@
     {{/unless}}
     {{#with page.description}}
     <meta name="description" content="{{this}}">
+    <meta property="og:description" content="{{this}}">
     {{/with}}
     {{#with page.keywords}}
     <meta name="keywords" content="{{this}}">
@@ -18,3 +20,9 @@
     {{#with (or antoraVersion site.antoraVersion)}}
     <meta name="generator" content="Antora {{this}}">
     {{/with}}
+    {{# with page.attributes.og-type}}
+    <meta property="og:type" content="website">
+    {{/with}}
+    {{# with page.attributes.og-image}}
+    <meta property="og:image" content="{{{../site.url}}}{{{this}}}">
+    {{/with}}
diff --git a/ui/src/partials/head-title.hbs b/ui/src/partials/head-title.hbs
index 924fcac..571bdc3 100644
--- a/ui/src/partials/head-title.hbs
+++ b/ui/src/partials/head-title.hbs
@@ -1 +1,2 @@
-    <title>{{{detag (or page.title defaultPageTitle)}}}{{#with site.title}} :: {{this}}{{/with}}</title>
+    <title>{{{detag (or page.title defaultPageTitle)}}}{{#with site.title}} | {{this}}{{/with}}</title>
+    <meta property="og:title" content="{{{detag (or page.title defaultPageTitle)}}}{{#with site.title}} | {{this}}{{/with}}">
diff --git a/ui/src/partials/head.hbs b/ui/src/partials/head.hbs
index 7dd18b2..4eefed2 100644
--- a/ui/src/partials/head.hbs
+++ b/ui/src/partials/head.hbs
@@ -1,7 +1,7 @@
 {{> head-prelude}}
 {{> head-title}}
+{{> head-scripts}}
 {{> head-info}}
 {{> head-styles}}
 {{> head-meta}}
-{{> head-scripts}}
 {{> head-icons}}