Các phương pháp hay nhất cho Nuxt.js SEO

Thứ Ba, 17/11/2020

Tram Ho

How Nuxt.js helps you with SEO

Trước khi chúng ta đi vào vấn đề chính trong bài viết thì trước hết hãy nhanh chóng tìm hiểu Nuxtjs là gì và nó có thể giúp ứng dụng đáp ứng cho mục đích SEO như thế nào.

Single Page Applications aren’t set up for SEO

Thông thường với Vue.js, bạn sẽ tạo một single page application (SPA). Đó là một ứng dụng hoàn toàn do JavaScript generate và chỉ trong một file index.html trống. Nội dung được render vào index.html sau khi JavaScript được load và JavaScript cũng đảm nhận việc switch giữa các router.

Các SPA rất tốt để tạo UI người dùng một cách linh hoạt, nhưng khi nói đến SEO, thì SPA không lý tưởng vì chúng không có initial content. Đ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ác trình thu thập dữ liệu truyền thông xã hội như Facebook) trong việc thu thập dữ liệu trang web của bạn và hiển thị nó chính xác trong kết quả tìm kiếm.

Nuxt.js makes it simple to create a universal application

Một universal application là sẽ tải trước ứng dụng lên trên web server và gửi HTML được hiển thị dưới dạng response cho trình duyệt để mỗi route trong ứng dụng của bạn improve SEO, giúp loading nhanh hơn, cùng với nhiều lợi ích khác.

Với một universal application, content trên page sẽ có một số thẻ như <title> và thẻ <meta> trong thẻ <head> và <h1> trong <body> trước khi bất kỳ JavaScript nào được load. Các thẻ đó giúp trình thu thập thông tin xác định nội dung trên page.

How Nuxt.js handles the head for all your pages

Nuxtjs sử dụng một thư viện có tên là vue-meta để xử lý thẻ <head> ở mỗi page. Page chỉ là thuật ngữ của Nuxtjs để chỉ một route và mỗi page nằm bên trong một pages folder.
Nuxtjs 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. Cùng xem chúng là gì ở dưới đây.

1) Setting up default meta tags for all pages

Không có gì lạ khi các page khác nhau trong application chia sẻ một số thẻ meta giống nhau. Nuxtjs cho phép bạn thiết lập các giá trị mặc định cho mỗi page của mình bằng cách thiết lập thuộc tính head trong file nuxt.config.js.

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  head<span class="token operator">:</span> <span class="token punctuation">{</span>
    titleTemplate<span class="token operator">:</span> <span class="token string">'%s - Nuxt.js'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// Each object in this array is its own meta tag</span>
      <span class="token punctuation">{</span> charset<span class="token operator">:</span> <span class="token string">'utf-8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'viewport'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'width=device-width, initial scale=1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> hid<span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Meta description'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

module.exports = {

head: {

titleTemplate: '%s - Nuxt.js',

meta: [ // Each object in this array is its own meta tag

{ charset: 'utf-8' },

{ name: 'viewport', content: 'width=device-width, initial scale=1' },

{ hid: 'description', name: 'description', content: 'Meta description' }

]

}

};

Bạn có thể vào đây để xem tất cả các thuộc tính mà bạn có thể định nghĩa bên trong thuộc tính head.
Lưu ý: Nuxt.js sử dụng head cho tên của thuộc tính. vue-meta sử dụng metaInfo. Đó là cùng một property.

2) Setting up meta tags for your pages individually

Bên trong mỗi trang Nuxtjs của mình, bạn có thể định nghĩa head method. Bạn cũng có thể tùy chỉnh thủ công các thẻ head cho một page riêng lẻ và Nuxtjs sẽ ghi đè lại những setting mà bạn đặt làm mặc định trong file nuxt.config.js.

Dưới đây là ví dụ về file About.vue với các thẻ meta của riêng nó trong head method:

&lt;template&gt;
  &lt;h1&gt;About Page&lt;/h1&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  head () {
    return {
      title: 'About Us - Nuxt.js',
      meta: [
        { hid: 'description', name: 'description', content: 'About our company Nuxt.js ' }
      ]
    }
  }
}
&lt;/script&gt;

<h1>About Page</h1>

</template>

