Feat: Added Open Graph meta tags, Twitter Card's meta tags and modified the comments

Author: israelmuca

pages/blog/_blogpost.vue

@@ -24,12 +24,12 @@ export default {
     Header,
     Footer
   },
-  // The head function generates all the metadata for the HTML's head, in this case, title, description and keywords (for SEO purposes)
-  // Also includes twitter:card headers for correct parsing in Twitter
+  // The head function generates all the metadata for the HTML's head
   head: function() {
     return {
       title: `${this.post.title}`,
       meta: [
+        // SEO meta
         {
           hid: "description",
           name: "description",
@@ -40,6 +40,33 @@ export default {
           name: "keywords",
           content: this.post.keywords
         },
+        // Facebook's Open Graph Markup
+        {
+          hid: "og:url",
+          property: "og:url",
+          content: this.fullURL
+        },
+        {
+          hid: "og:type",
+          property: "og:type",
+          content: "article"
+        },
+        {
+          hid: "og:title",
+          property: "og:title",
+          content: this.post.title
+        },
+        {
+          hid: "og:description",
+          property: "og:description",
+          content: this.post.description
+        },
+        {
+          hid: "og:image",
+          property: "og:image",
+          content: this.imageURL
+        },
+        // Twitter's Card Markup
         {
           hid: "twitter:card",
           name: "twitter:card",
@@ -74,9 +101,13 @@ export default {
     Prism.highlightAll();
   },
   computed: {
-    // image will always return the correct URL for the thumbnail, both for development and once deployed
+    // imageURL will always return the correct URL for the thumbnail, both for development and once deployed
     imageURL: function() {
-      return `${process.env.BASE_URL}${this.post.thumbnail}`
+      return `${process.env.BASE_URL}${this.post.thumbnail}`;
+    },
+    // fullURL will always return the correct URL for the og:URL, both for development and once deployed
+    fullURL: function() {
+      return `${process.env.BASE_URL}${this.$route.path}`;
     }
   }
 };

pages/index.vue

@@ -28,21 +28,69 @@ export default {
     ArticleCard,
     Footer
   },
-  // The head function generates all the metadata for the HTML's head, in this case, title, description and keywords (for SEO purposes)
+  // The head function generates all the metadata for the HTML's head
   head() {
     return {
       title: "Israel Muñoz",
       meta: [
+        // SEO meta
         {
           hid: "description",
           name: "description",
-          content: "A blog about Web Development"
+          content: "A blog about Web Development, entrepeneurship, and education."
         },
         {
           hid: "keywords",
           name: "keywords",
           content:
             "Full Stack full-stack node.js nodejs express vue nuxt landing blog javascript jamstack"
+        },
+        // Facebook's Open Graph Markup
+        {
+          hid: "og:url",
+          property: "og:url",
+          content: "https://israelmuca.dev"
+        },
+        {
+          hid: "og:type",
+          property: "og:type",
+          content: "website"
+        },
+        {
+          hid: "og:title",
+          property: "og:title",
+          content: "Hello! I'm Israel Muñoz, a Full Stack Web Developer. I'm currently working in expanding access to computer science in mexican schools."
+        },
+        {
+          hid: "og:description",
+          property: "og:description",
+          content: "A blog about Web Development, entrepeneurship, and education."
+        },
+        {
+          hid: "og:image",
+          property: "og:image",
+          content: "https://avatars3.githubusercontent.com/u/15834664?s=400&u=428efa70328b335936bcfc500272a48234e803c6&v=4"
+        },
+        // Twitter's Card Markup
+        {
+          hid: "twitter:card",
+          name: "twitter:card",
+          content: "summary_large_image"
+        },
+        {
+          hid: "twitter:title",
+          name: "twitter:title",
+          content: "Hello! I'm Israel Muñoz, a Full Stack Web Developer. I'm currently working in expanding access to computer science in mexican schools."
+        },
+        {
+          hid: "twitter:description",
+          name: "twitter:description",
+          content: "A blog about Web Development, entrepeneurship, and education."
+        },
+        {
+          hid: "twitter:image",
+          name: "twitter:image",
+          content: "https://avatars3.githubusercontent.com/u/15834664?s=400&u=428efa70328b335936bcfc500272a48234e803c6&v=4"
         }
       ]
     };