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.

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:

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:

Ở đ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://nuxtjs-minimal-blog.ntc.now.sh/blog

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

Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Styling Placeholder Text của thẻ input với CSS Cài đặt và Active WebStorm 2019.2.4 với License key 50+ thuộc tính thú vị trong CSS Cài đặt WordPress với Caddy web server trên Ubuntu 18.04

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.