VUE3 SEO解决方案 后记(已被百度、Bing收录)

VUE3 SEO临时方案_vue3项目 seo-CSDN博客

问题背景

上一篇写到 直接 index.html 中修改了 title、keywords等内容。

但实际上用Bing去做 URL检查 时,会提示有没有H1标题,没有网页内容等严重错误。所以网页质量太低的话 也不会被收录。

最终解决方案

用nginx把所有爬虫机器人重定向到一个包含完整网页的静态页面上。

nginx配置(将爬虫重定向到index_s.html上)

location / {
            if ($http_user_agent ~* "(Baiduspider|Sogou Spider|360Spider|ShenmaSpider|Sosospider)") {
                rewrite ^/$ /index_s.html last; # 将请求重写到指定的HTML文件
            }

            if ($http_user_agent ~* "(Googlebot|bingbot|Yahoo! Slurp|YandexBot)") {
                rewrite ^/$ /index_s.html last; # 将请求重写到指定的HTML文件
            }

            try_files $uri $uri/ /index.html;


            #limit_conn addr 1000;  
           # return 429; # Too Many Requests
            #index  index.html index.htm;
        }

index_s.html 是一个固定的网页

最终效果

等了两三周后终于被Bing收录了

又过了一个多月百度也收录了

遗留问题

虽然被收录了,但是这种方法只能让机器人收录一张页面,如果是网站是多页面的话就不行了。

另外网页内容更新后,需要手动去更新index_s.html这个文件,比较麻烦。

最后这只是我这种前端小白用的方法,仅供参考

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3的SEO优化可以通过预渲染来实现。预渲染是一种在构建时生成针对特定路由的静态HTML文件的方法,可以将你的前端应用作为一个完全静态的站点。下面是两种实现Vue 3 SEO优化的方法: 1. 使用预渲染插件:你可以使用预渲染插件来生成静态HTML文件。一个常用的预渲染插件是`prerender-spa-plugin`。你可以在构建时简单地生成针对特定路由的静态HTML文件。这样,搜索引擎爬虫就可以直接看到你的页面内容,提高了SEO效果。 2. 默认根节点隐藏:另一种解决方案是在预渲染的HTML文件中默认隐藏根节点,然后在合适的时机再显式出来。这样可以避免在初始加载时显示空白页面,提升用户体验。你可以通过在根节点上添加`v-cloak`指令,并在CSS中设置该指令的样式来实现默认隐藏。 下面是一个示例,演示了如何使用预渲染插件和默认根节点隐藏来实现Vue 3的SEO优化: ```javascript // 配置预渲染插件 const PrerenderSPAPlugin = require('prerender-spa-plugin'); module.exports = { // ...其他配置 configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about', '/contact'], // 需要预渲染的路由 }), ], }, }; ``` ```html <!-- 在根节点上添加v-cloak指令 --> <div id="app" v-cloak> <!-- 页面内容 --> </div> <!-- 在CSS中设置v-cloak的样式 --> <style> [v-cloak] { display: none; } </style> ``` 请注意,以上方法只是Vue 3的SEO优化的两种常见方法之一。根据你的具体需求和项目情况,可能还有其他方法可以实现SEO优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值