minhnt-dev: SEO

nuxt.config.ts

@@ -67,6 +67,7 @@ export default defineNuxtConfig({
     propsDestructure: true,
   },
 
+  target: 'server',
   ssr: true,
   routeRules: {
     // Tất cả các route sẽ sử dụng SSR

pages/[categories]/index.vue

@@ -11,7 +11,12 @@ const store = reactive({
 
 await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
 useHead({
-  title: () => currentPage.value.title || ''
+  title: () => currentPage.value.title || '',
+  description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
+  ogTitle: () => currentPage.value.title || '',
+  ogImage: () => '~/assets/images/thumbnail.jpg',
+  ogDescription: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
+  twitterCard: () => 'summary_large_image',
 })
 </script>
 

pages/bai-viet/[slug].vue

@@ -58,11 +58,11 @@ const loadPage = async () => {
 await useAsyncData('detail-article', () => loadPage());
 
 useSeoMeta({
-  title: () => currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
+  title: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
-  description: () => currentArticle.value?.intro,
+  description: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
-  ogTitle: () => currentArticle.value?.title,
+  ogTitle: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
-  ogImage: () => currentArticle.value?.thumbnail,
+  ogImage: () => currentArticle.value.thumbnail,
-  ogDescription: () => currentArticle.value?.intro,
+  ogDescription: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
   twitterCard: () => 'summary_large_image',
 })
 </script>

pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ADSDefault from '@/assets/images/ads.jpg'
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 import { useDynamicPageStore } from '~/stores/dynamic-page';
@@ -11,7 +12,12 @@ const store = reactive({
 
 await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
 useHead({
-  title: 'Trang chủ'
+  title: () => 'Trang chủ',
+  description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
+  ogTitle: () => 'Trang chủ',
+  ogImage: () => '~/assets/images/thumbnail.jpg',
+  ogDescription: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
+  twitterCard: () => 'summary_large_image',
 })
 </script>
 

stores/articles.ts

@@ -15,9 +15,9 @@ export const useArticleStore = defineStore("article", () => {
 
     const getArticleBySlug = async (slug: string) => {
         try {
-            const { data: article } = await useAsyncData('article', () => $fetch(`/api/articles/get-by-slug/${slug}`))
+            const article = await $fetch(`/api/articles/get-by-slug/${slug}`)
             currentArticle.value = {}
-            currentArticle.value = article.value?.item
+            currentArticle.value = article?.item
         } catch (error: any) { }
     }
 

stores/dynamic-page.ts

@@ -9,9 +9,9 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
 
     async function fetchPageByCode(slug: any) {
       try {
-        const { data: { value } } = await useAsyncData('page', () => $fetch(`/api/dynamic-page/get-by-code/${slug}`))
+        const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`)
         currentPage.value = {}
-        currentPage.value = value
+        currentPage.value = page
 
         setSectionPublished();
         setComponentPublished();