Added OpenGraph and Twitter Card meta tags - updated README.md & homepage

Author: aeksco

README.md

@@ -12,6 +12,7 @@ This is a basic starter project for a prerendered [Vue.js](https://vuejs.org/) +
 - Pre-rendered dynamic pages using a sample `Item` datatype
 - Integrates with [HotJar](https://hotjar.com"), [Mailchimp](https://mailchimp.com"), and [Google Analytics](https://analytics.google.com/analytics/web/#/)
 - Includes [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data) for outstanding SEO
+- Pre-configured with [OpenGraph](http://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) meta tags for beautiful [unfurls](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254) when sharing on social media
 - Customizable UI using [Bootstrap](https://getbootstrap.com) & [SASS](https://sass-lang.com) variables
 
 **NOTE:** this project can only be deployed via Netlify with [continuous deployment](https://www.netlify.com/docs/continuous-deployment/) enabled.
@@ -29,6 +30,8 @@ $ yarn run dev
 $ yarn run build
 ```
 
+Note that [Prettier]() will automatically clean up your code when you save. You can adjust this behavior in the `build` section at line `127` in `nuxt.config.js`.
+
 ### Pre-rendered Dynamic Pages
 
 This project includes a series of pre-rendered pages using a generic `Item` datatype. The data for these pages is maintained in `assets/content/items.json` and they're generated with a custom `generate` field in `nuxt.config.js`:
@@ -63,6 +66,10 @@ These variables can be configured in a variety of ways - please consult the [Net
 
 The [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data) can be updated by modifying the `jsonld()` function in the `layouts/default.vue` file. This feature shouldn't be used anywhere else - one `JSON-LD` snippet should describe the entire site.
 
+### OpenGraph and Twitter Card Meta Tags
+
+The `<meta>` tags for [OpenGraph](http://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) are located in the `head` section of `nuxt.config.js`. **You should change these from their default values**. You can validate your changes using the [Twitter Card Validator](https://cards-dev.twitter.com/validator) and the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing).
+
 ### Bootstrap + SASS Configuration
 
 You can modify the `assets/sass/main.sass` file to optionally include Bootstrap component styles as-needed. **PROTIP** - only include the Bootstrap components your app depends on - this will keep your CSS bundle nice and slim :)

nuxt.config.js

@@ -12,7 +12,21 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: pkg.description }
+      { hid: 'description', name: 'description', content: pkg.description },
+
+      // Twitter Card Meta
+      // Doc: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
+      { property: 'twitter:card', content: 'summary' },
+      { property: 'twitter:site', value: '@codotype' },
+      { property: 'twitter:creator', value: '@aeksco' },
+
+      // OpenGraph Meta
+      // Doc: http://ogp.me/
+      { property: 'og:url', content: 'https://nuxt-netlify-lambda-starter.netlify.com' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:title', content: 'Nuxt Netlify Lambda Starter' },
+      { property: 'og:description', content: 'SEO-friendly website starter backed by Netlify lambda functions' },
+      { property: 'og:image', content: 'https://nuxtjs.org/meta_640.png' }
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
   },
@@ -116,7 +130,10 @@ export default {
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
-          exclude: /(node_modules)/
+          exclude: /(node_modules)/,
+          options: {
+            fix: true // NOTE - this is set to `true` so prettier automatically cleans up the file on save
+          }
         })
       }
     }

pages/index.vue

@@ -80,6 +80,20 @@
                 </a>
                 snippet for fantastic SEO
               </li>
+              <li>
+                Pre-configured with
+                <a href="http://ogp.me/" target="_blank">
+                  OpenGraph
+                </a>
+                and
+                <a
+                  href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html"
+                  target="_blank"
+                >
+                  Twitter Card
+                </a>
+                meta tags
+              </li>
               <li>
                 Bundled with
                 <a