Nuxt official documentation: www.nuxtjs.cn/guide

Why use NUXT

Why use NUXT? Nuxt is Vue’s official recommended SSR framework. As we all know, Vue’s established applications are basically single page applications, and single page applications are very unfriendly to SEO.

What is your SEO

What is SEO

SEO (English Search Engine Optimization) literally understanding is very simple, is “Search Engine Optimization”, the simplest understanding is “Search natural ranking”.

Take “SEO optimization” as an example, go to Baidu search, we can quickly distinguish.

SEO is a way of search engine optimization, which is to use the rules of search engines to improve the natural ranking of websites in relevant search engines. The ultimate goal is to open the gap with peers, gain brand benefits, and occupy the market. SEO literally means getting your site to the top of the list and getting free, accurate traffic.

When we open a VUE application and examine its source code, we get the following code

<! DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico"> <link Href = "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel = "stylesheet" > < link Href = "https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/base16/github.min.css" rel = "stylesheet" > < script SRC = "https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js" > < / script > < script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script> <script SRC = "https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js" > < / script > < title > _ taro, Blog < / title > < link href="/css/chunk-0fb4d0e4.b931e2b3.css" rel="prefetch"> <link href="/css/chunk-1c51ab7a.9fe7a58b.css" rel="prefetch"> <link href="/css/chunk-e8f0408c.770d46a2.css" rel="prefetch"> <link href="/css/chunk-f907b4b0.a8a5d029.css" rel="prefetch"> <link href="/js/chunk-0fb4d0e4.c444a0ed.js" rel="prefetch"> <link href="/js/chunk-1c51ab7a.594dfc36.js" Rel ="prefetch"> <link href="/js/ chunk-e8f0408C.d26db26a.js "rel="prefetch"> <link href="/js/ chunk-f907b4B0.319bbaA4.js" rel="prefetch"> <link href="/css/app.8973c736.css" rel="preload" as="style"> <link href="/css/chunk-vendors.9c0a0257.css" rel="preload" as="style"> <link href="/js/app.5388f911.js" rel="preload" as="script"> <link href="/js/chunk-vendors.e5e76df6.js" rel="preload" as="script"> <link href="/css/chunk-vendors.9c0a0257.css" rel="stylesheet"> <link href="/css/app.8973c736.css" rel="stylesheet"> </head> <body><noscript><strong>We're sorry but _ taro, Blog doesn't work without JavaScript enabled. Please enable it continue.</strong></noscript> <div id="app"></div> <script src="/js/chunk-vendors.e5e76df6.js"></script> <script src="/js/app.5388f911.js"></script> </body> </html>Copy the code

Let’s say we’re a search engine, and when we go to this page, we see all kinds of introductions, and we don’t know what kind of page or site it is.

When we use NuXT for server-side rendering, the search engine crawler into our page source code, we can find some meta attribute information in our source code, search engines know what our website is used for, so as to benefit our website SEO.

SEO compared

When nuXT is not used to do SSR, in Baidu search “taro blog” related, only found taro related ~

When using SSR, we take the blog of moonfall as an example www.yueluo.club/

First of all in Baidu search “moon fall personal blog” you can see in the first is, this is the role of SEO

Then we open the source of moonfall big man’s blog to view

<meta data-n-head=" SSR "charset=" utF-8 "> <meta data-n-head=" SSR" name="viewport" content="width=device-width, Initial scale=1"> <meta data-n-head=" SSR "data-hid="description" name="description" content=" > <meta data-n-head="ssr" data-hid="keywords" name="keywords" <link data-n-head=" SSR "> <link data-n-head=" SSR" rel="icon" type="image/x-icon" href="/favicon.ico"> <link data-n-head="ssr" rel="dns-prefetch" type="text/css" href="//data.yueluo.club"> <link data-n-head="ssr" rel="dns-prefetch" type="text/css" href="//at.alicdn.com"> <link data-n-head="ssr" rel="preconnect" type="text/css" href="//data.yueluo.club"> <link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/css/reset.css"> <link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/css/style.css"> <link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/markdown/github-markdown.css"> <link data-n-head="ssr" rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1821727_bvf0m13rst.css"> </head>Copy the code

As you can see, there are many tags with data-n-head=” SSR “attribute in head, including keyword and description, which are SEO keywords

Secondly, we can see that all the content in the body has been rendered, which makes the content of our website rich, but also conducive to SEO code is too long, interested in yourself to visit the Moon Fall big guy blog.