Nuxt.js là một framework mạnh mẽ để xây dựng các ứng dụng Vue.js được kết xuất phía máy chủ. Ngoài việc cung cấp nền tảng vững chắc để xây dựng các ứng dụng phức tạp, Nuxt.js còn giúp bạn dễ dàng thêm thẻ meta vào các trang của mình.
Tìm hiểu cách bao gồm các thẻ meta trong ứng dụng Nuxt của bạn để cải thiện SEO và khả năng hiển thị trang web của bạn trên phương tiện truyền thông xã hội.
Thẻ meta là những đoạn mã cung cấp thông tin về một trang web. Các thẻ này có trong nguồn HTML, giống như nội dung trang của bạn, nhưng chúng không hiển thị trên chính trang đó.
Thẻ meta có thể cung cấp thông tin như tiêu đề trang, mô tả và từ khóa. Chúng cũng được sử dụng để cung cấp 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.
Trước khi đi sâu vào việc thêm thẻ meta, hãy tạo một ứng dụng Nuxt.js mới. Để làm được điều đó, hãy đảm bảo rằng bạn đã cài đặt Node.js trên thiết bị của mình. Sau đó, mở terminal của bạn và chạy lệnh sau:
npx create-nuxt-app my-app
Thao tác này sẽ tạo một ứng dụng Nuxt.js mới trong thư mục có tên ứng dụng của tôi. Làm theo lời nhắc để định cấu hình ứng dụng của bạn nếu cần.
Thêm thẻ meta trên toàn cầu
Một cách để thêm thẻ meta vào ứng dụng Nuxt.js của bạn là thêm chúng trên toàn cầu. Để thực hiện việc này, hãy thêm thẻ tiêu đề và hai thẻ meta: một cho bộ ký tự và một cho chế độ xem. Mở ra của bạn nuxt.config.js tệp và thêm thuộc tính head vào module.exports sự vật:
module.exports = {
head: {
title: 'My App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
Thêm thẻ meta trên các trang đơn
Đôi khi, bạn có thể chỉ muốn thêm thẻ meta vào các trang cụ thể trong ứng dụng của mình. Để làm điều này, bạn có thể thêm 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 động các thẻ meta cho phép bạn tạo các thẻ meta cụ thể cho từng trang, tùy thuộc vào nội dung. Điều này có thể hữu ích khi bạn có nhiều trang với các loại nội dung khác nhau và bạn muốn tối ưu hóa chúng cho các công cụ tìm kiếm và chia sẻ trên mạng xã hội.
Ví dụ: giả sử bạn có một phần blog trong ứng dụng Nuxt.js với nhiều bài đăng. Để tối ưu hóa từng bài đăng trên blog cho các công cụ tìm kiếm và phương tiện truyền thông xã hội, bạn có thể tự động tạo thẻ meta cho bài đăng đó.
<template>
<div>
<h1></h1>
<p></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 tự động tạo các thẻ meta này, bạn có thể cung cấp thông tin chi tiết hơn về từng bài đăng trên blog cho các công cụ tìm kiếm và nền tảng truyền thông xã hội. Điều này có thể giúp tăng khả năng hiển thị, tỷ lệ nhấp và mức độ tương tác cho các bài đăng trên blog của chúng tôi.
Chạy ứng dụng
Khi bạn đã thêm các thẻ meta vào ứng dụng Nuxt.js của mình, bạn sẽ cần chạy nó để xem các thay đổi đang hoạt động. Bạn có thể làm như vậy bằng cách sử dụng máy chủ phát triển Nuxt.js, tuân theo quy trình tương tự như ứng dụng React.js.
Để khởi động máy chủ phát triển, hãy mở thiết bị đầu cuối của bạn, điều hướng đến thư mục ứng dụng của bạn và chạy lệnh sau:
npm run dev
Thao tác này sẽ khởi động máy chủ phát triển và khởi chạy ứng dụng của bạn trong trình duyệt web. Nếu bạn mở nguồn trang của trình duyệt và nhìn vào phần đầu, bạn sẽ thấy các thẻ meta.
Điều quan trọng cần lưu ý là các thẻ meta do Nuxt.js tạo ra chỉ hiển thị với các công cụ tìm kiếm và nền tảng truyền thông xã hội khi trang hiển thị ở phía máy chủ. Nếu bạn đang sử dụng hiển thị phía máy khách, các thẻ meta có thể không hiển thị với các công cụ tìm kiếm và nền tảng truyền thông xã hội.
Cùng với việc cải thiện giao diện trang web của bạn khi chúng được chia sẻ trên nền tảng truyền thông xã hội, thẻ meta có thể cải thiện xếp hạng trang web của bạn trong kết quả của công cụ tìm kiếm. Bằng cách cung cấp thông tin thẻ meta chính xác và có liên quan, bạn có thể giúp các công cụ tìm kiếm hiểu nội dung của các trang web của chúng tôi và xếp hạng chúng cao hơn cho các truy vấn tìm kiếm có liên quan.
