As a front-end, what is the limit of doing seo on a website? nuxt+vue

As a front-end, what is the limit of doing seo on a website?
Environment (Baidu goolge)
Here is an example (I use vue+nuxt.js), and the optimization scheme adopted by the framework is
gzip + packaging and splitting + element on-demand loading + third-party js configuration ssr and async
Tested by myself, the effect is very good

One, the basic class
1. Web page title
The title of the website is a very critical step in search engine optimization
<title>网站最关键的页面title</title>

2. Keywords such as:

 <meta data-n-head="ssr" name="keywords" content="关键词尽量在10个左右">

3. Description

 <meta data-n-head="ssr" name="description" content="描述不易特长保持在100字符之内">

When your website completes the implantation of the above basic classes, your website can basically be searched by title and full description.
However, some keywords may not be searched, or the ranking is very low...

4. Semantic tags such as
h1-h6、header、aside、nav、section etc;

Second, performance optimization mainly depends on the speed at which the website opens, that is, the score of the website (Google browser Lighthouse)

Items that affect website loading speed are as follows:
1. Eliminate render blocking resources (mainly js/css/img)
Take a closer look
https://segmentfault.com/a/1190000041729574?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

2. Don't underestimate this item in image processing. There are image shadows in all aspects of front-end SEO!
I will not give a detailed description here, I will summarize a directory that I have optimized for you.

(1) Picture quality (2) Picture description alt
(3) Set clear width and height of pictures to avoid stretching (4) Picture format (5) Lazy loading of pictures (6) Lazy loading off-screen and hidden images after all key resources are loaded to reduce interaction time

Third, the server-side server-side module in seo also has to be taken out separately.

1, using http2.0

 （这里为什么要采用http2.0？这篇文章做了简单的介绍             https://juejin.cn/post/6844903489596833800）

2. Configure gzip compressed static files to go .gz files

Example 1
Taking the architecture of webpack+vue as an example, download the plugin through npm install compression-webpack-plugin --save-dev (note the version here)
Configure in vue.config.js

 const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: true
        }));
    }
  },
}

Example 2
Here is the configuration for a muxt+vue

 build: {
    transpile: [/^element-ui/],
    vendor: ['element-ui'],
    productionSourceMap: false,
    plugins: [
        new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.(js|css|html|png)$/,
            threshold: 1024,
            minRatio: 0.8,
            deleteOriginalAssets: false // 是否删除原文件
        })
    ]
}

(The specific configuration of the parameters will not be repeated here)

3. Set the server-side static file cache (many websites cache up to 365d)

 以nginx为例
 参考文章
 https://juejin.cn/post/6844904148136099854

4. The setting and confirmation of the domain name is also very particular.
5. Configure 404 500 pages, etc. (divided into the server module here)
6. Add Robot.txt file
7. Configure the sitemap map file

Fourth, operation configuration blog interactive page, news page

1. External link configuration
2. Excellent articles on keyword articles

Five, other
ssr server-side pre-rendering here is a simple example of using the method provided by the nuxt official website

 async asyncData({ query }) {
    if(query.id){
      return axios.all([getCaseDesc({id:query.id}),getCaseLists({rows: 9,page: query.page})]).then(axios.spread((caseDesc,caseLists) => {
        const [ceseHeardDetail] = caseLists.data.list.filter(item=> +item.id === +query.id)
          // console.log(ceseHeardDetail)
        return {
          caseDetail:caseDesc,
          ceseHeardDetail,
          caseList:caseLists.data.list
        }
      })).catch(err=>{
        console.log(err)
      })
    }
  },

Students who have more seo related plans can leave a message to discuss...