Một trong những điểm bán hàng lớn nhất của Nuxt.js là nó có thể giúp ứng dụng của bạn với Công cụ Tìm kiếm Tối ưu hóa (SEO) và để xếp hạng tốt hơn trên Google. Trong bài viết này, chúng tôi sẽ giới thiệu các cách thực hành tốt nhất để đảm bảo rằng ứng dụng Nuxt của bạn được thiết lập đúng để xếp hạng trên các công cụ tìm kiếm.

Tuyên bố từ chối trách nhiệm : Bài viết này không phải là hướng dẫn SEO hoặc hướng dẫn về cách xếp hạng tốt trên Google. Đây là một bài viết kỹ thuật về cách thiết lập tốt nhất các thẻ meta và chuyển hướng trong ứng dụng Nuxt của bạn, giúp ích cho SEO.

Nuxt.js giúp bạn SEO như thế nào

Trước khi chúng tôi đi sâu vào, hãy nhanh chóng tìm hiểu về Nuxt là gì và làm thế nào nó có thể giúp bạn kết hợp ứng dụng của mình cho mục đích SEO.

Ứng dụng một trang không được thiết lập cho SEO

Thông thường với Vue.js, bạn đang tạo một ứng dụng trang duy nhất . Đó là một ứng dụng hoàn toàn do JavaScript tạo ra, nơi chỉ có một tệp, trống index.html. Nội dung được đưa vào index.html sau khi JavaScript được tải ban đầu và JavaScript cũng đảm nhiệm việc chuyển tuyến.

SPA là tuyệt vời để tạo giao diện người dùng linh hoạt, nhưng khi nói đến SEO, các ứng dụng trang đơn không lý tưởng vì chúng không có nội dung ban đầu. Điều đó gây khó khăn cho Google và các trình thu thập thông tin khác (bao gồm các trình thu thập phương tiện truyền thông xã hội như Facebook) để thu thập dữ liệu trang web của bạn và hiển thị đúng trong kết quả tìm kiếm.

Nuxt.js giúp đơn giản hóa việc tạo một ứng dụng phổ quát

Một ứng dụng phổ biến là về việc tải trước ứng dụng của bạn trên máy chủ web và gửi HTML được hiển thị dưới dạng phản hồi cho trình duyệt cho mọi tuyến đường trong ứng dụng của bạn để cải thiện SEO, giúp tải nhanh hơn, cùng với nhiều lợi ích khác .

Với một ứng dụng phổ quát, sẽ có nội dung trên trang như <title>thẻ và <meta>thẻ trong <head>và <h1>thẻ <body>trước khi bất kỳ JavaScript nào được tải. Những thẻ này giúp trình thu thập thông tin xác định những gì trên trang.

Cách Nuxt.js xử lý phần đầu cho tất cả các trang của bạn

Nuxt sử dụng một thư viện gọi là vue-meta để xử lý <head>phần tử trong mỗi trang của bạn . Một trang chỉ là thuật ngữ của Nuxt cho một tuyến đường và mỗi trang nằm trong một thư mục trang.

Nuxt cung cấp cho bạn ba cách để thiết lập thành <head>phần trong các trang của ứng dụng. Hãy xem xét chúng ngay bây giờ.

1) Thiết lập thẻ meta mặc định cho tất cả các trang

Không có gì lạ khi các trang khác nhau trong ứng dụng của bạn chia sẻ một số thẻ meta giống nhau. Nuxt cho phép bạn thiết lập mặc định cho từng trang của mình bằng cách thiết lập thuộc headtính trong nuxt.config.jstệp.

module.exports = { 
  head: { 
    titleTemplate: '% s - Nuxt.js', 
    meta: [// Mỗi đối tượng trong mảng này là thẻ meta riêng 
      {charset: 'utf-8'}, 
      {name: 'viewport' , nội dung: 'width = device-width, scale scale = 1'}, 
      {hid: 'description', name: 'description', content: 'Meta description'} 
    ] 
  } 
};

Nhấn vào đây để xem tất cả các thuộc tính mà bạn có thể xác định bên trong thuộc tính head.

