chore(seo): og metatags

Novout · Mar 27, 2022 · 6292fc2 · 6292fc2
1 parent a94789f
commit 6292fc2
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 22 deletions.
diff --git a/packages/better-write-app/src/components/editor/generate/EditorGenerateContainer.vue b/packages/better-write-app/src/components/editor/generate/EditorGenerateContainer.vue
@@ -2,8 +2,8 @@
   <section
     ref="container"
     v-motion
-    :initial="{ opacity: 0, y: 20 }"
-    :enter="{ opacity: 1, y: 0 }"
+    :initial="{ opacity: 0 }"
+    :enter="{ opacity: 1 }"
     :delay="0"
     class="flex flex-col items-start w-full md:h-auto overflow-x-hidden bg-theme-editor-pdf-preview-background shadow-xl z-30"
   >

diff --git a/packages/better-write-app/src/components/editor/utils/Logo.vue b/packages/better-write-app/src/components/editor/utils/Logo.vue
@@ -10,12 +10,12 @@
       :src="path"
       @click.stop.prevent="onClick"
     />
-    <p
+    <h1
       :class="[!back ? 'hidden md:flex text-lg' : 'text-xl']"
       class="font-raleway text-theme-aside-logo-text ml-3"
     >
       betterwrite<span class="text-theme-background-3 font-bold">.io</span>
-    </p>
+    </h1>
   </div>
 </template>
 
@@ -27,7 +27,6 @@
   import { setEditorLogo } from 'better-write-plugin-theme'
   import { Cycle } from 'better-write-plugin-core'
   import { useUtils } from '@/use/utils'
