Cách thêm thẻ meta trong Nuxt.js

Thẻ meta cung cấp dữ liệu bổ sung hữu ích cho trang web. Vì thế biết cách thêm thẻ meta khi dùng Nuxt.js là việc cần thiết.

Nuxt.js là một framework mạnh mẽ trong việc xây dựng các ứng dụng Vue.js được kết xuất bên server. Ngoài việc cung cấp một nền tảng vững chắc để phát triển những app phức tạp, Nuxt.js cũng khiến việc thêm thẻ meta cho trang web trở nên dễ dàng.

Dưới đây là cách bao gồm thẻ meta trong app Nuxt để cải thiện SEO và khả năng hiển thị của trang trên mạng xã hội.

Thẻ meta là gì?

Thẻ meta là những đoạn code cung cấp thông tin về trang web. Những thẻ này nằm trong nguồn HTML, giống như nội dung của trang nhưng chúng không hiện trên trang đó.

Thẻ meta có thể cung cấp thông tin như tiêu đề trang, mô tả và từ khóa. Chúng được dùng để chuyển thông tin chia sẻ trên mạng xã hội và tối ưu hóa công cụ tìm kiếm.

Thêm thẻ meta

Trước khi đi sâu vào việc thêm thẻ meta, tạo app Nuxt.js mới. Để làm việc này, đảm bảo bạn đã cài Node,js trên thiết bị. Sau đó, mở terminal và chạy lệnh sau:

npx create-nuxt-app my-app

Điều này sẽ tạo một app Nuxt.js mới trong thư mục my-app. Làm theo lời nhắc để cấu hình app của bạn khi cần.

Thêm thẻ meta toàn cục

Một cách bao gồm thẻ meta vào app Nuxt.js là thêm chúng toàn cục. Để làm việc này, thêm một thẻ tiêu đề và hai thẻ meta: một cho nhóm ký tự, một cho cổng xem. Mở file nuxt.config.js và thêm một thuộc tính head vào đối tượng module.exports:

module.exports = {
  head: {
    title: 'My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

Thêm thẻ meta vào một trang

Đôi khi, bạn có thể chỉ muốn thêm thẻ meta vào các trang nhất định trong app. Để làm việc này, bổ sung thuộc tính head vào định nghĩa thành phần cho trang đó:

<template>
  <div>
    <h1>About Us</h1>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About Us',
    meta: [
      { name: 'description', content: 'Learn more about our company' }
    ]
  }
}
</script>

Tự động thêm thẻ meta

Thêm thẻ meta linh động cho phép bạn tạo thẻ meta cụ thể cho từng trang theo nội dung. Điều này có thể hữu ích khi bạn có nhiều trang với các kiểu nội dung khác nhau trong khi muốn tối ưu hóa chúng trên các công cụ tìm kiếm và chia sẻ lên mạng xã hội.

Ví dụ, bạn có một phần viết blog trong app Nuxt.js với nhiều bài đăng khác nhau. Để tối ưu hóa từng bài viết cho công cụ tìm kiếm và trên mạng xã hội, bạn có thể linh động tạo thẻ meta cho nó.

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
      .then(res => res.json())
    return { post }
  },
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.body },
        { hid: 'og:title', property: 'og:title', content: this.post.title },
        { hid: 'og:description', property: 'og:description', content: this.post.body },
        { hid: 'og:image', property: 'og:image', content: this.post.image },
        { hid: 'og:url', property: 'og:url', content: `https://example.com/blog/${this.post.id}` },
        { hid: 'article:published_time', property: 'article:published_time', content: this.post.date },
        { hid: 'article:author', property: 'article:author', content: this.post.author },
        { hid: 'article:section', property: 'article:section', content: this.post.category }
      ]
    }
  }
}
</script>

Bằng cách này, bạn có thể cung cấp thông tin chi tiết hơn về từng bài viết trên blog cho các công cụ tìm kiếm và nền tảng mạng xã hội. Điều này có thể giúp tăng khả năng hiển thị, tỷ lệ click và độ hấp dẫn.

Chạy ứng dụng

Sau khi đã thêm thẻ meta vào app Nuxt.js, bạn cần chạy nó để thấy những thay đổi trong hoạt động. Bạn có thể làm việc này bằng server phát triển Nuxt.js.

Để khởi động server lập trình, mở terminal, điều hướng tới danh mục app, rồi chạy lệnh sau:

npm run dev

Hành động này sẽ chạy server lập trình và mở ứng dụng trong trình duyệt web. Khi mở nguồn trang của trình duyệt và nhìn vào phần tiêu đề, bạn sẽ thấy thẻ meta.

Điều quan trọng cần ghi nhớ rằng thẻ meta được tạo bởi Nuxt.js chỉ hiện trên công cụ tìm kiếm và các nền tảng mạng xã hội khi trang hiển thị trên server. Nếu dùng kết xuất bên client, thẻ meta có thể không hiện ở những công cụ tìm kiếm, thậm chí cả nền tảng mạng xã hội.

Nhìn chung, thêm thẻ meta vào web là một việc làm hữu ích. Như bạn thấy, cách bao gồm thẻ meta trong Nuxt.js cũng rất đơn giản phải không? Hi vọng bài viết hữu ích với các bạn.