Add rel-me and OG metadata

2 files changed, 34 insertions, 5 deletions

diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index cb7c15c..3cf4761 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -5,6 +5,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="https://adelie.liz.coffee/img/favicon.ico" />
   <title>{% if title %}{{ title }} - {% endif %}liz.coffee</title>
+
+  <!-- Open Graph Meta Tags -->
+  <meta property="og:title" content="{% if title %}{{ title }} - {% endif %}liz.coffee">
+  <meta property="og:site_name" content="liz.coffee">
+  <meta property="og:type" content="{% if ogType %}{{ ogType }}{% else %}website{% endif %}">
+  <meta property="og:url" content="https://liz.coffee{{ page.url }}">
+  {% if description %}
+  <meta property="og:description" content="{{ description }}">
+  <meta name="description" content="{{ description }}">
+  {% endif %}
+  {% if ogImage %}
+  <meta property="og:image" content="{{ ogImage }}">
+  {% else %}
+  <meta property="og:image" content="https://adelie.liz.coffee/img/favicon.ico">
+  {% endif %}
+
+  <!-- Twitter Card Meta Tags -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@realLucina">
+  <meta name="twitter:creator" content="@realLucina">
+  <meta name="twitter:title" content="{% if title %}{{ title }} - {% endif %}liz.coffee">
+  {% if description %}
+  <meta name="twitter:description" content="{{ description }}">
+  {% endif %}
+  {% if ogImage %}
+  <meta name="twitter:image" content="{{ ogImage }}">
+  {% else %}
+  <meta name="twitter:image" content="https://adelie.liz.coffee/img/favicon.ico">
+  {% endif %}
   <link rel="stylesheet" href="https://adelie.liz.coffee/bundle.css">
   <link rel="alternate" type="application/atom+xml" title="liz.coffee" href="/feed.xml">
   <style>
diff --git a/src/index.njk b/src/index.njk
index c8f74f4..c496732 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -21,11 +21,11 @@ title: Home
 
 <p>You can find me on the internet at these places:</p>
 <ul>
-  <li><a href="https://twitter.com/emprespresso">twitter</a></li>
-  <li><a href="https://www.linkedin.com/in/emprespresso/">linkedin</a></li>
-  <li><a href="https://www.instagram.com/emprespresso/">instagram</a></li>
-  <li><a href="https://github.com/emprespresso">github</a> (Although, I try to do most of my side projecting <a href="https://code.liz.coffee">on my own infra</a>)</li>
-  <li><a href="mailto:me@liz.coffee">me@liz.coffee</a></li>
+  <li><a rel="me" href="https://twitter.com/emprespresso">twitter</a></li>
+  <li><a rel="me" href="https://www.linkedin.com/in/emprespresso/">linkedin</a></li>
+  <li><a rel="me" href="https://www.instagram.com/emprespresso/">instagram</a></li>
+  <li><a rel="me" href="https://github.com/emprespresso">github</a> (Although, I try to do most of my side projecting <a href="https://code.liz.coffee">on my own infra</a>)</li>
+  <li><a rel="me" href="mailto:me@liz.coffee">me@liz.coffee</a></li>
 </ul>
 
 <blockquote>