uniapp开发的网页SEO优化方案-适用于uni-app开发的web站点, uniapp手机端网页适配优化

基于nginx服务器优化的方案, 适用于 uniapp开发的网站, 可适用于老项目

由于官网的插件暂时不支持老的项目,所以使用这种方法
本教程亲测可用, 以及上线的项目网址: http://al.jn1tea.com/
打开调试工具, 手机模式, ctrl + u 可以查看每个页面的 seo内容**

教程内容有点长, 请耐心看完

1、uniapp设置为history模式 2、nginx设置好转发规则 3、后端服务器（类同云函数），动态给模版html设置标题、描述、关键词（根据自己需要）返回html（注意：同uniapp h5 的首页html模版一致）

教程, 前置要求, 通过服务器转发,
必须能安装nginx, 以及 node.js, express 服务器框架

在宝塔, 配置反向代理配置文件, 如果是linux 注意格式问题

处理动态生成的HTML模板, 通配符匹配, uniapp前端路径都是pages/

8332, 为你的 node.js 中express 服务器框架的端口号
注意: 由于原来的系统要求, 配置了一个全局代理, 所以这个路由匹配转发需要在全局代理上面才能生效

location ~ ^/pages/.*{
    proxy_pass http://127.0.0.1:8332;
    proxy_http_version 1.1;
    proxy_read_timeout 360s;   
    proxy_redirect off; 
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;
}

# 以下是原来的反向代理文件, 不用动
location / {
    proxy_pass http://127.0.0.1:8325;
    proxy_http_version 1.1;
    proxy_read_timeout 360s;   
    proxy_redirect off; 
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;
    #Set Nginx Cache

    set $static_filetKzRZE5L 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_filetKzRZE5L 1;
        expires 1m;
    }
    if ( $static_filetKzRZE5L = 0 )
    {
        add_header Cache-Control no-cache;
    }
}
#PROXY-END/

在宝塔中安装node.js, 以及express服务器
其他linux系统可以用命令行安装,
参考教程 https://www.cnblogs.com/front-web/p/15672575.html

安装node.js, 记得设置命令行版本一致

安装完成后需要启动一个node.js的网站
首先在服务器目录下创建一个文件夹, 刚开始是空的

进入命令行终端 cd /www/wwwroot/你创建的文件夹命
在终端中运行以下命令来初始化Node.js项目：npm init -y
在终端中运行以下命令来安装Express： npm install express
安装成功后创建 views 文件夹, app.js 文件 , 修改package.json文件

package.json 启动脚本文件内容
{
  "name": "putao_seo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.8",
    "express": "^4.18.2"
  }
}

app.js 文件内容, 重点, 里面内容需要根据自己的网站配置

1. 端口号, 要和上面配置反向代理一致

app.listen(8332, () => {
  console.log('Server is running on port 8332');
  console.log('express服务器启动成功! 端口号:8332');
});

2. 公共配置

const commonConfig = {
    BASE_URL: 'http://al.jn1tea.com/', // 设置BASE_URL, 你的域名, 例如:  http://al.jn1tea.com/pages/goods_details 设置为http://al.jn1tea.com/
    VUE_APP_INDEX_CSS_HASH: 'asxga454' //  uniapp 打包后会在static中生成一个css文件, index.xxx.css, 在这里填写
};

// 这里就是你的uniapp打包后的h5 每个页面的访问路径, seo优化就在这里修改title, description, keywords

// 想优化哪个页面就继续添加

app.get('/pages/goods_cate/goods_cate', (req, res) => {
    const pageData = {
        title: '商品分类页',
        description: '商品分类页描述',
        keywords: '商品, 分类',
        ...commonConfig
    };
    res.render('index', pageData);
});

// 下面是全部的源码, 根据个人网站自行修改

const express = require('express');
const ejs = require('ejs');
const path = require('path');

const app = express();

// 设置模板引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 公共配置
const commonConfig = {
    BASE_URL: 'http://xxx.xxxcom/', // 根据实际情况设置BASE_URL
    VUE_APP_INDEX_CSS_HASH: 'xxx' // 根据实际情况设置VUE_APP_INDEX_CSS_HASH
};

// 动态生成HTML
app.get('/pages/goods_cate/goods_cate', (req, res) => {
    const pageData = {
        title: '商品分类页',
        description: '商品分类页描述',
        keywords: '商品, 分类',
        ...commonConfig
    };
    res.render('index', pageData);
});

// 添加新的路由处理 /pages/store/home/index
app.get('/pages/store/home/index', (req, res) => {
    const pageData = {
        title: '店铺首页',
        description: '店铺首页描述',
        keywords: '店铺, 首页',
        ...commonConfig
    };
    res.render('index', pageData);
});

app.listen(8332, () => {
  console.log('Server is running on port 8332');
  console.log('express服务器启动成功! 端口号:8332');
});

进入views文件夹, 创建index.ejs 文件

// 配置文件, 刚才在app.js 的文件会动态解析到这里的title等标签中

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title><%= title %> | 葡萄有约</title>
        <meta name="Keywords" content="<%= keywords %>" />
        <meta name="Description" content="<%= description %>" />
       
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
            if(window.location.protocol == 'http:'){
                document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">')
            }
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

接下来创建一个node.js 网站

启动网站,

cd进入刚才初始化创建的目录, 用终端打开
输入命令 node app.js 启动express 服务器, 看到日志说明启动成功

注意, 如果中途修改配置文件, 记得重启 node app.js, 同理nginx 修改也要重启生效
如果没问题, 就可以访问你配置后的页面, ctrl + u 查看是否生效

##基于nginx服务器优化的方案, 适用于 uniapp开发的网站, 可适用于老项目

由于官网的插件暂时不支持老的项目,所以使用这种方法
本教程亲测可用, 以及上线的项目网址: http://al.jn1tea.com/
打开调试工具, 手机模式, ctrl + u 可以查看每个页面的 seo内容**