Thực tiễn tốt nhất cho SEO Nuxt.js

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ẽ thảo luận về các thực tiễn 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ố miễn trừ 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 tham gia, hãy nhanh chóng tìm hiểu về Nuxt và cách nó có thể giúp bạn kết hợp ứng dụng của mình cho mục đích SEO.

Các ứng dụng trang đơn được cài đặt 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, trong đó chỉ có một tệp duy nhất là một tệp trống.html. Nội dung được điền 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ư thẻ và thẻ <meta> trong thẻ <head> và <h1> trong <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.</p><h3>Cách Nuxt.js xử lý phần đầu cho tất cả các trang của bạn</h3><p>Nuxt sử dụng thư viện có tên vue-meta để xử lý phần tử <head> trong mỗi trang của bạn. Một trang chỉ là thuật ngữ Nuxt từ cho một tuyến đường và mỗi trang sống trong một thư mục trang.</p><p>Nuxt cung cấp cho bạn ba cách để thiết lập phần tử <head> trong các trang ứng dụng của bạn. Hãy để chúng tôi xem xét chúng ngay bây giờ.</p><h3>1) Thiết lập thẻ meta mặc định cho tất cả các trang</h3><p>Nó không phổ biến cho 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 tính head trong nuxt.config.jsfile.</p><pre>module.exports = {   cái đầu: {     titleTemplate: '% s - Nuxt.js',     meta: [// Mỗi đối tượng trong mảng này là thẻ meta riêng của nó       {bộ ký tự: 'utf-8'},       {name: 'viewport', nội dung: 'width = chiều rộng thiết bị, tỷ lệ ban đầu = 1'},       {hid: 'mô tả', tên: 'mô tả', nội dung: 'Mô tả meta'}     ]   } };</pre><p>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.</p><p>Lưu ý: Nuxt.js sử dụng đầu cho tên của tài sản. vue-meta sử dụng metaInfo. Nó cùng một tài sản.</p><h3>2) Thiết lập thẻ meta cho từng trang của bạn</h3><p>Bên trong mỗi trang Nuxt của bạn, bạn có thể xác định phương thức head. 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.jsfile.</p><p>Ở đây, một ví dụ về tập tin About.vue với các thẻ meta của riêng nó trong phương thức head:</p><pre><mẫu>   <h1> Giới thiệu về trang </ h1> </ mẫu></pre><pre><tập lệnh> xuất mặc định {   cái đầu () {     trở về {       tiêu đề: 'Giới thiệu - 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></pre><h3>3) Thiết lập thẻ meta cho các trang động của bạn</h3><p>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 trong đó 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ụ.</p><p>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.</p><pre>trang / - | người dùng / ----- | _username.vue</pre><p>Điều này sẽ tạo mã tuyến đường Vue.js của bạn như sau:</p><pre>bộ định tuyến: {   các tuyến đường: [{     tên: 'id người dùng',     đường dẫn: '/ users /: tên người dùng?',     thành phần: 'trang / người dùng / _username.vue'   }] }</pre><p>Và bên trong phương thức head, bạn Wad có quyền truy cập vào dữ liệu thành phần của bạn với điều này. 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 tính này để tùy chỉnh cách hiển thị thẻ meta của bạn với dữ liệu của thành phần.</p><p>Dưới đây, một ví dụ về cách các thẻ meta cho trang hồ sơ người dùng đó có thể được hiển thị:</p><pre><tập lệnh>   cái đầu () {     cho phép người dùng = this.user;          trở về {       tiêu đề: `$ {user.fullName} @ ($ {user.userName}) - Nuxt.js`,       meta: [{         ẩn: `iOSUrl`,         tài sản: 'al: ios: url',         nội dung: `myapp: // user? screen_name = $ {user.userName}`       },       {         ẩn: `mô tả`,         tên: 'mô tả',         nội dung: hồ sơ công khai của `$ {user.fullName} tại Nuxt.js`       }]     }   } </ script></pre><h3>Cái gì được giấu và nó giúp SEO như thế nào?</h3><p>Bạn có thể đã nhận thấy thuộc tính ẩn trong các ví dụ về thẻ meta ở trên. Đó là một tài sản mà LỚP đang được sử dụng để giúp giảm thiểu hành vi vue-meta mặc định.</p><p>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 thuộc tính ẩn duy nhất trên mỗi thẻ meta của bạn để nhận dạng duy nhất chúng. Có thuộc tính ẩn sẽ báo hiệu cho vue-meta để thay thế thẻ thay vì sao chép nó.</p><p>Nhấn vào đây để tìm hiểu thêm về các thẻ meta trùng lặp và cách ẩn có thể giúp bạn tránh chúng.</p><h3>Xử lý các chuyển hướng với Nuxt.js</h3><p>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.</p><p>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.</p><p>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 tính serverMiddleware bên trong tệp nuxt.config.js của bạn. Thuộc tính serverMiddleware giúp bạn thiết lập phần mềm trung gian sẽ chạy khi trang được hiển thị ở phía máy chủ.</p><p>Dưới đây, một ví dụ về việc sử dụng thuộc tính này để thiết lập một hàm xử lý 301 chuyển hướng cho ứng dụng của bạn.</p><pre>module.exports = {   phần mềm máy chủ: [     '~ / servermiddleware / seo.js'   ] };</pre><p>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ó tên /301.json và nhập nó vào phần mềm trung gian seo.js.</p><pre>[   {"từ": "/ cũ", "đến": "/ mới"},   {"từ": "/ Veryold", "đến": "/ Verynew"},   {"từ": "/ quá cũ", "đến": "/ mới"} ]</pre><p>Sau đó, bạn có thể để tệp chạy qua các tuyến đường mà bạn đã xác định trong 301.json và nó sẽ trả về phản hồi 301 cho mỗi tuyến, cùng với các Tiêu đề HTTP thích hợp.</p><pre>const redirects = Yêu cầu ('../ 301.json');</pre><pre>module.exports = function (req, res, next) {      const redirect = redirects.find (r => r.from === req.url);</pre><pre>  if (chuyển hướng) {     console.log (`redirect: $ {redirect.from} => $ {redirect.to}`);     res.writeHead (301, {Vị trí: redirect.to});     res.end ();   } khác {     kế tiếp();   }</pre><pre>}</pre><p>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.</p><h3>Hiệu ứng SEO khi kết xuất ứng dụng của bạn ở chế độ spa</h3><p>Có nhiều chế độ xây dựng trong các ứng dụng Nuxt. Bạn có thể chọn hiển thị ứng dụng của mình dưới dạng phổ quát hoặc spa.</p><p>Những tác động của việc quản lý tất cả các thẻ trong <head> là gì nếu bạn chọn hiển thị ứng dụng của mình ở chế độ spa?</p><p>Vì kết xuất phía máy chủ không diễn ra, bạn đã giành được bất kỳ lợi ích nào của việc có nội dung ban đầu trên trang của bạn. vue-meta vẫn thực hiện công việc xử lý <head>, nhưng nếu bạn đang hiển thị ứng dụng của mình dưới dạng một ứng dụng trang, thì ban đầu, 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.</p><h3>Phần kết luận</h3><p>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 phần tử <head> 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 tệp nuxt.config.js và bạn cũng có quyền truy cập vào một phương thức head 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 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.</p><p>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 nó phát hành.</p><h3>Hãy đọc tiếp</h3><ul><li>10 lý do nên sử dụng Nuxt.js</li><li>VuePress so với Nuxt.js</li><li>Cách tạo chuyển tiếp Vue.js</li></ul></div><div class="neighbor-articles"><h4 class="ui header">Xem thêm</h4><a href="/deal/best-practices-for-securing-your-gemini-account-c8ca1d/" title="Thực tiễn tốt nhất để bảo mật tài khoản Song Tử của bạn">Thực tiễn tốt nhất để bảo mật tài khoản Song Tử của bạn</a><a href="/deal/top-13-podcast-hosting-sites-in-2019-free-month-offers-877563/" title="13 trang web lưu trữ Podcast hàng đầu năm 2019 + Ưu đãi tháng miễn phí">13 trang web lưu trữ Podcast hàng đầu năm 2019 + Ưu đãi tháng miễn phí</a><a href="/deal/8-methods-or-comments-for-on-getting-user-experience-and-feedback-how-the-best-crowdfunding-77fcc3/" title="8 Phương pháp hoặc Nhận xét cho / về Lấy trải nghiệm và phản hồi của người dùng: Cách thức cộng đồng tốt nhất">8 Phương pháp hoặc Nhận xét cho / về Lấy trải nghiệm và phản hồi của người dùng: Cách thức cộng đồng tốt nhất</a><a href="/deal/7-telltale-signs-you-re-mentally-strong-enough-to-become-your-best-future-self-f0ec6a/" title="7 dấu hiệu nhận biết bạn mạnh mẽ về tinh thần đủ để trở thành bản thân tương lai tốt nhất của bạn">7 dấu hiệu nhận biết bạn mạnh mẽ về tinh thần đủ để trở thành bản thân tương lai tốt nhất của bạn</a><a href="/deal/best-peer-to-peer-lending-in-europe-save-time-avoid-my-mistakes-e5d3aa/" title="Cho vay ngang hàng tốt nhất ở châu Âu: Tiết kiệm thời gian, tránh những sai lầm của tôi">Cho vay ngang hàng tốt nhất ở châu Âu: Tiết kiệm thời gian, tránh những sai lầm của tôi</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://uk.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>