Update seo (#81)

# What 💻 
* Improve SEO of website

app.config.ts

@@ -7,15 +7,4 @@ export default defineAppConfig({
   seo: {
     siteName: 'zkSync Docs',
   },
-  header: {
-    links: [
-      {
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/matter-labs/zksync-docs',
-        target: '_blank',
-        'aria-label': 'zkSync Docs on GitHub',
-        title: 'zkSync Docs on GitHub',
-      },
-    ],
-  },
 });

app.vue

@@ -12,20 +12,7 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
 });
 
 useHead({
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    {
-      name: 'keywords',
-      content:
-        'Documentation, Developers, Era, zkSync, ZK Stack, Matter Labs, rollup, ZK rollup, zero confirmation, ZKP, zero-knowledge proofs, Ethereum, crypto, blockchain, permissionless, L2, secure payments, scalable',
-    },
-    {
-      name: 'description',
-      content:
-        'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
-    },
-    { name: 'author', content: 'https://matter-labs.io' },
-  ],
+  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
     lang: 'en',
@@ -36,19 +23,25 @@ useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
   ogUrl: 'https://docs.zksync.io/',
-  ogImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
+  ogImageAlt: 'Hyperscaling Ethereum with ZK tech.',
+  ogDescription:
+    'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
   description:
     'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
-  twitterTitle: `%s - ${seo?.siteName}`,
   twitterDescription:
     'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
+  twitterTitle: `%s`,
   twitterCard: 'summary_large_image',
   twitterSite: '@zksync',
-  twitterCreator: '@the_matter_labs',
-  twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
+  twitterCreator: '@zkSyncDevs',
+  twitterImageAlt: 'Hyperscaling Ethereum with ZK tech.',
 });
 
-defineOgImageComponent('OgImageZK');
+defineOgImage({
+  component: 'OgImageZK',
+  title: seo?.siteName,
+  description: 'Access detailed guides, references and resources that will help you build with zkSync Era.',
+});
 </script>
 
 <template>

components/layout/DocsBase.vue

@@ -3,7 +3,6 @@ import type { NavItem } from '@nuxt/content/types';
 import { withoutTrailingSlash } from 'ufo';
 
 const route = useRoute();
-const { seo } = useAppConfig();
 const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
 
@@ -22,11 +21,19 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
     .findSurround(withoutTrailingSlash(route.path))
 );
 
+const { seo } = useAppConfig();
 useSeoMeta({
   title: page.value.title,
   ogTitle: `${page.value.title} - ${seo?.siteName}`,
   description: page.value.description,
   ogDescription: page.value.description,
+  twitterDescription: page.value.description,
+});
+
+defineOgImage({
+  component: 'OgImageZK',
+  title: page.value.title,
+  description: page.value.description,
 });
 
 const breadcrumb = computed(() =>

components/layout/Toc.vue

@@ -9,16 +9,16 @@ const props = defineProps<{
 
 const links = computed(() =>
   [
-    toc?.bottom?.edit && {
+    {
       icon: 'i-heroicons-pencil-square',
       label: 'Edit this page',
-      to: `${toc.bottom.edit}/${props.page?._file}`,
+      to: `https://github.com/matter-labs/zksync-docs/edit/staging/content/${props.page?._file}`,
       target: '_blank',
     },
-    toc?.bottom?.feedback && {
+    {
       icon: 'i-heroicons-chat-bubble-oval-left-ellipsis',
       label: 'Share feedback',
-      to: `${toc.bottom.feedback}&title=Feedback for ${props.page?.title}&body=Page: ${props.page?._path}`,
+      to: `https://github.com/matter-labs/zksync-docs/issues/new?&title=Feedback for ${props.page?.title}&body=Page: ${props.page?._path}`,
       target: '_blank',
     },
     ...(toc?.bottom?.links || []),

content/00.build/_dir.yml

@@ -0,0 +1 @@
+title: Build

content/index.yml

@@ -1,5 +1,7 @@
 title: 'zkSync Docs'
 description:
+  zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our
+  guides and tutorials, or go deep into our architecture and protocol specification.
 navigation: false
 hero:
   title: 'Unlock the Potential of Layer 2 Scaling with zkSync'

cspell-config/cspell-zksync.txt

@@ -1,6 +1,7 @@
 // zkSync-related words
 boojum
-MatterLabs
+!MatterLabs
+Matter Labs
 Zeek
 Zeeks
 zkcast

layouts/build-section.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
-const { data: navigation } = await useAsyncData('build-navigation', () => {
-  const query = queryContent({
-    _partial: false,
-    _extension: 'md',
-    where: [
-      {
-        _path: { $contains: '/build' },
-      },
-    ],
-  });
+import type { NavItem } from '@nuxt/content/types';
 
-  return fetchContentNavigation(query);
-});
-const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
+const navTree = computed(() => navigation!.value.find((nav) => nav._path === '/build')?.children || []);
 </script>
 
 <template>

layouts/ecosystem-section.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-const { data: navigation } = await useAsyncData('ecosystem-navigation', () => {
-  const query = queryContent({
-    _partial: false,
-    _extension: 'md',
-    where: [
-      {
-        _path: { $contains: '/ecosystem' },
-      },
-    ],
-  });
+import type { NavItem } from '@nuxt/content/types';
 
-  return fetchContentNavigation(query);
-});
-
-const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
+const navTree = computed(() => navigation!.value.find((nav) => nav._path === '/ecosystem')?.children || []);
 </script>
 
 <template>

layouts/zk-stack-section.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
-const { data: navigation } = await useAsyncData('zk-stack-navigation', () => {
-  const query = queryContent({
-    _partial: false,
-    _extension: 'md',
-    where: [
-      {
-        _path: { $contains: '/zk-stack' },
-      },
-    ],
-  });
+import type { NavItem } from '@nuxt/content/types';
 
-  return fetchContentNavigation(query);
-});
-const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
+const navTree = computed(() => navigation!.value.find((nav) => nav._path === '/zk-stack')?.children || []);
 </script>
 
 <template>

layouts/zksync-node-section.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
-const { data: navigation } = await useAsyncData('zksync-node-navigation', () => {
-  const query = queryContent({
-    _partial: false,
-    _extension: 'md',
-    where: [
-      {
-        _path: { $contains: '/zksync-node' },
-      },
-    ],
-  });
+import type { NavItem } from '@nuxt/content/types';
 
-  return fetchContentNavigation(query);
-});
-const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
+const navTree = computed(() => navigation!.value.find((nav) => nav._path === '/zksync-node')?.children || []);
 </script>
 
 <template>

package.json

@@ -4,8 +4,6 @@
   "description": "zkSync Docs V3",
   "version": "0.0.0",
   "license": "MIT",
-  "author": "Matter Labs",
-  "homepage": "https://zksync.io",
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",

pages/index.vue

@@ -2,6 +2,7 @@
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne());
 
 useSeoMeta({
+  titleTemplate: '',
   title: page.value?.title,
   ogTitle: page.value?.title,
   description: page.value?.description,