VUE3 SEO临时方案

问题背景

        前端小白开发了一个vue3的项目，并通过网上的各种方法设置了meta等信息。打开页面后也能看到tilte、keywords等信息。但是用站长工具分析SEO，只能分析是网站title是Vite APP，其他都分析不出来。

• 有问题的vue3代码

router的index.js

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component:Home,
      meta:{

        title:'食未网',
        subject:'美食、打卡',
        abstract:'汇总UP主吃过的餐厅',
        keywords:'二百者也,隋卞,唐仁杰,盗月社,真探,探店,高文麟,吃什么,美食推荐,美食',
        description:'食未网汇总各大UP主探店餐厅的地址信息等，旅游、出行吃饭必看。快来打卡UP主吃过的餐厅吧！',
      }
    },
 ]
})
export default router

main.js

router.beforeEach((to, from, next) => {
    document.title = to.meta.title || 'Default Title';// 使用元数据中的标题，如果没有则使用默认标题

    let titleMeta = document.querySelector('meta[name="title"]');
    if (!titleMeta) {
        titleMeta = document.createElement('meta');
        titleMeta.name = 'title';
        document.head.appendChild(titleMeta);
        titleMeta.content = to.meta.title;
    }
    let keywordsMeta = document.querySelector('meta[name="keywords"]');
    if (!keywordsMeta) {
        keywordsMeta = document.createElement('meta');
        keywordsMeta.name = 'keywords';
        document.head.appendChild(keywordsMeta);
        keywordsMeta.content = to.meta.keywords;
    }
    let descriptionMeta = document.querySelector('meta[name="description"]');
    if (!descriptionMeta){
        descriptionMeta = document.createElement('meta');
        descriptionMeta.name = 'description';
        document.head.appendChild(descriptionMeta);
        descriptionMeta.content = to.meta.description;
    }
    let subjectMeta = document.querySelector('meta[name="subject"]');
    if (!subjectMeta){
        subjectMeta = document.createElement('meta');
        subjectMeta.name = 'subject';
        document.head.appendChild(subjectMeta);
        subjectMeta.content = to.meta.subject;
    }

    let abstractMeta = document.querySelector('meta[name="abstract"]');
    if (!abstractMeta){
        abstractMeta = document.createElement('meta');
        abstractMeta.name = 'abstract';
        document.head.appendChild(abstractMeta);
        abstractMeta.content = to.meta.abstract;
    }

    next(); // 确保调用 next() 方法以确保导航继续进行。
});

• 实现的效果

站长工具检测 只能分析是网站title是Vite APP，其他都分析不出来（懒得倒回放图了）

问题原因

大概是vue3的页面是前端执行js渲染的，刚打开页面食没有meta这些信息，而爬虫不会执行js,所以就不会读到js执行后的meta信息。

经过一系列的折腾，但是发现dist目录是有一个index.html文件的，原来seo读的是这个tilte。

解决方法

百度、bing、chatGPT都问了，有什么SSR、预渲染等方案。经过一天的折腾，没搞成功。

所以最后我简单粗暴的在dist中的index.html添加了 title、keywords等

最后站长工具分析

总结

vue3中的SEO问题，我是通过修改dist中的index.html文件去解决的。不知道最后百度的效果怎么样。技术能力有限，仅供参考。