Lưu ý: Nuxt.js sử dụngheadcho tên của tài sản. sử dụng vue-metametaInfo. Đó là cùng một tài sản.

2) Thiết lập thẻ meta cho từng trang của bạn

Bên trong mỗi trang Nuxt của bạn, bạn có thể xác định một head phương thức . Bạn có thể tùy chỉnh thủ công các thẻ đầu cho một trang riêng lẻ và Nuxt sẽ ghi đè lên bất cứ thứ gì bạn đặt làm mặc định trong nuxt.config.jstệp.

Đây là một About.vuetệp ví dụ với các thẻ meta riêng của nó trong headphương thức:

<template> 
  <h1> Giới thiệu về trang </ h1> 
</ template> <script> 
xuất mặc định { 
  head () { 
    return { 
      title: 'About Us - Nuxt.js', 
      meta: [ 
        {hid: 'description', name : 'description', nội dung: 'Giới thiệu về công ty của chúng tôi Nuxt.js'} 
      ] 
    } 
  } 
} 
</ script>

3) Thiết lập thẻ meta cho các trang động của bạn

Bạn có thể tùy chỉnh thêm các thẻ meta của mình với các trang động - các trang có một tuyến đường có thể được hiển thị khác nhau. Một trang hồ sơ người dùng có thể là một ví dụ.

Các tuyến động được xác định bằng cách thêm tiền tố vào thành phần hoặc thư mục .vue của bạn trong thư mục trang có dấu gạch dưới.

trang / 
- | người dùng / 
----- | _username.vue

Điều này sẽ tạo mã tuyến đường Vue.js của bạn như sau:

bộ định tuyến: { 
  tuyến đường: [{ 
    name: 'users-id', 
    đường dẫn: '/ users /: tên người dùng?', 
    thành phần: 'page / users / _username.vue' 
  }] 
}

Và bên trong headphương thức, bạn có quyền truy cập vào dữ liệu thành phần của mình this. Bạn có thể sử dụng dữ liệu bạn có quyền truy cập vào bên trong thuộc thistính để tùy chỉnh cách thẻ meta của bạn được hiển thị với dữ liệu của thành phần.

Dưới đây là ví dụ về cách thẻ meta cho trang hồ sơ người dùng đó có thể được hiển thị:

<script> 
  head () { 
    let user = this.user; 
    
    return { 
      title: `$ {user.fullName} @ ($ {user.userName}) - Nuxt.js`, 
      meta: [{ 
        hid:` iOSUrl`, 
        property: 'al: ios: url', 
        nội dung: `myapp : // user? screen_name = $ {user.userName} ` 
      }, 
      { 
        hid:` description`, 
        name: 'description', 
        content: `$ {user.fullName} 'hồ sơ công khai tại Nuxt.js` 
      }] 
    } 
  } 
</ script>

Ẩn là gì và nó giúp SEO như thế nào?

Bạn có thể đã nhận thấy thuộc hidtính trong các ví dụ về thẻ meta ở trên. Đó là một tài sản đang được sử dụng để giúp giảm thiểu vue-metahành vi mặc định .

Theo mặc định, khi sử dụng vue-meta, nó sẽ tạo các thẻ trùng lặp thay vì thay thế thẻ gốc. Nhưng Google có thể phạt bạn vì có các thẻ trùng lặp khi thu thập dữ liệu trang web của bạn, vì vậy tốt nhất là luôn có một duy nhấthidthuộc tính trên mỗi thẻ meta của bạn để xác định duy nhất chúng. Cóhid tài sản sẽ báo hiệu cho vue-meta để thay thế thẻ thay vì sao chép nó.

Nhấn vào đây để tìm hiểu thêm về các thẻ meta trùng lặp và cách hidcó thể giúp bạn tránh chúng.

Xử lý các chuyển hướng với Nuxt.js

Theo HubSpot , chuyển hướng 301 là chuyển hướng vĩnh viễn từ URL này sang URL khác. 301 chuyển hướng gửi khách truy cập trang web và công cụ tìm kiếm đến một URL khác với URL ban đầu họ nhập vào trình duyệt của họ hoặc được chọn từ trang kết quả của công cụ tìm kiếm.