export default {

head () {

return {

title: 'About Us - Nuxt.js',

meta: [

{ hid: 'description', name: 'description', content: 'About our company Nuxt.js ' }

]

}

</script>

3) Setting up meta tags for your dynamic pages

Bạn có thể tùy chỉnh thêm các thẻ meta của mình với các dynamic page – các page mà trong đó có một route có thể được render khác nhau. Một page user profile có thể là một ví dụ.

Các dynamic route được định nghĩa bằng cách thêm vào prefix .vue component hoặc directory trong pages folder với một dấu gạch dưới.

pages/
--| users/
-----| _username.vue

pages/

--| users/

-----| _username.vue

Thao tác này sẽ tạo code route Vue.js của bạn như sau:

router<span class="token operator">:</span> <span class="token punctuation">{</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'users-id'</span><span class="token punctuation">,</span>
    path<span class="token operator">:</span> <span class="token string">'/users/:username?'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> <span class="token string">'pages/users/_username.vue'</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

router: {

routes: [{

name: 'users-id',

path: '/users/:username?',

component: 'pages/users/_username.vue'

}]

}

Và bên trong head method, bạn có thể access vào component data của mình với this. Bạn có thể sử dụng data mà bạn có quyền access bên trong thuộc this này để tùy chỉnh cách các thẻ meta của bạn được hiển thị với data trong component của bạn.

Dưới đây là một ví dụ về cách các thẻ meta cho page user profile có thể được render:

&lt;script&gt;
  head () {
    let user = this.user;
    
    return {
      title: `${user.fullName} @(${user.userName}) - Nuxt.js`,
      meta: [{
        hid: `iOSUrl`,
        property: 'al:ios:url',
        content: `myapp://user?screen_name=${user.userName}`
      },
      {
        hid: `description`,
        name: 'description',
        content: `${user.fullName}'s public profile at Nuxt.js`
      }]
    }
  }
&lt;/script&gt;

head () {

let user = this.user;

return {

title: `${user.fullName} @(${user.userName}) - Nuxt.js`,

meta: [{

hid: `iOSUrl`,

property: 'al:ios:url',

content: `myapp://user?screen_name=${user.userName}`

{

hid: `description`,

name: 'description',

content: `${user.fullName}'s public profile at Nuxt.js`

}]

}

</script>

What is hid and how does it help SEO?

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

Mặc định, khi sử dụng vue-meta, nó sẽ tạo ra 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 nó thu thập dữ liệu trang web của bạn, vì vậy tốt nhất là bạn nên 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. Việc có thuộc tính hidden sẽ báo hiệu cho vue-meta để thay thế thẻ thay vì sao chép nó.

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

Handling redirects with 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. Chuyển hướng 301 đưa client truy cập trang web và công cụ tìm kiếm đến một URL khác với URL mà họ đã nhập ban đầu 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.

Nuxtjs 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 file nuxt.config.js của bạn. Thuộc tính serverMiddleware giúp bạn set-up middleware sẽ chạy khi page được render ở phía server.

Dưới đây là một ví dụ về việc sử dụng thuộc tính này để set-up một hàm xử lý chuyển hướng 301 cho ứng dụng của bạn.

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

module.exports = {

serverMiddleware: [

'~/servermiddleware/seo.js'

]

};

Bạn có thể định nghĩa các route cần được redirect bên trong file có tên /301.json và import nó vào seo.js middleware.

[
  { "from": "/old", "to": "/new" },
  { "from": "/veryold", "to": "/verynew" },
  { "from": "/too-old", "to": "/new" }
]

[

{ "from": "/old", "to": "/new" },

{ "from": "/veryold", "to": "/verynew" },

{ "from": "/too-old", "to": "/new" }

]

Sau đó, bạn có thể cho file chạy qua các route mà bạn đã định nghĩa trong 301.json và nó trả về response 301 cho mỗi route, cùng với các HTTP header thích hợp.

const redirects = require('../301.json');
module.exports = function (req, res, next) {
  
  const redirect = redirects.find(r =&gt; r.from === req.url);
  if (redirect) {
    console.log(`redirect: ${redirect.from} =&gt; ${redirect.to}`);
    res.writeHead(301, { Location: redirect.to });
    res.end();
  } else {
    next();
  }
}

const redirects = require('../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, { Location: redirect.to });

res.end();

} else {

next();

}

Bạn có thể vào đây để tìm hiểu thêm về Nuxt.js middleware và cách mà nó có thể giúp bạn nhiều hơn là chỉ redirect.

SEO effects when rendering your app in spa mode

Có nhiều hơn một chế độ xây dựng trong các ứng dụng Nuxtjs. 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.

Tác dụng của việc quản lý tất cả các thẻ trong <head> nếu bạn chọn hiển thị ứng dụng của mình ở chế độ spa?

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 khi có nội dung ban đầu trên trang của mình. 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 duy nhất, 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 tải xong. Các hiệu ứng duy nhất hoàn toàn là giao diện người dùng. Ví dụ: cập nhật thẻ tiêu đề khi người dùng đã thay đổi chế độ xem.

References

https://medium.com/vue-mastery/best-practices-for-nuxt-js-seo-32399c49b2e5

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo