我们可以在没有 SSR 的情况下使用 vue-meta 吗？答案

【问题标题】：Can we use vue-meta without SSR?我们可以在没有 SSR 的情况下使用 vue-meta 吗？
【发布时间】：2021-08-09 00:58:05
【问题描述】：

我一直在与vue-meta npm package 合作更新我的元标记。但是我看到一个问题，即我放入 metaInfo() 的值在谷歌搜索描述中没有正确呈现。

metaInfo () {
    return {
      title: 'FAQ',
      meta: [
        {name: 'description', content: 'How can we help you?'},
        {property: 'og:title', content: 'How can we help you?'},
        {property: 'og:site_name', content: 'FAQ site'},
        {property: 'og:description', content: 'How can we help you?'}
      ]
    }
  }

如果我们在浏览器中打开 devtools，我们可以看到在 DOM 中附加了元标记。所以我们现在有两个描述。

我们放入index.html文件的元描述。
借助 vue-meta 包附加在 DOM 中的元描述。

我读了很多关于 vue-meta 的文章，我很难找到不使用 SSR 或 Nuxt 的解决方案，这样我们就可以在不使用 SSR 的情况下使用 vue-meta。

【问题讨论】：

那么，您的 Nuxt 设置是什么：target: static 和 ssr: false？使用 SSR 有什么问题？事实是，即使谷歌可以读取JS生成的内容，对于需要解析的内容也不会给出好的分数。如果您想要一些真正的 SEO 提升，唯一的做法是全力以赴并提前生成页面。要查看没有 SPA 的情况下可用的内容，您可以禁用 JS 并检查源代码。在 Nuxt 的情况下，不确定你叫什么 index.html。通过再次阅读您的问题，您似乎实际上正在运行 Vue？
@kissu 感谢您的回复。我只使用 vue.js 而不是在我的应用程序的任何地方使用 nuxt。它是一个拥抱应用程序，因此使用 nuxt 将完全重写整个应用程序。所以我想知道有没有其他方法可以在没有 SSR 的情况下使用 vue-meta 更新元标记属性。因为没有 SSR 的 vue-meta 不能正常工作。
Vue-meta 与此无关。它所做的只是在您运行 Vue 应用程序时附加/修改元标记，并且它正在正确地执行此操作。 Google 搜索结果不会运行您的 Vue 应用程序，它只会读取您 HTML 页面上的内容。因此，要么你需要在你的 index.html 中包含一些基本的元标记，如果它需要每个页面有不同的元内容，你就必须预先用 SSR 渲染页面。没有办法让谷歌为你的搜索结果解析你的运行时 javascript 代码。
实际上，将 Vue 应用程序传递到 Nuxt 应用程序并不是一件容易的事。你也许可以试一试。你会比预期更快地实现它。

标签： vue.js seo nuxt.js meta vue-meta

【解决方案1】：

不幸的是，这类问题需要在项目开始时提出（SSR 与否），通常会导致决定使用什么。

好消息是 Nuxt 与 Vue 没有什么不同。由于它只是 Vue 之上的一个包装器，因此您可以将 90% 的当前应用程序放入其中，它应该可以正常工作（几个月前有人这样做，而且运行非常顺利 + 非常快）。 Nuxt 没有很多缺点，本质上是在 Vue 之上添加了一些不错的东西。

您也可以尝试一下：https://prerender.io/vue-js/（它确实支持 SPA）
但是 IMO，您将通过带有 SSR 的 Nuxt（在 static 或 server 目标中）获得更多控制和灵活性。

【讨论】：

【解决方案2】：

是的，如果你想要元标记，你应该使用 nuxtjs。我面临着与网站已经建成相同的问题，但客户要求他也需要元标记。因此，我没有将整个站点迁移到 nuxtjs，而是决定使用 index.php 而不是 index.html。现在我可以根据页面类型添加元标记，而无需将整个项目迁移到 nuxtjs。

