Thêm meta tags cho website Nuxt JS

Meta Tags là gì?

Meta Tags: là các thẻ Meta được sử dụng ở phần Header của Html nhằm tăng khả năng tìm kiếm các từ khoá của các công cụ tìm kiếm. Có ba loại thẻ Meta chính là thẻ Meta Title, Meta Description và thẻ Meta Keywords.

Ngoài ra còn có các thẻ meta hỗ trợ khác nữa, giúp tối ưu SEO website hiệu quả hơn

Làm thế nào để thêm meta tags cho website Nuxt JS?

Để thực hành luôn thì mình lấy lại project trước trong bài viết Tạo Blog đơn giản với Nuxt JS và WordPress API

Việc cấu hình các thẻ meta trong Nuxt Js trên mỗi trang/url rất dễ dàng. Hãy bắt đầu với meta global của trang web trong nuxt.config.js

Đây là những gì mình đã cấu hình trên project trước.

  /*
   ** Headers of the page
   */
  head: {
    title: 'Minimal blog Nuxt JS + WordPress API',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          'Tập trung cung cấp các nội dung liên quan đến công nghệ mới, các tools, tuts hỗ trợ cho lập trình viên nói riêng và người yêu công nghệ nói chung.'
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content: 'vuejs, nuxt, javascript, tutorials, development, software'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

nhìn vào đoạn config trên thì ta có thể thấy được title, meta charset, viewport, description, keywords và <link> tag.

Giá trị title ánh xạ trực tiếp vào HTML <title></ title>, sau đó mỗi giá trị trong mảng meta sẽ tạo ra một thẻ <meta></ meta> mới với thuộc tính tên và nội dung tương ứng. Và tương tự <link> cũng vậy.

Kết quả là trên website của chúng ta trông như thế này:

<title data-n-head="true">Minimal blog Nuxt JS + WordPress API</title>
<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="true" data-hid="description" name="description" content="Tập trung cung cấp các nội dung liên quan đến công nghệ mới, các tools, tuts hỗ trợ cho lập trình viên nói riêng và người yêu công nghệ nói chung.">
<meta data-n-head="true" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, tutorials, development, software">

hid trong Nuxt JS?

Có lẽ bạn đang tự hỏi về tên khóa hid trong nuxtjs. Nó rất cần thiết nếu bạn muốn ghi đè bất kỳ thẻ meta nào bằng thẻ khác. Ví dụ:

Ở homepage bạn có thể để title và thẻ meta description như trên. Nhưng ở các bài viết bạn viết thay đổi titledescription để tối ưu hóa SEO cho blog của bạn.

Xem thêm:

Bây giờ mở file pages/p/_slug.vue trong project lên, có một hàm đặc biệt gọi là head() chịu trách nhiệm trả về dữ liệu head tag tùy chỉnh. Xem đoạn code dưới đây để hiểu rõ hơn:

  head() {
    const post = this.post
    return this.isValidPost()
      ? {
          title: post.title.rendered,
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: post.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, '')
            },
            {
              hid: 'og:title',
              property: 'og:title',
              content: post.title.rendered
            },
            {
              hid: 'og:site_name',
              property: 'og:site_name',
              content: 'Minimal Blog Nuxt JS + WordPress API'
            },
            {
              hid: 'og:url',
              property: 'og:url',
              content: process.env.baseUrl + this.$nuxt.$route.fullPath
            },
            {
              hid: 'og:description',
              property: 'og:description',
              content: post.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, '')
            },
            {
              hid: 'og:type',
              property: 'og:type',
              content: 'article'
            },
            {
              hid: 'og:image',
              property: 'og:image',
              content: post._embedded['wp:featuredmedia'][0].source_url
            }
          ]
        }
      : {}
  },

Ở đoạn code trên, method this.isValidPost() mình thêm vào để check post có hợp lệ, có tồn tại hay không. Các dư liệu được lấy từ post và ánh xạ tới các thuộc tính như title, description,…

Chúng ta có thể ghi đè lên các thẻ meta mô tả và từ khóa được xác định trên toàn cầu bằng cách đảm bảo các thẻ hid ở đây khớp với các giá trị tương tự ở file nuxt config.

Về cơ bản là vậy! Với thiết lập cơ bản này, giờ đây bạn có thể có các thẻ meta tùy chỉnh cho mỗi bài đăng trên blog

Xem demo tại đây: https://techtalk.ntcde.com/blog

Project on github: https://github.com/trongcong/nuxtjs-minimal-blog

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.