-  import { s } from '@/use/storage/supabase'
 
   const props = defineProps<{
     width: number

diff --git a/packages/better-write-app/src/env.d.ts b/packages/better-write-app/src/env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
 
 declare module '*.vue' {
   import { DefineComponent } from 'vue'

diff --git a/packages/better-write-app/src/pages/Landing.vue b/packages/better-write-app/src/pages/Landing.vue
@@ -19,10 +19,11 @@
               alt="Better Write Logo"
               src="/logo_default.svg"
             />
-            <span
+            <h1
               class="ml-5 relative top-3 sm:top-4 lg:top-6 md:ml-10 text-3xl sm:text-4xl lg:text-5xl font-bold"
-              >Better Write.</span
             >
+              Better Write.
+            </h1>
           </div>
           <v-typical
             v-motion

diff --git a/packages/better-write-app/src/use/start.ts b/packages/better-write-app/src/use/start.ts
@@ -29,6 +29,7 @@ import { useProject } from './project'
 import { useRaw } from './raw'
 import { useScroll } from './scroll'
 import { useUtils } from './utils'
+import { VueI18nSEO } from 'better-write-localisation'
 import { useI18n } from 'vue-i18n'
 import useEmitter from './emitter'
 import {
@@ -37,7 +38,8 @@ import {
   usePageLeave,
   useTextSelection,
 } from '@vueuse/core'
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
+import { useHead } from '@vueuse/head'
 
 export const useStart = () => {
   const ABSOLUTE = useAbsoluteStore()
@@ -54,6 +56,7 @@ export const useStart = () => {
   const utils = useUtils()
   const nav = useNavigatorLanguage()
   const { t } = useI18n()
+  const env = useEnv()
 
   // set global mouse tracking
   watch([x, y], ([_x, _y]) => {
@@ -135,9 +138,55 @@ export const useStart = () => {
       .codeToIso(lang)
   }
 
+  const head = () => {
+    useHead({
+      title: computed(() => t('seo.editor.title')),
+      meta: [
+        {
+          name: 'description',
+          content: computed(() => t('seo.editor.description')),
+        },
+        ...VueI18nSEO,
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:site', content: '@betterwriteio' },
+        {
+          name: 'twitter:title',
+          content: computed(() => t('seo.editor.title')),
+        },
+        {
+          name: 'twitter:description',
+          content: computed(() => t('seo.editor.description')),
+        },
+        { name: 'twitter:image', content: '/logo_default.svg' },
+        {
+          name: 'twitter:image:alt',
+          content: computed(() => t('seo.editor.alt')),
+        },
+        {
+          property: 'og:title',
+          content: computed(() => t('seo.editor.title')),
+        },
+        {
+          property: 'og:description',
+          content: computed(() => t('seo.editor.description')),
+        },
+        { property: 'og:url', content: env.getProdUrl() },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:image', content: 'logo_default.svg' },
+        {
+          property: 'og:image:alt',
+          content: computed(() => t('seo.editor.alt')),
+        },
+        { property: 'og:image:width', content: '500' },
+        { property: 'og:image:height', content: '500' },
+      ],
+    })
+  }
+
   const init = async (plugins: PluginTypes.Plugins) => {
     lang()
     auth()
+    head()
     await core.start(
       {
         ABSOLUTE: useAbsoluteStore(),

diff --git a/packages/better-write-app/vite.config.ts b/packages/better-write-app/vite.config.ts
@@ -4,13 +4,13 @@ import vue from "@vitejs/plugin-vue"
 import vueGlobalComponent  from "unplugin-vue-components/vite"
 import { HeadlessUiResolver } from "unplugin-vue-components/resolvers"
 import vueI18n from "@intlify/vite-plugin-vue-i18n"
+import vuePages from 'vite-plugin-pages'
 import { VitePWA as vitePWA } from 'vite-plugin-pwa'
 import vitePersist from 'vite-plugin-optimize-persist'
 import vitePackageAccess from 'vite-plugin-package-config'
 import vitePackageVersion from 'vite-plugin-package-version'
 import viteChecker from 'vite-plugin-checker'
 import viteFonts from 'vite-plugin-fonts'
-import vitePages from 'vite-plugin-pages'
 import viteSitemap from 'vite-plugin-pages-sitemap'
 import windiCSS from 'vite-plugin-windicss'
 
@@ -24,6 +24,14 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vuePages({
+      dirs: 'src/pages',
+      onRoutesGenerated: routes => (viteSitemap({ 
+        hostname: 'https://www.betterwrite.io/', 
+        filename: 'sitemap',
+        routes 
+      })),
+    }),
     vueI18n({
       include: resolve(__dirname, "./src/lang/**"),
       runtimeOnly: false
@@ -50,13 +58,6 @@ export default defineConfig({
     vitePersist(),
     vitePackageAccess(),
     vitePackageVersion(),
-    vitePages({
-      onRoutesGenerated: routes => (viteSitemap({ 
-        hostname: 'https://www.betterwrite.io/', 
-        filename: 'sitemap',
-        routes 
-      })),
-    }),
     vitePWA({
       base: '/',
       registerType: 'prompt',

diff --git a/packages/better-write-localisation/src/en-US/seo.ts b/packages/better-write-localisation/src/en-US/seo.ts
@@ -1,14 +1,20 @@
 export default {
   landing: {
     title: 'Better Write',
-    description: 'Better Write is a word processor for creative writers.',
+    description:
+      'Better Write is a word processor for creative writers. Create how you want, for what you want.',
+    alt: 'betterwrite.io application logo',
   },
   editor: {
     title: 'Better Write - Editor',
-    description: 'Better Write is a word processor for creative writers.',
+    description:
+      'Better Write is a word processor for creative writers. Create how you want, for what you want.',
+    alt: 'betterwrite.io application logo',
   },
   '404': {
     title: 'Better Write - 404 :(',
-    description: 'Better Write is a word processor for creative writers.',
+    description:
+      'Better Write is a word processor for creative writers. Create how you want, for what you want.',
+    alt: 'betterwrite.io application logo',
   },
 }
diff --git a/packages/better-write-localisation/src/locates.ts b/packages/better-write-localisation/src/locates.ts
@@ -13,6 +13,19 @@ export const VueI18nLocales = [
 
 export const VueI18nAllISO = ['en-US', 'pt-BR']
 
+export const VueI18nSEO = [
+  {
+    property: 'og:locale',
+    content: 'en_US',
+    key: 'en',
+  },
+  {
+    property: 'og:locale:alternate',
+    content: 'pt_BR',
+    key: 'br',
+  }
+]
+
 export type Language = 'Português do Brasil' | 'English'
 
 export const Languages: Language[] = ['Português do Brasil', 'English']
diff --git a/packages/better-write-localisation/src/pt-BR/seo.ts b/packages/better-write-localisation/src/pt-BR/seo.ts
@@ -2,16 +2,19 @@ export default {
   landing: {
     title: 'Better Write',
     description:
-      'Better Write é um processador de texto para escritores criativos.',
+      'Better Write é um processador de texto para escritores criativos. Crie como quiser, para o que quiser.',
+    alt: 'Logo da aplicação betterwrite.io',
   },
   editor: {
     title: 'Better Write - Editor',
     description:
-      'Better Write é um processador de texto para escritores criativos.',
+      'Better Write é um processador de texto para escritores criativos. Crie como quiser, para o que quiser.',
+    alt: 'Logo da aplicação betterwrite.io',
   },
   '404': {
     title: 'Better Write - 404 :(',
     description:
-      'Better Write é um processador de texto para escritores criativos.',
+      'Better Write é um processador de texto para escritores criativos. Crie como quiser, para o que quiser.',
+    alt: 'Logo da aplicação betterwrite.io',
   },
 }