uni-app中unicloud的H5 SSR怎么配置TDK?

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app中unicloud的H5 SSR怎么配置TDK?

只能设置title, keyword和description都设置不了

Harmonyos Next教程
1 回复

在uni-app中结合unicloud进行H5服务端渲染（SSR）时，配置TDK（Title, Description, Keywords）对于SEO优化至关重要。以下是如何配置TDK的详细步骤和代码示例：

1. 安装并配置unicloud

确保你的uni-app项目已经集成了unicloud，并且已经配置了云函数进行SSR渲染。

2. 创建SSR云函数

在uniCloud/cloudfunctions目录下创建一个云函数，例如ssr-render，并编写SSR渲染逻辑。以下是一个简化的示例：

// uniCloud/cloudfunctions/ssr-render/index.js
const cloud = require('wx-server-sdk');
const express = require('express');
const renderToString = require('@vue/server-renderer').renderToString;
const app = express();
const { createApp } = require('../../dist/common/entry-ssr'); // 引入你的SSR入口文件

cloud.init();

app.get('*', async (req, res) => {
  const appInstance = createApp(req.query); // 传递查询参数，用于动态设置TDK
  const appHtml = await renderToString(appInstance);

  const html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${appInstance.$data.title}</title> <!-- 动态设置Title -->
      <meta name="description" content="${appInstance.$data.description}"> <!-- 动态设置Description -->
      <meta name="keywords" content="${appInstance.$data.keywords}"> <!-- 动态设置Keywords -->
    </head>
    <body>
      <div id="app">${appHtml}</div>
    </body>
    </html>
  `;

  res.send(html);
});

exports.main = cloud.httpServer(app);

3. 在Vue组件中设置TDK数据

在你的Vue组件中，根据路由或其他逻辑设置TDK数据。例如，在pages/index/index.vue中：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '首页',
      description: '这是首页的描述',
      keywords: '首页, 关键词1, 关键词2'
    };
  },
  async asyncData({ query }) {
    // 可以根据query参数或其他逻辑动态设置TDK
    return {
      title: query.title || '首页',
      description: query.description || '这是首页的描述',
      keywords: query.keywords || '首页, 关键词1, 关键词2'
    };
  }
};
</script>

4. 部署并测试

部署你的unicloud云函数，并通过H5访问对应的SSR页面，检查网页源代码，确保TDK已正确设置。

通过以上步骤，你可以在uni-app结合unicloud的H5 SSR中灵活配置TDK，从而优化SEO效果。注意，实际应用中可能需要更复杂的逻辑来处理不同页面的TDK设置。

回到顶部