meta tags, better description

nuxt.config.js

@@ -14,7 +14,13 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
+      { name: 'description', content: 'Give your profile picture a hexagonal shape without having an NFT!' },
+      { name: 'keywords', content: 'NFT, twitter, avatar, maker, hexagon' },
+      { name: 'theme-color', content: '#ffffff' },
+      { name: 'og:url', content: 'https://nftavatar.thijs.gg' },
+      { name: 'og:image', content: '/logo.png' },
+      { name: 'twitter:image:src', content: '/logo.png' },
+      { name: 'twitter:card', content: 'summary_large_image' },
       { name: 'format-detection', content: 'telephone=no' },
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],

pages/index.vue

@@ -3,9 +3,9 @@
     <div class="mb-8">
       <div class="max-w-5xl mx-auto mt-12">
         <div class="text-white text-center mb-8">
-          <img src="@/assets/img/logo.png" class="mx-auto h-24 mb-4" />
-          <h1 class="font-bold text-4xl">Fake Twitter NFT Avatar</h1>
-          <p class="font-semibold text-xl">Give your profile picture a hexagonal shape!</p>
+          <img src="/logo.png" class="mx-auto h-24 mb-4" />
+          <h1 class="font-bold text-4xl">Twitter NFT Avatar</h1>
+          <p class="font-semibold text-xl">Give your profile picture a hexagonal shape without an NFT!</p>
           <p class="text-md mt-1">
             Open source on <a class="text-blue-500 hover:text-blue-600 transition duration-50" href="https://github.com/tandpfun/nft-avatar" target="_blank">GitHub</a>. Made by
             <a class="text-blue-500 hover:text-blue-600 transition duration-50" href="https://twitter.com/cdngdev" target="_blank">@cdngdev</a>.