我一直在使用 vue-meta npm 包 来更新我的元标签。但我发现一个问题,即我放入
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 的内容,我很难找到不使用 SSR 或 Nuxt 的解决方案,这样我们就可以在不使用 SSR 的情况下使用
vue-meta
。
不幸的是,这种问题需要在项目开始时提出(无论是否使用 SSR),并且通常会导致决定使用什么。
好消息是 Nuxt 与 Vue 没有太大不同。由于它只是 Vue 之上的一个包装器,因此您可以将当前应用程序的 90% 放入其中,并且它应该工作得很好(几个月前有人这样做过,而且进展非常顺利并且速度相当快)。 Nuxt 没有太多缺点,本质上是在 Vue 之上添加了一些不错的东西。
您也可以尝试一下:https://prerender.io/vue-js/(它确实支持 SPA)
但在我看来,通过带有 SSR 的 Nuxt,您将获得更多的控制力和灵活性(无论是在
static
或 server
目标中)。
是的,这是正确的,如果你想要元标签,你应该使用 nuxtjs。我面临着同样的问题,因为网站已经建成,但客户要求他也需要元标签。因此,我决定使用index.php而不是index.html,而不是将整个网站迁移到nuxtjs。现在我可以根据页面类型添加元标记,而无需将整个项目迁移到 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 时,您可能需要考虑一些安全问题,因为我只是通过在 PHP 中发送 30 分钟来做到这一点。