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 title và description để tối ưu hóa SEO cho blog của bạn.
Xem thêm:
- Hướng Dẫn Tạo VPS Azure Cấu Hình Cao 4h Băng Thông Khủng Miễn Phí Từ Microsoft
- 50+ thuộc tính thú vị trong CSS
- Sử dụng JavaScript Fetch API với Async/Await
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