为什么Vue.js项目URL在部分APP分享时显示noscript内容而非正确标题描述

LINE、Instagram等社交平台的链接爬虫不会执行客户端JavaScript代码，你用vue-meta配置的标题、描述是在客户端JS运行时才动态注入到页面HTML中的，爬虫请求页面时拿到的初始HTML里不存在这些动态生成的meta标签，因此会默认抓取页面中noscript标签的内容作为分享展示信息。
此外绝大多数社交平台优先读取Open Graph协议（og标签）的内容作为分享展示信息，仅配置普通的title、description标签也可能不符合抓取规则，你可以参考以下示例补充vue-meta的og标签配置：

// vue2 项目 vue-meta 配置写法
export default {
  metaInfo() {
    return {
      title: '页面实际标题',
      meta: [
        { name: 'description', content: '页面实际描述' },
        // 适配社交平台抓取的og标签
        { property: 'og:title', content: '页面实际标题' },
        { property: 'og:description', content: '页面实际描述' },
        { property: 'og:type', content: 'website' }
      ]
    }
  }
}

// vue3 项目 vue-meta/useHead 配置写法
useHead({
  title: '页面实际标题',
  meta: [
    { name: 'description', content: '页面实际描述' },
    { property: 'og:title', content: '页面实际标题' },
    { property: 'og:description', content: '页面实际描述' }
  ]
})

方案1：使用SSR/SSG改造项目（推荐） #

切换为服务端渲染（SSR）或静态站点生成（SSG）模式，直接在服务端/构建阶段就把对应的meta标签写入返回的静态HTML中，爬虫请求时可以直接拿到完整的meta信息。Vue生态可选用Nuxt.js框架快速实现SSR/SSG能力。

方案2：预渲染指定路由 #

如果项目路由数量较少，可以接入prerender-spa-plugin等预渲染插件，在打包构建阶段将常用路由的页面提前渲染为包含完整meta信息的静态HTML文件，无需改动业务逻辑即可满足爬虫抓取需求。

方案3：爬虫请求代理到预渲染服务 #

配置反向代理规则，识别请求UA为社交平台爬虫的请求，将其转发到预渲染服务返回渲染完成的带完整meta的页面，普通用户访问仍走正常SPA逻辑，改造成本最低。

你可以直接用curl命令请求页面URL，查看返回的初始HTML的head标签内是否存在对应meta标签：

curl 你的页面URL

如果初始HTML中没有你配置的title、og:title、og:description标签，说明爬虫无法抓取到正确信息，需要按上述方案改造。

内容的提问来源于stack exchange，提问作者hua