add static seo and social_image, description, etc

gridsome.config.js

@@ -5,9 +5,18 @@
 // To restart press CTRL + C in terminal and run `gridsome develop`
 
 module.exports = {
+  siteOwner: 'Andre Madarang',
+  siteAuthor: 'Andre Madarang',
+  siteTwitter: '@drehimself',
+  authorTwitter: '@drehimself',
   siteName: 'Gridsome Portfolio Starter',
   siteDescription: 'A simple portfolio theme for Gridsome powered by Tailwind CSS v1',
+  siteKeywords: 'Gridsome,Vue,Tailwind,Tailwind CSS,JavaScript,HTML,CSS,Vue.js,VueJS',
   siteUrl: 'https://gridsome-portfolio-starter.netlify.com',
+  // take a screen-shot of the homepage and make it available online
+  // go to https://gridsome-portfolio-starter.netlify.com/landing_image
+  // right click on the image and select: Copy Image Address and put the contents in siteImage
+  siteImage: 'https://gridsome-portfolio-starter.netlify.com/assets/static/landing_image.png',
   plugins: [
     {
       use: 'gridsome-plugin-tailwindcss',

src/main.js

@@ -4,6 +4,7 @@
 import DefaultLayout from '~/layouts/Default.vue'
 import VueScrollTo from 'vue-scrollto'
 import VueFuse from 'vue-fuse'
+import config from '../gridsome.config'
 
 export default function (Vue, { router, head, isClient }) {
   // Set default layout as a global component
@@ -16,25 +17,39 @@ export default function (Vue, { router, head, isClient }) {
 
   Vue.use(VueFuse)
 
-  head.meta.push({
-    name: 'keywords',
-    content: 'Gridsome,Vue,Tailwind,Tailwind CSS,JavaScript,HTML,CSS,Vue.js,VueJS'
-  })
-
-  head.meta.push({
-    name: 'description',
-    content: 'Gridsome Portfolio Starter'
-  })
-
-  head.meta.push({
-    name: 'author',
-    content: 'Andre Madarang'
-  })
+  // Standart Meta-Tags
+  head.meta.push(
+    { name: 'image', conent: config.siteImage },
+    { name: 'title', content: config.siteName },
+    { name: 'author', content: config.siteAuthor },
+    { name: 'keywords', content: config.keywords },
+    { name: 'description', content: config.siteDescription }
+  )
+
+  // Open Graph Data
+  // https://garywoodfine.com/gridsome-configure-basic-on-page-seo/
+  head.link.push(
+    { name: 'copyright', content: copyRightNotice },
+    { property: "og:site_name", content: config.siteName },
+    { key: "og:type", property: "og:type", content: 'article' },
+    { key: "og:image", property: "og:image", content: config.siteImage },
+    { key: "og:description", property: "og:description", content: config.siteDescription }
+  )
+
+  // Twitter Tags
+  // https://www.danvega.dev/blog/2019/04/09/adding-twitter-cards-to-gridsome/
+  // twitter-card: https://cards-dev.twitter.com/validator
+  head.meta.push(
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: config.siteName },
+    { name: "twitter:site", content: config.siteTwitter },
+    { name: "twitter:image", content: config.siteImage },
+    { name: "twitter:creator", content: config.authorTwitter },
+    { name: "twitter:description", content: config.siteDescription }
+  )
 
   head.link.push({
     rel: 'stylesheet',
     href: 'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700'
   })
 }
-
-

src/pages/LandingImage.vue

@@ -0,0 +1,13 @@
+<template>
+  <Layout>
+    <g-image src="../../static/landing_image.png" width="250px"/>
+  </Layout>
+</template>
+
+<script>
+export default {
+  metaInfo: {
+    title: 'LandingImage'
+  }
+}
+</script>