Chuyển hướng 301 thường được sử dụng khi cấu trúc trang web của bạn thay đổi và bạn vẫn muốn duy trì sức mạnh xếp hạng của liên kết ban đầu.

Nuxt giúp bạn trong trường hợp này bằng cách thiết lập cho bạn một thuộc serverMiddlewaretính bên trong nuxt.config.jstệp của bạn . Các serverMiddlewarebất động sản sẽ giúp bạn thiết lập middleware mà sẽ chạy khi trang được trả lại trên server-side.

Đây là một ví dụ về việc sử dụng thuộc tính này để thiết lập chức năng xử lý 301 chuyển hướng cho ứng dụng của bạn.

module.exports = { 
  serverMiddleware: [ 
    '~ / servermiddleware / seo.js' 
  ] 
};

Bạn có thể xác định các tuyến đường cần được chuyển hướng bên trong tệp được gọi /301.jsonvà nhập nó vào seo.jsphần mềm trung gian.

[ 
  { "Từ": "/ cũ", "thành": "/ mới"}, 
  { "từ": "/ veryold", "thành": "/ verynew"}, 
  { "từ": "/ too- cũ "," đến ":" / mới "} 
]

Sau đó, bạn có thể để tệp chạy qua các tuyến đường mà bạn đã xác định 301.jsonvà yêu cầu trả về 301 phản hồi cho mỗi tuyến, cùng với các Tiêu đề HTTP thích hợp.

const redirects = Yêu cầu ('../ 301.json'); module.exports = function (req, res, next) { 
  
  const redirect = redirects.find (r => r.from === req.url);   if (redirect) { 
    console.log (`redirect: $ {redirect.from} => $ {redirect.to}`); 
    res.writeHead (301, {Vị trí: redirect.to}); 
    res.end (); 
  } khác { 
    next (); 
  } }

Bấm vào đây để tìm hiểu thêm về phần mềm trung gian Nuxt.js và cách nó có thể giúp bạn nhiều hơn là chỉ chuyển hướng.

Hiệu ứng SEO khi kết xuất ứng dụng của bạn ở chế độ spa

Có nhiều chế độ xây dựng trong ứng dụng Nuxt. Bạn có thể chọn hiển thị ứng dụng của mình dưới dạng universal, hoặc spa.

Những tác động của việc quản lý tất cả các thẻ trong <head>nếu bạn chọn kết xuất ứng dụng của mình ở spachế độ là gì?

Vì kết xuất phía máy chủ không diễn ra, bạn sẽ không nhận được bất kỳ lợi ích nào của việc có nội dung ban đầu trên trang của mình. vue-metavẫn xử lý công việc của mình <head>, nhưng nếu bạn kết xuất ứng dụng của mình dưới dạng một ứng dụng trang, ban đầu sẽ không có nội dung nào trên trang vì tất cả các thẻ sẽ được tạo sau khi JavaScript được tải. Các hiệu ứng duy nhất là hoàn toàn phía trước. Ví dụ: cập nhật thẻ tiêu đề khi người dùng đã thay đổi lượt xem.

Phần kết luận

Nuxt cung cấp cho bạn nhiều quyền kiểm soát đối với cách bạn kết xuất <head>phần tử trong ứng dụng phổ quát của mình, giúp ích cho SEO. Bạn có nhiều tùy chọn để đặt mặc định toàn cầu bên trong nuxt.config.jstệp và bạn cũng có quyền truy cập vào một headphương thức trong mỗi trang riêng lẻ nơi bạn có thể tùy chỉnh thêm mọi thứ. Cuối cùng, bạn có thể thiết lập một serverMiddlewareứng dụng có thể chăm sóc những thứ như chuyển hướng 301 để duy trì sức mạnh xếp hạng của liên kết.

VueM Abbey.com sẽ tạo nội dung trên các ứng dụng Nuxt trong những tháng tiếp theo, tạo một tài khoản miễn phí ngay hôm nay và được thông báo khi phát hành.