Tiếp tục với Bài 23 – Tối ưu SEO với useHead(), OpenGraph, và meta động trong NuxtJS. SEO là yếu tố quan trọng giúp bài viết/blog/app của bạn hiển thị tốt trên Google, có preview đẹp trên mạng xã hội, và dễ chia sẻ, tăng traffic tự nhiên.

---

BÀI 23: TỐI ƯU SEO VỚI useHead() & useSeoMeta()

---

1. Mục tiêu bài học

• Hiểu cách gán tiêu đề (title), mô tả (description), ảnh đại diện cho từng trang
• Tối ưu cho cả Google Search (SEO) và mạng xã hội (Facebook, Zalo, Twitter…)
• Dùng useSeoMeta() và useHead() đúng cách

---

2. Dùng useHead() trong component

📋 Copy<script setup>
useHead({
  title: 'Giới thiệu về Nuxt 3',
  meta: [
    { name: 'description', content: 'Tìm hiểu cách Nuxt hoạt động và triển khai SEO' },
    { property: 'og:title', content: 'Giới thiệu về Nuxt 3' },
    { property: 'og:description', content: 'Khám phá kiến trúc Nuxt, tối ưu SSR và routing' },
    { property: 'og:image', content: 'https://example.com/nuxt-cover.jpg' },
    { name: 'twitter:card', content: 'summary_large_image' }
  ]
})
</script>

---

3. Dùng useSeoMeta() – cách viết ngắn hơn

📋 Copy<script setup>
useSeoMeta({
  title: 'Nuxt và SEO',
  ogTitle: 'Nuxt và SEO là bạn thân',
  description: 'Cách tối ưu SEO với Nuxt 3',
  ogDescription: 'Tối ưu OpenGraph, Twitter Card, Description',
  ogImage: 'https://example.com/banner.jpg',
  twitterCard: 'summary_large_image'
})
</script>

useSeoMeta() tự động chuyển thành chuẩn HTML meta tags.

---

4. SEO động cho từng bài viết Markdown

Giả sử mỗi bài viết có frontmatter như sau:

📋 Copy---
title: Làm chủ Nuxt Content
description: Hướng dẫn viết blog chuyên nghiệp bằng Nuxt
image: /images/nuxt-banner.jpg
---

Trong pages/blog/[slug].vue:

📋 Copy<script setup>
const route = useRoute()
const { data: post } = await useAsyncData(() =>
  queryContent('/blog').where({ _path: `/blog/${route.params.slug}` }).findOne()
)

useSeoMeta({
  title: post.value.title,
  description: post.value.description,
  ogTitle: post.value.title,
  ogDescription: post.value.description,
  ogImage: `https://yourdomain.com${post.value.image || '/default.jpg'}`,
  twitterCard: 'summary_large_image'
})
</script>

---

5. Gán title mặc định toàn site

Trong nuxt.config.ts:

📋 Copyexport default defineNuxtConfig({
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'Trang web Nuxt 3 chuyên nghiệp' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  }
})

→ Tất cả trang sẽ có tiêu đề này nếu không override bằng useHead().

---

6. Tạo ảnh preview đẹp cho mạng xã hội

Facebook, Zalo, Twitter sẽ hiện preview đẹp nếu bạn thêm:

📋 Copy{
  property: 'og:image',
  content: 'https://yourdomain.com/images/share-cover.jpg'
}

Ảnh nên có size 1200×630 và đặt tại link công khai (không localhost).

---

7. Meta khác bạn có thể thêm

Meta tag	Tác dụng
og:title	Tiêu đề khi chia sẻ Facebook
og:description	Mô tả khi chia sẻ
og:image	Ảnh đại diện khi share
og:type	article hoặc website
twitter:card	Dạng hiển thị Twitter (thường là summary_large_image)
author, robots	Gợi ý thêm

---

Bạn đã học được

• Phân biệt useHead() và useSeoMeta()
• Tạo meta động theo từng bài viết
• Gán title, description, image, open graph
• Thiết lập meta mặc định trong nuxt.config.ts
• Tối ưu preview mạng xã hội: Facebook, Twitter, Zalo

---

Bài tập mở rộng

1. Gán SEO meta cho từng trang /about, /contact
2. Mỗi bài viết Markdown cần có title, description, image
3. Test chia sẻ link lên Facebook để xem preview
4. Tạo fallback image nếu bài viết không có ảnh