Agregar meta tags Open Graph y Twitter Card con imagen compartible

src/_includes/layouts/base.njk

@@ -5,9 +5,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ title or site.name }}</title>
   <meta name="description" content="{{ description or site.description }}" />
+  <link rel="canonical" href="{{ site.url }}/" />
   <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
   <link rel="icon" type="image/png" sizes="512x512" href="/assets/isotipo-y-organica-preview.png" />
   <link rel="apple-touch-icon" href="/assets/isotipo-y-organica-preview.png" />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="{{ site.name }}" />
+  <meta property="og:url" content="{{ site.url }}/" />
+  <meta property="og:title" content="{{ title or site.name }}" />
+  <meta property="og:description" content="{{ description or site.description }}" />
+  <meta property="og:image" content="{{ site.url }}/assets/og-image.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:alt" content="{{ site.name }}" />
+  <meta property="og:locale" content="es_AR" />
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{{ title or site.name }}" />
+  <meta name="twitter:description" content="{{ description or site.description }}" />
+  <meta name="twitter:image" content="{{ site.url }}/assets/og-image.png" />
   <script>
     if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
       document.documentElement.classList.add('dark');