Add Open Graph and Twitter Card meta tags

website/demo.js

@@ -57,7 +57,10 @@ const openSummary = (elem) => {
 const loc = new Si18n(); // Initialize the i18n object.
 
 const translate = (locObj) => {
-  $("meta[name='description']").setAttribute("content", locObj.t("site_description"));
+  const siteDescription = locObj.t("site_description");
+  $("meta[name='description']").setAttribute("content", siteDescription);
+  $("meta[property='og:description'").setAttribute("content", siteDescription);
+  $("meta[property='twitter:description'").setAttribute("content", siteDescription);
   $(".monkey .more").innerText = locObj.t("nested.more", { 0: 12 });
 
   // Show locales infos

website/index.html

@@ -7,6 +7,19 @@
   <meta name="description" content="">
   <link rel="alternate" hreflang="en" href="https://si18n.js.bruxelles.dev/?lang=en">
   <link rel="alternate" hreflang="fr" href="https://si18n.js.bruxelles.dev/?lang=fr">
+
+  <meta property="og:type" content="website"/>
+  <meta property="og:url" content="https://si18n.js.bruxelles.dev/"/>
+  <meta property="og:title" content="si18n.js"/>
+  <meta property="og:description" content=""/>
+  <meta property="og:image" content="https://si18n.js.bruxelles.dev/images/banner.png"/>
+
+  <meta property="twitter:card" content="summary_large_image"/>
+  <meta property="twitter:url" content="https://si18n.js.bruxelles.dev/"/>
+  <meta property="twitter:title" content="si18n.js"/>
+  <meta property="twitter:description" content=""/>
+  <meta property="twitter:image" content="https://si18n.js.bruxelles.dev/images/banner.png"/>
+
   <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">