使用uni-app的<page-meta>添加meta等头部标签无效

使用uni-app的<page-meta>添加meta等头部标签无效

操作步骤：

<template>  
    <page-meta>  
        <head>  
            <meta name="keyword" content="seo搜索引擎优化" />  
        </head>  
    </page-meta>  
    <view>  

        </view>  
</template>

预期结果：

h5源码中，应该出现对应meta标签内容

实际结果：

源码没有任何变化

bug描述：

  1. 环境：uniapp+vue3+ssr服务端渲染（用的uni-ssr官方插件）
  2. 使用<page-meta>添加meta等头部标签无效，添加到任何页面都没有效果，浏览器缓存也清了，发布到ssr打包后发布到云函数还是无效
开发环境 版本号 项目创建方式
Windows 10 HBuilderX

Image Image


更多关于使用uni-app的<page-meta>添加meta等头部标签无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于使用uni-app的<page-meta>添加meta等头部标签无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用<page-meta>时需要注意以下几点：

  1. <page-meta>的正确用法是直接包含<meta>标签，而不是包含<head>标签。修改代码如下：
<template>
    <page-meta>
        <meta name="keyword" content="seo搜索引擎优化" />
    </page-meta>
    <view></view>
</template>
  1. 对于SSR场景，uni-ssr官方插件可能对<page-meta>的支持有限。建议尝试以下替代方案：
// 在页面script中设置
export default {
    onLoad() {
        // H5环境下设置meta
        if(process.env.VUE_APP_PLATFORM === 'h5') {
            document.title = '页面标题';
            const meta = document.createElement('meta');
            meta.name = 'keyword';
            meta.content = 'seo搜索引擎优化';
            document.head.appendChild(meta);
        }
    }
}
回到顶部