假设你的 index.html 在构建项目页面后看起来像

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <link href="/favicon.ico" rel="icon">
    <link href="/assets/fonts/fontawesome-webfont.woff2" rel="stylesheet">
    <link href="/assets/fonts/Edustdy.whtt" rel="stylesheet">
    <link href="/assets/fonts/fontawesome-webfont.woff" rel="stylesheet">
    <link href="/assets/fonts/fontawesome-webfont3e6e.eot" rel="stylesheet">
    <title>default title</title>

    <link href="/css/course.1d10f9e6.css" rel="prefetch">
    <link href="/js/about.b5c0f3ce.js" rel="prefetch">
    <link href="/js/course.d8d75b7d.js" rel="prefetch">
    <link href="/css/app.203f8281.css" rel="preload" as="style">
    <link href="/css/chunk-vendors.e8860705.css" rel="preload" as="style">
    <link href="/js/app.c39400af.js" rel="preload" as="script">
    <link href="/js/chunk-vendors.4cc0d445.js" rel="preload" as="script">
    <link href="/css/chunk-vendors.e8860705.css" rel="stylesheet">
    <link href="/css/app.203f8281.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
    <script src="/js/chunk-vendors.4cc0d445.js"></script>
    <script src="/js/app.c39400af.js"></script>

</body>

</html>

我的要求是仅从 API 获取特定页面的元数据，因此 index.php 看起来像

<!DOCTYPE html>
<html lang="">

<head>
<?php

 $current_url = $_SERVER['REQUEST_URI'];
$url = explode('/',$current_url);
if($url[1] == 'course'){
    $response =  shell_exec("curl yourapi.com/course/find?slug=$url[2]");
    $decoded = json_decode($response ,true);
} 
?>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <?php 
    if(!$decoded['courseName']){
        $decoded['courseName'] = "default title";
    }
    ?>
    <meta name="title" content='<?php echo $decoded['courseName'] ?>'>
      <meta name="description" content='<?php echo $decoded['snippet']?>'>
    <meta property="og:type" content="website">
      <meta property="og:url" content="http://yoursite.com/<?php echo $current_url?>">
      <meta property="og:title" content="<?php echo $decoded['courseName']?>">
      <meta property="og:description" content="<?php echo $decoded['snippet']?>">
      <meta property="og:image" content="<?php echo $decoded['thumbnail'] ?>">
      <meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />
    <meta itemprop="name">
    <meta property="og:title">
    <meta name="twitter:title">
    <meta name="description">
    <meta itemprop="description">
    <meta property="og:description">
    <meta name="twitter:description">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont.woff2">
    <link rel="stylesheet" href="/assets/fonts/Edustdy.whtt">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont.woff">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont3e6e.eot">

    <title>default title</title>

    <link href="/css/course.1d10f9e6.css" rel="prefetch">
    <link href="/js/about.b5c0f3ce.js" rel="prefetch">
    <link href="/js/course.d8d75b7d.js" rel="prefetch">
    <link href="/css/app.203f8281.css" rel="preload" as="style">
    <link href="/css/chunk-vendors.e8860705.css" rel="preload" as="style">
    <link href="/js/app.c39400af.js" rel="preload" as="script">
    <link href="/js/chunk-vendors.4cc0d445.js" rel="preload" as="script">
    <link href="/css/chunk-vendors.e8860705.css" rel="stylesheet">
    <link href="/css/app.203f8281.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
    <script src="/js/chunk-vendors.4cc0d445.js"></script>
    <script src="/js/app.c39400af.js"></script>

</body>

</html>

现在元标签将在 google、Facebook、Whatsapp 等上可用，但由于您使用的是 PHP，您可能需要考虑一些安全问题，因为我只是通过发送 30 分钟的 PHP 来做到这一点。

【讨论】：

Nuxt 的好处之一是能够在静态平台上免费托管它。在这里，您需要有一个正在运行的后端服务器。
同意 nuxt 远胜过任何一个。但是你必须配置你的 webpack auth 等。我使用了这个，因为我的截止日期很紧，不想迁移到 nuxt。您可以考虑添加元数据的有点懒惰的方法。